The secret life of an accessible player
?
4 likes?3,229 views
This document discusses principles of accessible user experience for media players. It begins by defining what a media player is and how user experience goes beyond just playback. It then covers standards and guidelines for accessibility before discussing key principles like putting people first, using familiar designs, and giving users control and choice. Specific topics covered include closed captions, content discovery, keyboard support, autoplay settings, and missing player controls. The goal is to design media players that are accessible and provide a positive experience for all users.
The secret life of an accessible player
- 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. 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. W H AT I S A M E D I A P L AY E R ?
- 5. B e y o n d p l a y b a c k ? Content discovery ? User journeys ? Design and layout ? User experience
- 6. 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
- 7. 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 /
- 8. – 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.
- 9. People ?rst: put people before technology.
- 10. Familiarity: using familiar structure, visual design, design patterns, behaviour, editorial and alternatives within website and applications
- 11. Choice: giving users choice on how they complete tasks in particular non standard or complex tasks
- 12. Control: giving users control over how, and when, they receive content.
- 13. 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
- 14. C L O S E D C A P T I O N S / S U B T I T L E S
- 15. – 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
- 16. Second language
- 17. Second screen
- 18. Environment
- 19. F bombs!
- 21. 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
- 22. 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 con?gurable 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)
- 23. C o l o u r c o d i n g c a p t i o n s
- 24. 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
- 25. YouTube and Brightcove offer customisation via the player controls
- 30. P o s i t i o n i n g
- 31. 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).
- 32. U s e r re s e a rc h
- 34. Player controls revealed, CC’s moved up
- 35. Player controls and programme into panel revealed, CC’s pushed to the top of the screen
- 36. Positioning CC’s with speakers
- 37. PA G E S T R U C T U R E
- 38. 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
- 41. C O N T E N T D I S C O V E RY
- 42. 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
- 43. Provide categories for alternative formats
- 44. Provide listings with alternative formats
- 46. 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
- 50. K E Y B O A R D
- 51. 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
- 52. 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
- 53. 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
- 54. 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
- 55. 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
- 56. V i s i b l e f o c u s Use unique hover/focus and selected states
- 57. V i s i b l e f o c u s Familiarity, cognition, branding
- 58. S l i d e r s ? Use standard keyboard interaction ? Avoid combining two actions in one ? Mute buttons are very popular!
- 60. 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
- 63. M i s s i n g p l a y e r c o n t ro l s
- 64. A U T O P L AY
- 65. – 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”
- 66. A u t o p l a y ? Opt in on first visit ? Global setting ? In-player setting ? In-page setting ? Browser / audio ducking
- 67. A N D F I N A L LY…
- 68. … 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
- 69. 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 :
- 70. @ 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