22 I think it works - an accessible HTML5 video player

So, I think, other than a lot of cleaning up, I have an accessible video player.

Here is what it does (so far??):

• Can access all functions with a keyboard
• Screen reader announces everything  - Though not always beautifully. This depends on the browser's accessibility implementation, ARIA support and how the screen reader itself behaves. Having said that you can find all of the controls
• No keyboard trap
• Is still accessible while in fullscreen mode
• Has a synched second audio track that can explain what is happening in the video to people who can't see it
• Captions of course - I'm reasonably happy with the implementation of them
• The captions can be presented in different:
• sizes
• fonts
• colours
• coloured background
• transparent background 0% 25% 50% 75% 100%
• The captions can be moved around the video so captions doesn't obscure anything
• Works on modern HTML5 browsers
• I've left the interface fairly dry, at least so far, so the developers can implement their own designs with CSS
• This project doesn't include a fallback to a flash version, their are plenty (?) of flash video players available and fallback was discussed in the first stage of this project.

But I still have that niggling feeling that something is missing... maybe it's just the jitters. What do you think? If it does what I say it does, is that enough?

Student testing will begin soon. We have had a small problem this year, as other projects may have also found, TAFE teachers who were teaching in 2012 aren't necessarily still available in 2013. I am in the process of organising a meeting with some teachers who I am quite sure will be very interested in trying out this player with their class. 

Luckily there are still some excellent teachers left.

19 Accessible HTML5 video player and ARIA

An accessible video player should tell a user what controls they are interacting with and what values those controls currently have. A play button that turns into a pause button must report its current state visually and, for those with a screen reader, audibly. A user also wouldn’t know the current volume, or what the current time of the video is, when the values of those controls don’t update.

These values need to be updated programmatically. I chose to use ARIA as this appears to be the way that the internet is heading and they supply a lot more attributes to play with than just the standard title and alt. A slider can have aria-valuemin, aria-valuemax, aria-valuenow and aria-valuetext for example. Much more information to potentially give a user.

What is ARIA? From the W3C ARIA website http://www.w3.org/WAI/intro/aria.php

‘WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.’

Aria seems to have been around awhile now but it is only at the W3C Candidate Recommendation stage (Stage 2 of a 5 stage recommendation process) as of January 2011. So really it’s just coming online – very similar to HTML 5. It’s all quite new.

So the problem that I found in the implementation of ARIA is, as everyone else has found, patchy browser implementation. Code (JavaScript) used to update the ARIA information is reasonably straightforward. The standard static ARIA attributes and the code updated ARIA attributes provide excellent feedback to a screen reader in Firefox but the code generated attributes provide no feedback in Chrome. Code that does provide feedback in Chrome is triggered twice. At least my code is.

In Chrome I need to make sure that on the slider tag the ARIA attribute role is equal to slider (slider supplied by jQuery). That’s ok. But Firefox doesn’t care if the role attribute is set or not.

The process of incorporating ARIA on the page, into the video player and then updating the ARIA attributes isn’t to complex. What is frustrating is the amount of experimentation required to figure out if it is in fact working properly or not.

I think that it is safe to say that we should try to make our pages as accessible to all users as possible and that ARIA will help to make the web a better place for all. With this in mind we must deal with the frustrations of browser and screen reader limitations and do the best we can until there is a standard that is complete and fully implemented by all.

It should happen shouldn’t it?