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

Context: the page this is taken from is typically displayed 'embedded' in an <iframe> on a third-party site; the Javascript function displayURL displays a popup message box that shows the URL for the regular page on the originating site.

Changes: the image was changed to an image-button, and an ALT attribute was added to match the title.

Taken from: a real example from a research web site hosted at The Open University (I'll save their blushes!)

So, the thinking behind this, is that for people with a disability and using assistive technology (for example a screen reader for those with visual impairments), semantics matter. A button containing an image says "press me", an image on it's own probably won't.

These are simple (for a developer), concrete examples of what I hope are good and bad practice for Web accessibility. Sometimes they may seem trivial to you – probably because you have some experience with accessibility. I hope they won't be trivial for everyone. Comments welcome!

[ Added 'context' and 'changes' following Tim's comment. ]


I think you have made the

I think you have made the example to abstract to be really helpful. Or perhaps it is better to say that most good pattern descriptions I have seen separate out the abstract general description of the pattern from a specific motivating example. And the key word there is motivating.

From the brief information given in your example, both string me as wrong. If the action you want performed is to open a URL, then surely there should be am <a> tag invloved:

<a href="{url to open}"><img src="..." alt="Get URL - popup" /></a>

Of course, the alt text is also not exemplary. What exactly is this URL we are getting? What does the image tell us?

The only possible need for JavaScript is to get the popup window behaviour, which it is implied is required. Two options there: add target="_blank" to the link, or if you care about strict validation, add something like class="newwindow" to the link, and have some proper progressive-enhancement javascript that adds the event handlers to all such links on the page.

These days, I consider use of attributes like onclick bad practice.


Hi Tim,

Thanks a lot for the feedback.

I perhaps didn't give enough context. This is real code, and without giving the name of the site in question, the page is typically shown embedded as an <iframe> on a third-party site. The function 'displayURL' does just that - pops up a Javascript box that displays the canonical URL for a page (the button next to this one gives a popup box with embed code). So, it should be a button and not a link (or image). I agree the ALT text can be improved - "Get page URL" or similar.

I agree using the onclick attribute is not great programming practice - though it doesn't affect the page accessibility. I was working with a colleague on a live site and doing what I often do - taking small steps to improve accessibility, while keeping the site working.

I may be able to name the web site. And in any case, next time I'll explain exactly what the starting point was ;)

Thanks again,