Accessibility for Developers

Add skip links so keyboard users can easily go straight to the main content, avoiding having to tab through all of the navigation or header area.

When sites implement skip links you can load up a page, and hopefully press tab only once or twice before you see a button appear that lets you ‘skip to content’. Clicking enter to open that link will mean you can skip tabbing through all of the header and navigation items.

This benefits users who use keyboard input, screen readers or other assistive technologies.

How to add a skip link

There are three main parts - the button itself, the CSS to hide it by default (but show it once tabbed (focused) to), and an anchor for the main content.

Adding the button

Add a button near the top of the HTML. Note there is no standard way to do this (so you can change the class from .skip-link, or change the href from #maincontent to whatever anchor you want.

<a class="skip-link" href="#maincontent">
    Skip to main content
</a>

Add CSS to hide the button by default, but show it when it is focused

Here is some sample css that you apply to hide the skip link button by default, but once it is focused it will appear on the page.

.skip-link {
    clip: rect(1px, 1px, 1px, 1px);
    display: block;
    height: 1px;
    left: 100px;
    overflow: hidden;
    position: absolute;
    width: 1px;
    z-index: 9999;
}

.skip-link:focus {
    clip: auto;
    height: auto;
    overflow: visible;
    width: auto;
}

Add the maincontent anchor

This can be any anchor you want - just make sure you link to it on the button

<main id="maincontent"> (your content here) </main>

WCAG

Success Criterion 2.4.1: Bypass Blocks

https://www.w3.org/WAI/WCAG21/Understanding/bypass-blocks.html

Success Criterion 2.4.1 Bypass Blocks (Level A): A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.