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:

Bad

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

Good

  <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 Userstyles.org - you can install it through Stylish for Firefox (or IE7Pro for Internet Explorer - not tested!)

Screen shot: Twitter accessibility style sheet in action

RNIB Techshare conference 2009

2009-09-16 09:00
2009-09-18 17:00
Europe/London

Location

ExCeL London
One Western Gateway
E16 1XL
United Kingdom
51° 30' 29.0376" N, 0° 1' 18.5808" E
See map: Google Maps

The Royal National Institute of Blind People's annual web and technology accessibility conference and exhibition is coming up next month. This conference embraces everyone and all topics, not just those with visual impairments.

Techshare logo

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 blog.UserVoice.com - Firefox 3.

Join the Kit-Cat club

Location

Stowe Landscape GardensMK18 5DQ
United Kingdom
51° 57' 50.976" N, 1° 1' 25.7772" W
See map: Google Maps

Recently my family and I visited Stowe Gardens in Buckinghamshire. Between the 1690s and the 1750s the modest early-Baroque garden was transformed into an ambitious English Barque park by its owner Richard Temple, 1st Viscount Cobham. Temples, shrines, lakes and bridges were designed by notables including Charles Bridgeman, John Vanburgh, William Kent and James Gibbs. Capability Brown was head gardener for a time, and worked with Kent. The gardens contain artwork depicting politicians and other historical figures (the Shrine of British Worthies), and were visited by many nobles, including political leaders. Temple was a member of the Whig Kit-Cat Club.

Stowe Gardens Palladian Bridge, by Lady Gooner
Palladian Bridge, L.Gooner/Flickr.