The secret life of an accessible player

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 W A N

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

W H AT I S A M E D I A P L AY E R ?

B e y o n d p l a y b a c k

• Content discovery

• User journeys

• Design and layout

• User experience

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

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.

People first: put people before technology.

Familiarity: using familiar structure, visual design, design patterns, behaviour, editorial and alternatives within website and applications

Choice: giving users choice on how they complete tasks in particular non standard or complex tasks

Control: giving users control over how, and when, they receive content.

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

C L O S E D C A P T I O N S /S U B T I T L E S

– 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

Second language

Second screen

Environment

F bombs!

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 o l o u r c o d i n g c a p t i o n s

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

YouTube and Brightcove offer customisation via the player controls

P o s i t i o n i n g

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).

U s e r r e s e a r c h

Player controls hidden

Player controls revealed, CC’s moved up

Player controls and programme into panel revealed, CC’s pushed to the top of the screen

Positioning CC’s with speakers

PA G E S T R U C T U R E

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

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

Provide categories for alternative formats

Provide listings with alternative formats

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

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

K e y b o a r d a c c e s s i b l e t o o l t i p s

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

V i s i b l e f o c u s

Use unique hover/focus and selected states

V i s i b l e f o c u s

Familiarity, cognition, branding

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

M i s s i n g p l a y e r c o n t r o l s

A U T O P L AY

– 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 F I N A L LY…

… 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 :

@ 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 r o u p . c o m

Thank you and questions