Captioned video search

This is an experiment to embed a Google Custom search in a page. Results are returned for and

Enjoy! (May 2011)


OU media player project

Tony Hirst has just blogged about the Office for Disability Issues new accessible media player AKA the "Most Accessible Media Player on the Web". Both he and Will Woods have alluded to work that The Open University is undertaking. I thought I'd fill in the gaps.

The OU is at the start of a 6 month development to create a multimedia player that (we hope):

  1. Will be an "attractive" player that the average designer/ blogger would be happy to use on their site.
  2. Can be used in a variety of contexts - our Moodle-based virtual learning environment, OpenLearn, OU-Drupal sites, blogs, Cloudworks...
  3. Will deliver content mostly from the OU podcast site in the contexts mentioned above.
  4. Will be accessible to users with disabilities - both in terms of control, and display of alternatives like transcripts and captions.
  5. Usable on a variety of devices, including mobiles and tablets.
  6. Will be delivered in a maintainable way.

Accessibility pattern 1: use buttons for Javascript actions, not images

The is the first in a series of what I'm terming accessibility patterns and anti-patterns - one per post (feel free to argue that it's an idiom!) Here is an example:


  <img onclick="displayURL()" title="Display URL" ../>


  <input type="image" alt="Display page URL - popup window"
        onclick="displayURL()" src=".." title=".." />

MALT Wiki player with personalization mockup

Wendy Porch and I presented an evaluation version of the new MALT Wiki player at Techshare, in September. Since then I've been busy with other projects, but I've now had time to produce a mockup demonstrating personalization options and how I hope to get people to contribute. This is based on my own thoughts and some interesting points raised by people including Jonathan Hassell during our presentation.

The screenshot below shows the player with a panel below starting "About Learn about Moodle". The player works, while the meta-data and personalization panel is mostly just a mockup. This panel would be hidden initially, with a "show/hide" button. And the thinking is that the panel would always be available, including when a video is embedded in a third-party site like a blog, a virtual learning environment or video sites like YouTube.

MALT Wiki player, with mockup meta-data and personalization panel

MALT Wiki player with personalization and meta-data mockup, on Flickr

Flash wmode considered harmful

Despite the emergence of the <video> element in HTML 5, Shockwave Flash is still the defacto standard for publish multimedia on the Web. Macromedia, and now Adobe have improved the support for assistive technologies and software interfaces like Microsoft Active Accessibility (MSAA) within the Flash browser plug-ins and it is now possible to create a video player in which all the controls and status information are perceivable by screen reader users. So all the challenges to do with Flash have been overcome, no problems? Wrong.

I and others have uncovered what appears to be a little publicised or little known flaw that renders some of the "embed codes" displayed at sites like YouTube, Vimeo et al completely inaccessible.

Screen shot, wmode = window - default, OK

Twitter accessibility user styles

Last year I started experimenting with user style sheets - text files you can install on your computer to re-format or change the appearance of a web-site or sites. You may want to do this, if for instance some adverts or animations on your favourite site annoy you, or to increase colour contrast or font-size. A while ago, I created a style sheet for Twitter, and today I uploaded it to - you can install it through Stylish for Firefox (or IE7Pro for Internet Explorer - not tested!)

Screen shot: Twitter accessibility style sheet in action

Improving the accessibility of UserVoice

We are currently testing a Web site with real users and naturally we're requesting feedback. To that end we've signed up with UserVoice (their main site doesn't seem to be accessible in Firefox - not an issue, 23/07). You add some simple Javascript to your page, and the visitor sees a neat "Feedback" tab on the left or right. Click the tab with your mouse and a dialogue box pops up with a form for your comments.

A screen shot of the Feedback box
A screen shot of the Feedback dialogue box on - Firefox 3.