Blog » Building an accessible website: in-page navigation

Building an accessible website: in-page navigation


Accessible in-page navigation provides a way for website visitors to jump straight into the main content on your site and access different sections of the page quickly, without having to tab through every link to get there.

Many websites include in-page navigation features and widgets that aren't accessible to people with disabilities. Specific examples include menus that display on mouse hover, checkboxes that are only accessible via mouse click, or any feature requiring the use of the mouse for interaction.

Usually those features are difficult, if not impossible, for users with disabilities to access. But sometimes the scenario isn't so clear cut.

For example, let's say a visitor who might not be able to see the page, and thus cannot use a mouse, wants to access a section on your site that lives below the fold, but to get there using the tab key instead of a mouse, they would have to tab through every link on the main navigation bar, plus the Twitter feeds and sidebars. It would be so much easier if they could skip tabbing and go directly to the section that interests them.

Enter accessible in-page navigation links.

How to implement accessible in-page navigation links

An accessible in-page navigation link or "skip link" allows users with disabilities to skip a section of the site as they're tabbing through it. Not every accessible in-page navigation link needs to be immediately visible, but every in-page navigation link does have to be able to get keyboard events. Style rules such as display: none; or visibility: hidden; will not work for this particular behaviour, because they prevent the links from getting events from the keyboard.

We will make use of the classes below. These will allow us to hide the links, but they will still be able to capture keyboard events.

Some frameworks, like Bootstrap, come with a ready-to-use CSS class for this.

.accessibility-link {
    clip: rect(1px,1px,1px,1px);
    height: 1px;
    margin: 0;
    overflow: hidden;
    padding: 5px;
    position: absolute;
    width: 1px;
}

This class will be used when the skip link receives focus. This will make the link visible while it has focus.

.accessibility-link:focus {
    clip: rect(auto,auto,auto,auto);
    outline-offset: -3px;
    outline: 5px auto -webkit-focus-ring-color;
    outline: thin dotted;
    position: static;
    text-decoration: underline;
}

Adding a "skip to" menu

Let's add a menu at the top of the page that will let visitors jump directly to specific content, to the search bar, or to other areas on the page.

For the main accessibility menu we need some classes to ensure our list doesn't display bullets or any other margins.

#pagemenu {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
 
#pagemenu > li {
    text-align: center;
}

The HTML structure for the skip links will look like this:

<ul id="pagemenu">
    <li><a class="accessibility-link" href="#main-content">Skip to Page Content</a></li>
    <li><a class="accessibility-link" href="#search-box">Skip to Search Box</a></li>
    <li><a class="accessibility-link" href="#main-menu">Skip to Main menu</a></li>
    <li><a class="accessibility-link" href="#footer-menu">Skip to Footer menu</a></li>
</ul>
Accessible in-page navigation Links

Tabbing into the web page will show the in-page navigation links.

Skipping past in-body complex widgets

Some sites have complex widgets that aren't main structure elements. These widgets can contain many links, and other elements accessed by the tab key. Visitors might want to skip past these widgets to avoid having to tab dozens of times to get to the content that follows.

Here's an example: an accessible in-page navigation link to skip a Twitter feed. We are using the aria-label attribute in the anchor to let the visitor know where he currently is on the page.

In this example, we have added a skip link for visitors when they are tabbing through the page. With this link, visitors are going to be able to skip the Twitter feed.

<a id="beforeTwitterTimeline" tabindex="0" title="Start of twitter feed" aria-label="Start of twitter timeline"></a>
<a class="accessibility-link" href="#afterTwitterTimeline">Skip twitter timeline</a>
 
<!-- Twitter feed -->
<iframe class="twitter-timeline twitter-timeline-rendered" title="Twitter Timeline">
    Bunch of links in the twitter feed, hard to tab through to the end
    ...
</iframe>
 
<a class="accessibility-link" href="#beforeTwitterTimeline">Skip to the start of the twitter timeline</a>
<a id="afterTwitterTimeline" tabindex="0" title="End of twitter feed" aria-label="End of twitter timeline"></a>
Image showing the in-page navigation feature to skip the Twitter timeline

Before we tab in the Twitter widget, we are allowed to skip it.

As you can see, implementing accessible in-page navigation can be straightforward. It's a matter of considering the challenges people with disabilities will encounter when navigating your site, and providing some simple alternatives so they can skip to areas of interest more efficiently.


Related Blog Posts

Building an accessible website: Links

Links are the pathways that bind the web and give it structure. For people with accessibility challenges, perceiving and understanding the links on your...

Read more »

Building an accessible website: how to make toggle boxes screen-reader friendly

Making your website accessible to people with visual impairments involves ensuring that screen readers effectively communicate all essential information...

Read more »

Why web accessibility is more art than science

No matter the audience or the industry, every web development project has to balance design with functionality, resources with requirements, and wants...

Read more »

Comments

blog comments powered by Disqus

Hi, we're Mugo Web - Nice to meet you!

We're a group of web experts who solve complex web problems.

Learn more about us »

Search


Categories


Yes - we can do that.

Many years of experience with complex websites allows us to offer total solutions.

Learn more about what we can do »

We love our clients (and they love us too)

We've solved problems across North America and around the world.

Learn more about what we've done »

We tweet too

Follow us on Twitter for the latest Mugo happenings

mugo twitter page @mugo

© 2008 - 2017 Mugo Web. All rights reserved.