Category: flash

Accessibility for HTML5 Video, Controls and Captions

As you probably know, HTML5 provides a video tag for rendering a video natively in a web browser (and audio as well). But unfortunately, as of now, HTML5 video isn’t very accessible, yet.

Controls

Browser support for native HTML5 video controls varies widely. No browsers but Opera provide keyboard-accessible controls. Well, you can also start/stop with keyboard in Firefox 3.6. To make the controls keyboard-accessible calls for JavaScript. This is fairly easy to do, and is quite fun to implement for web geeks like me. But nonetheless it requires JavaScript which obviously isn’t good for devices and browsers which don’t have JavaScript available.

Note that in Firefox 3.6 and below, disabling JavaScript also disables the native video controls! To bring up a contextual menu, you must do a mouse right-click in the video.

Captions

The HTML5 spec has a great plan for captions, timed tracks. It accommodates well for different types of roles (captions, subtitles, descriptions) and multiple languages. The format of the caption text files themselves may be similar to the time stamp format WebSRT (Web Subtitle Resource Tracks). Sadly, there is no support for timed tracks in any browser at this time. The code would go inside the video tag and would look something like this:


Fortunately, in the meantime, Bruce Lawson of Opera provides a method for JavaScript HTML5 video captions. The solution uses JavaScript to grab caption text from span tags with time attributes and place the text over a video. Neat! If JavaScript is unavailable, the caption text appears below the video.

About the Codecs/Containers

Not directly related to accessibility, but let’s take a look at the supported video codec/containers of the major browsers. First off, and not surprisingly, Internet Explorer doesn’t support any HTML5 video. And the word is that IE9 will only support WebM if it’s installed on the operating system.

So to cover all major browsers today, you’ll need to encode to an OGG and MP4 file, and then do a Flash video fall-back for IE. Here’s a great table on current support codecs/containers.

Video support in shipping browsers
Codecs/container IE Firefox Safari Chrome Opera iPhone Android
Theora+Vorbis+Ogg · 3.5+ · 5.0+ 10.5+ · ·
H.264+AAC+MP4 · · 3.0+ 5.0+ · 3.0+ 2.0+
WebM 9* 4 · 5.0+ 10.6+ · ·

It appears WebM will be the codec of the future, but again, it is only partially supported at this time.

Related links

Walmart’s Poor Alt Text and Use of Flash

Yesterday, Steve Faulkner of The Paciello Group wrote a tweet quoting an alt attribute on the Walmart.com home page. My first reaction was disbelief, frustration, and outrage.

I replied to the tweet, then found the following code (line 2421) which Steve was referencing:

The Walmart.com site includes Flash technology. To avoid interruption of software designed to aid visually-impaired people, please turn off your Flash player.

The message was designed for screen reader users. But just this one line of code is so wrong on so many levels including the following.

  1. A spacer GIF? What is this, 1998? This is a badly outdated and poor practice.
  2. Alt text is too long; I suggest under 15 words. Or, include the text as part of the main page or use some kind of “D” link.
  3. This message was meant to be vital to the user (particularly if blind), and thus should not be stuffed in an ALT attribute.
  4. Many people with visual impairments may not be blind, but have “low vision”, and thus may not use a screen reader. These individuals could use a screen magnifier or simply enlarge text with their browser.
  5. Law: Walmart is a very large corporation providing sale of goods nationally; this means that they are a great “Target” for a lawsuit, excuse the pun! (If you don’t get the joke, read about the NFB vs. Target lawsuit.)
  6. The use of Flash in itself is highly debatable. One can write a book about this point, but basically, Flash requires a proprietary plug-in, usually not developed with accessibility, and is not supported on many modern user agents such as the iPhone/iPad (not to mention many others including text-only browsers).
  7. How does one turn off his Flash player, anyway?

Solutions

Immediate: Provide HTML alternative to content.

Better: Use accessible Flash and provide an HTML alternative to content.

Best: Use HTML only for content. Implement with web standards, progressive enhancement, and DOM scripting, to create the same visual effect as the original Flash. This will not only make your content accessible, but will also make the site lighter and faster and is also good for SEO.

Accessible YouTube Sites

There are two web accessible versions of the popular YouTube video web site, that I’m aware of at least. (If you know others, please comment.) They are “Easy YouTube” and “Accessible Interface to YouTube”.

One big issue is that captioning doesn’t appear to be supported on either site. I’ve never worked with the YouTube API (yet), but I’m assuming there are technical blockers here. (Please comment if you know more!) Flash and JavaScript are required for both sites.

Both sites have excellent markup and implement great accessibility improvements. But as with any site, more enhancements can be made. Here’s a quick review each.

Easy YouTube

JavaScript expert Chris Heilmann developed this site in 2008. You can search for a video or enter the URL of a specific YouTube video. You can also choose from three video sizes. Excellent documentation and help is provided.

Suggestions:

  • Missing H1 tag.
  • Add highly visible hover/focus states on elements.
  • Add captioning support, if possible.
  • Implement ARIA.
  • Add video comments content.

Accessible Interface to YouTube

This is a more recent accessible YouTube interface. The author is unknown. (I’d like to know who you are as it’s very well done!) The interface is very simple yet informative; it display video details and comments. ARIA is implemented, but I have not fully tested it. There’s also a survey you may take to help further development.

Suggestions:

  • Add highly visible hover/focus states on elements.
  • Add captioning support, if possible.
  • Add controls for volume adjustment.

Accessibility Round-Up from Twitter

Accessibility Review: PetsContained.com by Joe Dolson.

In the United Kingdom, join the campaign for Offcom to increase audio description on TV from 10% to 20%.

Wanted: Flash and Dojo accessibility experts for contract work. Contact John Foliot at the email address: jfoliot AT stanford DOT edu.

Update on The Paciello Group’s ARIA role support: how the Windows browsers stack up.

Rate Accessible Twitter on oneforty.com.

Interviews:

Event reminders: