Paved with good intentions

By Lis Shorten

The road to an inaccessible website is all too often paved with good intentions. I’ve seen countless sites where the designers have made a real effort to improve accessibility, but have ended up doing the exact opposite.

ALT tags are essential for accessibility, but designers sometimes get confused about what it should contain. The point of an ALT tag isn’t to describe the visual interface – it’s to fill in any gaps in meaning once the images are removed. Screen reader users don’t really care whether a site looks nice, so ALT tags like ‘picture of drop shadow’ quickly get irritating. Empty tags should be used for decorative images, or better still they should be taken out of the HTML and moved into the style sheet. Using structural markup correctly will avoid having to use images for spacers or bullets too. Screen readers are smart enough to know what’s a link, so don’t put ‘link to’ in your ALT tag, otherwise it’ll sound like the machine has a stutter when it adds it’s own ‘link to’ on the front of that.

Title text on links can confuse users if it just repeats the link text. Users of screen magnifiers could find that the tooltips that come up when they hover over a link obscure parts of the screen they need, and screen readers will ignore title text anyway. It’s important to warn users before new windows are opened, but websites that do that in the title text will find that the users who most need the warning will never hear it.

Completing forms using a screen reader requires the user to build a mental map of the form. Legends and fieldsets can help: they enable form elements to be grouped under a heading so that users can more easily understand what each field represents. The billing address and delivery address fields can be grouped separately under legends of ‘billing’ and ‘delivery’ for example, so that users aren’t confused by there being two postcode boxes. The legend is read before each form field though, so if it’s too long or meaningless, it’ll turn listeners off. Sometimes it’s redundant in the way it’s implemented: you don’t need to tell people their name is a personal detail.

Navigation is particularly difficult to do well if you don’t understand how people use assistive technology. Partially implementing a tabindex (just for the search form and button, for example), can result in people jumping around the page in a less logical order than they would have done without a tabindex defined. Access keys once seemed like a good idea, and you can still find guidelines recommending them. But these keyboard-activated shortcuts often conflict with browser controls and users can’t remember different controls for all the sites they visit. Nowadays, you’re best off ignoring access keys. Skip links can help people to jump over navigation, instead of having to plough through it on every page, but if there are too many skip links, users end up confused.

A little knowledge can be a dangerous thing, and if you don’t understand the purpose of an accessibility enhancement, you risk a bad implementation. It’s not enough to tick the boxes. To ensure that you create a site that is genuinely accessible, you need to work with users of assistive devices to get a clear understanding of how they are used.