MCU: Accessible Web Design Tip: How to make printable characters between adjacent links invisible.

Some older screen readers are unable to distinguish between adjacent links if there is no printable character between them. The W3C Web Content Accessibility Guidelines 1.0 provides a priority 3 checkpoint to deal with this unfortunate behaviour of older screen readers:

10.5 Until user agents (including assistive technologies) render adjacent links distinctly, include non-link, printable characters (surrounded by spaces) between adjacent links.

The obvious place on a page where you can find several adjacent links to is on a horizontal navigation bar at the top or bottom of a web page. So how do you adhere to this guideline in situations where displaying a printed character in your navigation bar would upset your beautifully crafted design?

This weeks tips shows a technique I have used on the Glasgow West End website (http://www.glasgowwestend.co.uk) to make the printable characters separating links invisible, by making them the same colour as the navigation bar background,

<a href="/postcards.php">postcards</a> <span style="color: #000000;">|</span> <a href="/classified.php">classified ads</a>

In this particular instance I have used a vertical bar to separate adjacent links, the background for the navigation bar is black, so I have used inline style information to set the color attribute of the vertical bar to black - thus rendering it invisible. (Best practice is of course to avoid using inline styles and use external style sheets to set your presentation preferences.)

Contributed by Jim Byrne
Updated Wednesday 3 Sep 2003

Free weekly accessible web design tip

Comments