There’s a few simple accessibility tips that I’ve been meaning to talk about, some of which I took on to improve the experience on this site. Today’s subject — skip navigation.
What is it?
Quite simply, the skip navigation technique is creating a link on your site that anchors the visitor down to where the actual content on the page begins.
Why is that important?
For people with no disabilities, the ability to get right to the meat of the page and read what’s important is straightforward. Ignore the navigation, ignore whatever else you want — and just find what you need.
Those using screen readers have a different experience. Screen readers read everything from the top down. So when a user is going from page to page, they have to endure listening to all the navigation read first, as well as any other elements such as site search, header imagery, and sub-navigation. You can imagine how tedious this gets for someone just wanting to read what they came to the site for.
Also, those who use the keyboard for navigating a page must tab through all of those elements to advance as well.
In those cases, skip navigation enables one to get right to the content.
How do you do it?
Though there are few header elements on the art of web accessibility, I nonetheless have a “Jump to Content” link at the top.
The coding is quite simple:
<a href=”#maincontent”>Jump to Content</a>
Pretty much your standard, old-school anchor link.
There are a couple variances out there. You can make the skip navigation hidden to most users but able to be read by a screen reader. Frankly, the easiest, most straightforward way is to just put it at the very top of your site, in plain sight.
Those without a need for it will just ignore it. It’s not like it’s an eye sore either. Quite honestly, and perhaps in some cases unfairly, when I see skip navigation on a site, it gives me some measure of comfort that the developers at least have some consideration for web accessibility.
Common iterations of the wording are “skip navigation”, “skip to main content”, etcetera.
Like I said, while there are other ways to do this, such as hidden and driven through your stylesheet, I say just display it loud and proud, at the top of your site.