Each week, MCU emails out a free Web accessiblity tip. This week’s tip recommends placing printable characters between adjacent links (such as in horizontal navigation). 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 tip then goes on to suggest that you may want to hide the printable character so as not to upset your beautifully crafted design. It provides this example which uses an inline style to make the printable character (a pipe |) the same colour as the background:
<a href="/postcards.php">postcards</a>
<span style="color: #000000;">|</span>
<a href="/classified.php">classified ads</a>Best practice is to avoid using inline styles (as pointed out within the tip) and to use external style sheets instead. So how to replicate this effect in an external style sheet? In the spirit of my recent post on mark-up tactics we ditch the span and wrap the whole thing in a paragraph with an id :
<p id="nav"><a href="/postcards.php">postcards</a>
|
<a href="/classified.php">classified ads</a></p>Then we style the paragraph so that the text is the same colour as the background thus hiding the pipe, and set the text colour of the links so they can be seen:
P#id {
background:#000;
color:#000;
}
P#id A {
background:#000;
color:#FFF;
}Of course you may prefer to build your horizontal navigation as a styled list instead of worrying about inserting printable characters.
