W3C home > Mailing lists > Public > w3c-wai-ig@w3.org > July to September 2015

Re: html5-video keyboard controls

From: Rakesh <prakesh369@gmail.com>
Date: Thu, 6 Aug 2015 07:47:36 +0530
Message-ID: <CAD0dgbGA25+iCKDLJWRMJdnHhh1cbmNoNfzTLtP8FVvi=Z8SWA@mail.gmail.com>
To: Mandana Eibegger <mandana@schoener.at>
Cc: Web Accessibility Initiative Interest Group <w3c-wai-ig@w3.org>
Below are two accessible HTML 5 players I have found recently as part
of my research on accessible media players. Hope they will be helpful
https://github.com/paypal/accessible-html5-video-player
https://github.com/nomensa/Accessible-Media-Player

I have seen many more players but these two are the most I liked.

Thanks & Regards
Rakesh
www.maxability.co.in
On 8/4/15, Mandana Eibegger <mandana@schoener.at> wrote:
> 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
>
>
>
>


-- 
Best Regards
Rakesh Paladugula
www.maxability.co.in
Received on Thursday, 6 August 2015 02:18:07 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 13 October 2015 16:21:57 UTC