Providing Skip Links in Your Pages
Published: | 1 Comment
Reading Time: 4 minutesThis post looks at a quick and easy way to make your site easier to use for those who rely on keystrokes to get about the internet.
Who uses the keyboard anyway?
Blind or visually impaired users of your website may be unable to use a mouse or other pointing device. The same is true of some users with motor impairments. These people may rely on keystrokes to interact with a site and to access the content. For these users the tab key will get a lot of use as it allows the focus on the page to move from one link or form element to the next.
The tab key can get a lot of use
However many large sites can have a lot of links near the top of the page – for example in a navigation row beneath the header, or as a navigation column to the left (usually) of the main content of the page. Typically the default tab order of the page will mean that a user will need to use the tab key many, many times through all the navigation links before they reach the actual content. This can be off-putting to say the least. And remember sites with a poor usability experience will not keep their visitors for as long.
Page psychology
When people arrive at a page on your site they will have done so either from a bookmark, by following a link from another page or from a search engine query. Whichever way they arrive, the content of you page is what they’re after. Once they’ve read and absorbed the content they may be ready to move to somewhere else on your site. Only now do the navigation links on your site become useful.
Forcing users to tab through all the navigation links before they reach the content becomes a chore.
So, what can be done?
One solution is to provide skip links (aka jump links) which allow users to jump straight to the content (or other key areas within a page too if you think appropriate). In the same vein a link to the top of your main site navigation is a good idea too. It is sensible to position such links right at the top of the page so that they come first in the tab order of the page. Also, screen reader users can quickly return to the top of a page to access the links once they’ve read your content.
Some web designers and site owners may not wish the designs of their site to be cluttered by links right at the top of the page. But not to worry, it is possible to hide the links and then make them visible only if they’re tabbed to.
If you need to know how to do this, read on.
The technical bit
In an earlier post (Text for Screen Readers Only) I presented a CSS technique for making text invisible but still accessible by screen readers. We’re going to use that technique here but with some added CSS properties that make the links visible when they get tabbed to.
Where to go
Firstly lets set up the links to jump within the pages. You need to specify somewhere for the links to jump to. In the past this used to done via ‘named anchors’ like this:
<a name="top"></a>
Named anchors have fallen out of use now since browsers let you jump directly to any element on a page that has an id attribute set. So why not jump to the top level heading in your content or even the container that the content sits in. For example:
<div id="content"> <h1 id="contentheading">What this page is about</h1> ...
Getting there
Next, place links to these elements right at the top of your HTML – just after the <body> tag. Don’t forget the # to tell the browser it’s an in-page link, and give the jump links a distinct CSS class. For example:
<body> <a href="#content" class="skip">Jump to main content of page</a> <a href="#navigation" class="skip">Jump to navigation links</a> ...
Now make it work
That’s all you need in the HTML. Next you need to update your CSS file to include the following styles:
a.skip:link, a.skip:visited, a.skip:hover {
position:absolute;
top:0px;
left:-9999px;
z-index:1000;
background-color:#E7FF44;
border:1px solid #006699;
padding:0.5em;
font-weight:bold;
font-size:1em;
text-decoration: underline }
a.skip:active, a.skip:focus {
top:0px;
left:0px; }The first definition places the link way to the left of the visual area of the page – you can style the link to your own requirements but make it noticeable. The second definition is they key one and makes the link visible at the top of the page when it’s tabbed to.
And here is the finished effect – examples from this website.
Skip links that appear only when they are tabbed to
Are there other options?
The default tab order of links and form elements on a page follows the order they appear in the HTML that the browser uses to render the page (unless you override this). Some sites – including this one – place the page content as close to the top of the HTML as they can and before all the navigation links. The idea here is to follow the page psychology I mentioned earlier – ie the content here is initially more important than links away.
A future post will look in more detail about the order of content within web pages.
What do you think?
Was this post helpful to you? Got a different view?
In either case we’d love to hear from you. Why not leave a comment?
Related Posts
Recent posts in the Accessibility category:
- Building Accessible WordPress Themes – Featured Images Apr 28th, 2019
- How to Build an Accessible WordPress Theme Apr 28th, 2019
- Accessibility Checklist Apr 7th, 2019
- Street Accessibility for the Blind in Vienna (Video) Jul 28th, 2016
- Instagram Accessibility Reduced by New Design May 18th, 2016
Share this page (Links open new windows/tabs)
One Response to “Providing Skip Links in Your Pages”
Like to leave a comment?
Please note: All comments are moderated before they will appear on this site.
Previous post: Accessibility London Unconference 2010
Next post: Order of Page Components
Well-written article very easy to follow.