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

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 first: 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 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)

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

33. Player controls hidden

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