RE: html5-video keyboard controls

Here is one accessible video player library:
http://ableplayer.github.io/ableplayer/ 

-----Original Message-----
From: Mandana Eibegger [mailto:mandana@schoener.at] 
Sent: Tuesday, August 04, 2015 11:19 AM
To: Web Accessibility Initiative Interest Group <w3c-wai-ig@w3.org>
Subject: html5-video keyboard controls

Hi,

i am currently working on implementing custom video controls for html5-video and i am wondering how to make this accessible in the best way.
i did search the internet, but i just couldn't find any specification to follow, so i thought maybe someone in this group could have some input/feedback ....


*****
ISSUE 1: proper markup

i was thinking of a basic structure like this

<div role="application">
   <video id="my-video" ...>
   <nav aria-controls="my-video">
     <button ...>play [or pause - depending on the state]</button>
     <button ...>some other function
     etc. ...

does it make sense, to use the nav-element as a container for the controls? or would this be misleading?
is the application-role appropriate for this case?


****
ISSUE 2: tabbing

i think it is not a very good practice, if the user has to tab through 
all controls by default.

but if i do:
- only the play-button can get focus via tabbing and
- move between the controls with left-arrow & right-arrow key,
i get a problem when using sliders to for instance control the volume or 
the current-time of the video, because following the WAI-ARIA best 
practices (http://www.w3.org/TR/wai-aria-practices/#slider), the 
arrow-keys control the value of the slider-widget.

an option to solve this issue, could maybe be to tab to the application and
- the next tab would focus any next element outside of the application
- use some key to enter the application.
once the application is entered, the user can tab between the controls 
regularly.

would this procedure be understandable for the users? and if, would the 
enter-key be the appropriate key to use?


****
ISSUE 3: keyboard-shortcuts for controlling the video-properties

once the application has focus, keyboard-shortcuts could be used to 
control the properties. for instance
- use space bar for play/pause
- use +/- to adjust the volume
- page-up/page-down to jump to the end/beginning
etc ...

which shortcuts should best be used?
what about "mute" for instance? or jump to some point in time?



controlling the video should be usable without any help-descriptions.

i hope, someone finds this question interesting and worth discussing ...

thanks,
mandana

Received on Tuesday, 4 August 2015 19:18:41 UTC