Navigation anchors

Adding anchors drastically increases a Website’s navigation accessibility, especially if readers have disabled the CSS or are viewing the site from a handheld device.

To get it straight: anchors are on-page navigation. They provide readers with a quick way to skip down to a spesific section on that page.

It does not mess with the site's regular design either, since the anchors will be hidden from most readers. And if they are not hidden from a reader, that reader will be really happy they are there.

Adding and styling navigation anchors is simple.

First add a paragraph with the anchors at the very top of the page. Something like this would suite most sites:

Skip down to navigation, content or the ordering form.

<p class="accessibility-helpers">Skip down to <a href="#navigation" title="Skip down to navigation">navigation</a>, <a href="#content" title="Skip down to content">content</a> or the <a href="#ordering" title="Skip down to ordering form">ordering form</a>.</p>

Content might be to generic for most pages, experimenting a little and be as descriptive as possible: article, comments, chekout, contact information, et cetera.

The second step is adding the anchors to the page. Remember to apply the class to avoid whitespaces and place the anchors at the very top of each section. See XHTML notation.

<a class="accessibility-helpers" name="navigation" title="Site navigation"></a>

The last step is hiding the anchors from being displayed on regular screens, projectors and on printed versions of the page. In other words: keep them away from the regular design of the page.

Add the following to the style sheet to hide them from the regular site design:

@media screen, projection, print { #accessibility-helpers {display:none; } }

Note: aural browsers will read the hidden content aloud. Hiding content from aural browsers is not a good idea since it will be read even though it is not visible. Notably, it might cause confusion if a reader is only listening to the page, but not having the visual anchors visibile.

Anchors in XHTML

In XHTML anchors can be applied to ids appended to anything. Like:

<div id="content-section">

But this is not supported in many older Web browsers.