13 Making an accessible HTML5 video player - first steps

Early attempts at making an accessible video player have been quite positive, buttons are working and are accessible with a keyboard and screen reader. There are no keyboard traps and the video player works in all HTML5 enabled browsers. Embedding the video player on the page is still quite simple and no special Javascript initialisation is required. There are no HTML5 tricks or work rounds required to get it to work.

So what have I learnt so far? I've learnt about fullscreen video playback.

An interesting point to note about video players in fullscreen.

Before this project started many different video players were reviewed. One in particular was found to be very accessible though not at all accessible in fullscreen mode. When the player was in fullscreen mode all controls disappeared and it was possible to tab to other items on the web page that were covered by the fullscreen video. This was very confusing but it is true of many video players and in fact many HTML items that are shown in fullscreen mode.

Problem number one for this project; how to turn off access to all other tab enabled HTML objects when the video is showing in fullscreen.

It turns out to be fairly easy, anything that has a CSS property of display:none is removed from the tab order.  Javascript is used to 'hide' all items that are not part of the video player in fullscreen mode and 'show' them when not in fullscreen mode. Currently JQuery's toggle function is doing this work.

The video controls that are part of your player also need to move depending on the current mode of the player. Currently the controls that are being used sit underneath the video when in normal mode but when the  player is set to fullscreen there is obviously no room for the controls to sit underneath. CSS is used to resize and move the controls when the video player enters and leaves fullscreen mode. Again the JQuery toggle function is used to achieve this.

I am sure that there are other ways of doing this and I leave this post thinking about my next internet search "Creating a modal window with Javascript'.

12 Accessible Modern Video For All - Stage 2

Our team were pleased to receive funding for the continuation of the Accessible Modern Video For All project. This second stage will attempt to create an accessible HTML5 and JavaScript based video player for modern web browsers. This video player will be designed to meet accessibility standards including WCAG2 level AA.

While there are many video players available that are quite accessible none have been identified as being completely accessible to all users. These players may be missing some valuable information such as labels for controls, feedback on the position of sliders (volume or time), provision of colour, font and font size choices for captions. One excellent example appeared to be completely accessible except for feedback on sliders that was unclear and difficult to access and it was also unfortunately completely inaccessible when run in full screen mode.

Common HTML5 and JavaScript based video players can also be notoriously difficult for the layperson to include on the web page and may not meet the HTML5 standard (as it is at this point in time) at all.

Our plan is to keep it as easy as possible for everyone to implement and maintain a video player on a web page and to make that video player accessible to all. We hope to contain all JavaScript, that can confuse people, in external files and to use HTML5 markup only to keep implementation as simple as possible.

The video player will be tested with students who work in noisy environments, students who come from culturally and linguistically diverse backgrounds and students who may have hearing or visual impairments.

Our team is excited by this opportunity and we hope we are ultimately successful in providing an accessible modern video player for all.