Re: html5-video keyboard controls

I've tested Plyr and submitted some bugs. 
Works well with Jaws and NVDA but the captions and mute checkbox are not read with VoiceOver.
I can't find the cause. If you can, please comment on the bug:
https://github.com/Selz/plyr/issues/103 <https://github.com/Selz/plyr/issues/103> 

Thanks,

Gijs

> On 05 Aug 2015, at 10:57, Michiel Bijl <michiel@agosto.nl> wrote:
> 
> This is another great one. Haven’t tested it extensively, but it handles keyboard/tab order support, and works with VoiceOver: http://plyr.io <http://plyr.io/>
> 
> —Michiel
> 
>> On 05 Aug 2015, at 10:29, Gijs Veyfeyken <gijs@anysurfer.be <mailto: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 <mailto:mandana@schoener.at>]
>>>> Sent: Tuesday, August 04, 2015 11:19 AM
>>>> To: Web Accessibility Initiative Interest Group <w3c-wai-ig@w3.org <mailto: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 <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
>>>> 
>>>> 
>>>> 
>>> 
>>> 
>> 
>