The secret life of an accessible player

2,556 views

Published on

Beyond code and compliance what makes a usable media player for disabled users.

Published in: Internet
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,556
On SlideShare
0
From Embeds
0
Number of Embeds
938
Actions
Shares
0
Downloads
10
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

The secret life of an accessible player

  1. 1. T H E S E C R E T L I F E O F A N A C C E S S I B L E M E D I A P L AY E R H E N N Y S WA N
  2. 2. W h y a m i s t a n d i n g h e re ? There’s not enough focus on accessible user experience I love TV
  3. 3. W H AT I S A M E D I A P L AY E R ?
  4. 4. B e y o n d p l a y b a c k • Content discovery • User journeys • Design and layout • User experience
  5. 5. P R I N C I P L E S O F A C C E S S I B L E U S E R E X P E R I E N C E
  6. 6. S t a n d a rd s a n d g u i d e l i n e s • W3C Web Content Accessibility Guidelines • W3C User Agent Accessibility Guidelines • W3C Media Player Accessibility Guidelines • 21st Century Communications and Video Accessibility Act S e e : w w w. i h e n i . c o m / a c c e s s i b l e - m e d i a - p l a y e r- re s o u rc e s /
  7. 7. – A c c e s s i b i l i t y o r i g i n a t e s a t U X : a B B C i P l a y e r c a s e s t u d y Standards and guidelines tend to focus on code over design, output over outcome, compliance over experience.
  8. 8. People first: put people before technology.
  9. 9. Familiarity: using familiar structure, visual design, design patterns, behaviour, editorial and alternatives within website and applications
  10. 10. Choice: giving users choice on how they complete tasks in particular non standard or complex tasks
  11. 11. Control: giving users control over how, and when, they receive content.
  12. 12. Value: Prioritising features that add value to all users but increase access for disabled users. - A c c e s s i b i l i t y o n B B C i P l a y e r w i t h C h ro m e c a s t
  13. 13. C L O S E D C A P T I O N S / S U B T I T L E S
  14. 14. – U K O ff i c e o f C o m m u n i c a t i o n s ( O f c o m ) , 2 0 1 4 7.5 million people in the UK (18% of the population) used closed captions: of that 7.5 million, only 1.5 million were deaf or hard of hearing. This indicates that 80% of subjects utilized closed captions for reasons other than hearing loss
  15. 15. Second language
  16. 16. Second screen
  17. 17. Environment
  18. 18. F bombs!
  19. 19. I s s u e s w i t h c a p t i o n s • Dated guidelines • Styling and readability • Preference • Positioning • Words per minute • Scrolling or blocks • Resizing across devices • Too invasive
  20. 20. U s e r A g e n t A c c e s s i b i l i t y G u i d e l i n e s t o t h e re s c u e • Use configurable text: The user can configure recognized text within time-based media alternatives (e.g. captions) in conformance with 1.4.1. (Level AA) • Allow Resize and Reposition of Time-based Media Alternatives: The user can configure recognized alternative content for time-based media (e.g. captions, sign language video) as follows: (Level AAA)
  21. 21. C o l o u r c o d i n g c a p t i o n s
  22. 22. C u s t o m i s a t i o n • iOS 7 • Netflix • Brightcove • YouTube 1Content in playback Hide Title 2 Attribute 2 Title 3 Attribute 3 Title 4 Attribute 4 2 3 4 Playing Next 24 Title 1 Attribute 1
  23. 23. YouTube and Brightcove offer customisation via the player controls
  24. 24. P o s i t i o n i n g
  25. 25. U s e r a g e n t a c c e s s i b i l i t y g u i d e l i n e s t o t h e re s c u e a g a i n It's recommended that caption text or sign language alternative cannot obscure the video or the controls (1.1.5) and that the user can configure the size and position of media alternatives (1.1.6).
  26. 26. U s e r re s e a rc h
  27. 27. Player controls hidden
  28. 28. Player controls revealed, CC’s moved up
  29. 29. Player controls and programme into panel revealed, CC’s pushed to the top of the screen
  30. 30. Positioning CC’s with speakers
  31. 31. PA G E S T R U C T U R E
  32. 32. P a g e s t r u c t u re Consider the relationship of the player to the content on the page it’s embedded in • Precede the player with an appropriate heading • If the player is the primary content place after an h1 • Use headings consistently across pages • Skip links • Links to help
  33. 33. C O N T E N T D I S C O V E RY
  34. 34. C o n t e n t d i s c o v e r y Provide multiple ways to find alternative formats via: • Menus • Listings • Search • In page • In player
  35. 35. Provide categories for alternative formats
  36. 36. Provide listings with alternative formats
  37. 37. C o n t e n t d i s c o v e r y Provide multiple ways to find new content • Minimize navigating • Minimize page refreshing • Sign post new content in multiple ways • in page • in player • in full screen
  38. 38. K E Y B O A R D
  39. 39. K e y b o a rd a c c e s s b a s i c s • Group controls appropriately • All controls are accessible via the keyboard • It is possible to tab from the page to the player to the page • No keyboard trap
  40. 40. F u n c t i o n a l g e o g r a p h y Now play/pause, mute/volume, forward/rewind, captions, full screen Next episodes, recommendations, sharing, programme information Always preferences and settings, closed captions on/off, styles, auto-play, desktop to mobile, in-page / in-player
  41. 41. L a b e l s Text on buttons improves support for speech input users N E T F L I X A B C N E W S Y O U T U B E
  42. 42. K e y b o a rd a c c e s s i b l e t o o l t i p s
  43. 43. V i s i b l e f o c u s • Provide visible focus • Flash- preferably override the yellow default outline • HTML - do not suppress the default styling • Able Player - uses own HTML5 controls
  44. 44. V i s i b l e f o c u s Use unique hover/focus and selected states
  45. 45. V i s i b l e f o c u s Familiarity, cognition, branding
  46. 46. S l i d e r s • Use standard keyboard interaction • Avoid combining two actions in one • Mute buttons are very popular!
  47. 47. K e y b o a rd t r a p • Ensure users can tab from the page to the player and back again • Place links to ‘Skip the player’ above the player
  48. 48. M i s s i n g p l a y e r c o n t ro l s
  49. 49. A U T O P L AY
  50. 50. – A c c e s s i b l e H T M L v i d e o a s a b a c k g ro u n d , P u n k c h i p “Autoplay is generally acceptable if the user was aware, when they clicked the link, that the proceeding page was going to play a clip”
  51. 51. A u t o p l a y • Opt in on first visit • Global setting • In-player setting • In-page setting • Browser / audio ducking
  52. 52. A N D F I N A L LY…
  53. 53. … a n d g o a n d s e e 7 l e s s o n s f ro m d e v e l o p i n g a n a c c e s s i b l e H T M L 5 p l a y e r D e n n i s L e m b re e , G a s l a m p A B , 2 n d f l o o r
  54. 54. I D 2 4 M a y 2 1 , 2 0 1 5 • Steve Faulkner • David Sloan • Léonie Watson • Sarah Horton Hans Hillen • Mike Paciello • Henny Swan • Chaals McCathie Nevile • DOug Schepprs • Laura Kalbag H o s t e d b y :
  55. 55. @ i h e n i i h e n i . c o m h s w a n @ p a c i e l l o g ro u p . c o m Thank you and questions

×