the secret life of an accessible player
TRANSCRIPT
W h y a m i s t a n d i n g h e r e ?
There’s not enough focus on accessible user experience
I love TV
B e y o n d p l a y b a c k
• Content discovery
• User journeys
• Design and layout
• User experience
S t a n d a r d 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- r e s o u r c e s /
– 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.
Familiarity: using familiar structure, visual design, design patterns, behaviour, editorial and alternatives within website and applications
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 r o m e c a s t
– U K O f f 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
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
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 r e 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)
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 2Title 3
Attribute 3Title 4
Attribute 4
2 3 4Playing Next
24
Title 1
Attribute 1
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 r e 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).
P a g e s t r u c t u r e
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
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
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
K e y b o a r d 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
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
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
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
S l i d e r s
• Use standard keyboard interaction
• Avoid combining two actions in one
• Mute buttons are very popular!
K e y b o a r d 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
– 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 r o 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”
A u t o p l a y
• Opt in on first visit
• Global setting
• In-player setting
• In-page setting
• Browser / audio ducking
… a n d g o a n d s e e 7 l e s s o n s f r o 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 r e e , G a s l a m p A B , 2 n d f l o o r
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 :