WebAIM - Web Accessibility In Mind

E-mail List Archives

RE: Printable character between adjacent links

for

From: Jukka Korpela
Date: May 15, 2002 12:05AM


Frank Gaine wrote:

> Checkpoint 10.5 of the WAI states "Until user agents
> (including assistive technologies) render adjacent links
> distinctly, include non-link, printable
> characters (surrounded by spaces) between adjacent links."

I think it is somewhat questionable whether this checkpoint has been put
into the right section, amongst "interim solutions" that are to be applied
_only_ as workarounds to deficiencies in user agents. Technically, if I use
<a href="...">Jukka</a> <a href="...">Korpela</a>
then the markup itself indicates that there are two separate links. But is
it _only_ a matter of defects in user agents that we shouldn't use such
markup? The typical visual presentation in graphic browsers is very easily
misread (when you don't notice the lack of underline between the words), and
besides, it's difficult to figure out what the presentation _could_ be - to
be clear enough, but not too disturbing. In fact, speech-based user agents
may treat it better than graphic browsers do, e.g. reading "link Jukka link
Korpela" - though if it just uses different tone of voice, problems surely
arise.

I would say that for general _usability_ reasons, adjacent links should be
avoided. It's often better to put a short list (<ul> or <ol>) of links after
a paragraph or section than to make individual words and phrases in running
text links. This helps to avoid the adjacent link problem.

> do you know whether this guideline applies equally to
> adjacent image-based links as it does to adjacent hyperlinks?

I guess you mean (at least typically) a set of graphics used for navigation.

This is an interesting question. I had though that it would suffice to use
separator characters in the ALT texts:

<a href="..."><img alt="foo | " src="..."></a><a href="..."><img alt="bar |
" src="..."></a>...

but now I realize I was probably wrong. In particular, a user who uses a
graphic browser and has cognitive problems may find it difficult to separate
the images from another, and the alt texts wouldn't help then.

I think the graphic counterpart of the recommendation to use separator
characters is to make the graphics visually separate, e.g. by using borders
and/or some margins between the images (using e.g. the hspace attribute or
CSS or both).

But my basic recommendation is to use image links in conjunction with texts
only, and only when the image makes some real contribution, e.g. by
illustrating the meaning of the link text, perhaps even helping people who
don't know the language, or the word. And in such cases, it is usually
natural to put each link (a combined image and text link) on line of its
own, or into a <li> element of its own, avoiding the separator program.
Something like

<div><a href="flowers.html" title="Information about the flowers we sell">
<img alt="" src="flower.gif" title="A sample flower: a magenta rose">
Flowers</a></div>

(with suitable styling to be added)

--
Jukka Korpela
TIEKE Tietoyhteiskunnan kehitt