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=".." />

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.