Re: html5-video keyboard controls

This is another great one. Haven’t tested it extensively, but it handles keyboard/tab order support, and works with VoiceOver: http://plyr.io

—Michiel

> On 05 Aug 2015, at 10:29, Gijs Veyfeyken <gijs@anysurfer.be> wrote:
> 
> This might be of interest to you:
> 
> Media Player Accessibility Comparisons
> https://docs.google.com/spreadsheets/d/1QJVcXx5hTWYBcJbHJD3DrL3hSFVbfy1VQFyADMtrDFY/edit?pli=1#gid=0 <https://docs.google.com/spreadsheets/d/1QJVcXx5hTWYBcJbHJD3DrL3hSFVbfy1VQFyADMtrDFY/edit?pli=1#gid=0> 
> 
> Kind regards,
> 
> Gijs
> 
>> On 04 Aug 2015, at 22:06, Mandana Eibegger <mandana@schoener.at <mailto:mandana@schoener.at>> wrote:
>> 
>> this is a great library - thanks for the link!
>> 
>> On 04/08/15 21:16, Gunderson, Jon R wrote:
>>> Here is one accessible video player library:
>>> http://ableplayer.github.io/ableplayer/ <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
>>> 
>>> 
>>> 
>> 
>> 
>