How to use the program
Skip-links and Headings
- Skip crumbtrail
- Help →
- In-depth →
- Skip-links and Headings
This article looks at two simple things you can do to improve the accessibility of your navigation.
Skip-links
A "skip" link is an an internal page anchor, that allows people using a serial browser to jump past, or to, a particular section of content.
In the case of "skip past" links, the purpose is monotony-reduction, so that a reader doesn't have to listen to or manually tab-through the same links on every page. In the case of "skip to" links, the purpose is convenience, since it allows for quicker access to commonly-used page areas, such as content and navigation.
My recommendation is to include both "skip to content" and "skip to navigation" links at the top of every page, whichever way the source code is arranged.
Headings
If you put a heading immediately before the navigation bar, it's useful to people who use a serial device, such as a screenreader or text-only browser - these types of browser generally have a "headings list" or "headings-reading mode", which can be used to jump directly to the navbar if it's labelled with a heading.
The navbar heading doesn't really need to be visible to graphical browsers - they can tell what it is by looking at it. But you can't feed content specifically to serial browsers per se; and you can't hide it with display, visibility, overflow or clip, because that will hide it from most browser-based screenreaders as well.
What you can do is move it off the page, so that it's rendered (and accessible to readers), but not apparently visible; a technique that's become known as "offleft positioning".
For example, a heading like this (skip code example):
<h2 id="navigation">Site navigation</h2>
could be styled away like this (skip code example):
#navigation
{
position:absolute;
left:-10000px;
}