skip to navigation

Accessibility tips for Web editors

As an editor, you're responsible for most of the links on the site - certainly those in the main text and possibly links in navigation. By following a few simple linking rules, you can easily make your pages a lot more accessible. And there are a couple of other things you can do too, which we'll look at later.

Links

  1. Links should be on descriptive expressions. They should not state the URLs. So for example a link to this page should be something like accessibility tips for web editors, not http://www.tinhat.com/accessibility/editors. Links should definitely not follow the format, for more information on accessibility for editors, click here. Try to imagine a talking browser (as used by blind people) going through your page reading out only the links. If the result would make sense, you've got it right. WAI Double-A requirement.

  2. Links to the same URL should usually have the same link text. If you have a two links to the same URL on a page, then the descriptive text for both links should be identical. Occasionally this isn't possible, for example when you have a short description in a navigation bar, and a more literary expression within the main text. But even then, you should try to make them similar so that any reasonably intelligent user would guess they're leading to the same place. It's good practice to keep the same link text for a URL if it's linked from different pages on the same site, but again sometimes this isn't practicable.

  3. Links to different URLs should not have the same text. For example, don't have two links on the same page to further information that link to two different URLs. The same applies if you have two separate search mechanisms. They can't both use the single word "search". This is a very common error. Under WAI guidelines you can use the workaround of giving each link a different title under its <A> tag, but it's best avoided. WAI Double-A requirement.

  4. If a link opens in a new window, state this either in the main text or in the title attribute of the HTML link tag. If a link leads to a non-HTML file, for example a PDF, also state this in the main text or title attribute, preferably with the file size quoted too, so people know how long it will take to download.

  5. Links should be separated by something more than a space or break or carriage return. In other words you can't have a list of links with nothing substantial between them. Each link in a list of links must be separated from its neighbour by a bullet point or small image or neutral character such as a vertical pipe | (a "printable element"). This is a WAI Triple-A requirement. It's a tricky one because it can create usability problems. Many users expect a symbol next to a link to be linked too. Unless I'm coding to Triple-A standard, I tend to ignore the rule for vertical lists, but I do separate list of links in main text using bullet points, and often separate horizontal lists of links using the pipe symbol. For this page to reach WAI Triple-A standard, I added invisible (but printable) dashes between the links listed in the left hand column.

The language attribute

Every page should state its natural language in its html tags. For example <html lang="en">. This is a WAI Triple-A requirement.

If you use a foreign expression in the text, it should be incorporated within its own language tag. This is a WAI level A requirement. For example the expressions "showing plenty of zeitgeist"" should show in your html code as "showing plenty of <span lang="de"> zeitgeist"</span>". The reason is that talking browsers can then recognise the word and give it the proper pronunciation, rather than making a pig's ear of it. Because talking browsers differ in their capabilities, there is a case for saying it isn't necessary to do this with commonly used foreign words, but it's generally safer to do so.

Alt tags and long desc

This is one of the basic rules of accessibility and a WAI level A requirement. If you use a graphic, provide alternative text in the graphic's HTML alt tag to describe the graphic for blind people and the many users who browse with graphics turned off. The description might describe the image or might describe its purpose. For example a logo used for a home link can be described as "link to home" rather than "company logo".

Images that are provided as eye-candy or otherwise serve no purpose do not need a description, but they should still have an alt tag, either alt="" or alt=" " or alt="*". This shows that the image is of no importance, rather than indicating that the coder forgot to put in a description.

For images that contain a lot of information, such as graphs, it may be worth adding a longdesc attribute, containing a link to another Web page where the content of the graphic is described in detail.

 

This page is valid XHTML to WAI Triple-A standard (ignoring bad link descriptions put in for demonstration purposes)