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
- 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
- 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.
- 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.
- 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.
- 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)