MCU: Accessible Web Design Tip: How to make printable characters between adjacent links invisible.
Added on Wednesday 3 Sep 2003
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.)
The tips archive is at: Weekly accessible Web Design Tips.
Register for your weekly accessible web design tip.