ptg16476052Writing Accessible HTML 61522
Links
As mentioned in Lesson 21, “Designing for the Mobile Web,” avoiding the “here” syn-
drome is imperative for mobile design, but it’s also important when it comes to acces-
sibility. Having all the links on your page described as “click here” or “here” isn’t very
helpful to disabled users (or any others). Just thinking carefully about the text you place
inside a link to make it descriptive of the link destination is a good start.
To make your links even more usable, you can use the title attribute. The title attri-
bute is used to associate some descriptive text with a link. It is used not only by alterna-
tive browsers, but many standard browsers will display a tool tip with the link title when
the user holds her mouse pointer over it. Here are some examples:
Navigational links are a special case because they usually come in sizable groups. Many
pages have a nice navigation bar right across the top that’s useful to regular users who
are able to skim the page and go directly to the content they want. Users who use screen
readers with their browsers and other assistive technologies aren’t so lucky. You can
imagine what it would be like to visit a site that has 10 navigational links across the top
of the page if you relied on every page being read to you. Every time you move from one
page to the next, the navigation links would have to be read over again.
There are a few ways around this that vary in elegance. If you’re using CSS to position
elements on your page, it can make sense to place the navigational elements after your
main content in your HTML file but use CSS to position them wherever you like. When
a user with a screen reader visits the site, he’ll get the content before getting the naviga-
tion. You can then include a link that skips to the navigation at the top of the page and
hide it using CSS. Users with screen readers can jump to the navigation if they need to
but won’t be required to listen to it on every page.
It’s worth remembering that many disabled users rely on key-
boards to access the Web. You can make things easier on them
by using the accesskey and tabindex attributes of the <a> tag
to enable them to step through the links on your page in a logical
order. This proves particularly useful if you also include forms on
your page. For example, if you have a form that has links inter-
spersed in the form, setting up the tabindex order so that the
user can tab through the form completely before he runs into any
links can save him a lot of aggravation. This is the sort of conve-
nience that all of your users will appreciate, too.TIP