The Web Content Accessibility Guidelines (WCAG) require a way for users to "bypass blocks" of repeated content. This is typically achieved with the use of a "skip" link. Often presented as "skip to content" or "skip to main content," a skip link allows users to skip navigation links, sets of links repeated on every page, or lengthy sets of links even if they're only on one page. So why would someone want to use a skip link and how does it work?
Well-designed, accessible websites use consistently-placed and consistently-labeled navigation mechanisms, like the main menu at the top of a page or the along left-side region, for example. This is because consistency in design and layout makes for a more predicable and more usable experience — people know how to get around and how to get back. This also means, however, that websites commonly feature a lot of redundancy.
Site visitors who are sighted and navigate with a mouse can usually ignore or quickly skip over content that is repeated throughout the site to focus their attention on the unique or main content of a particular page. Keyboard users, screen reader users, and other assistive technology users typically navigate a web page in what might be considered a more manual or methodical approach. For example, if someone uses a keyboard only, they would have to work their way through all of the repeated content (navigation links and elements) to get through to the main content. Tabbing takes users through one active element at a time. If those elements are the same on every page and someone really just wants to get to the main purpose of the page, they're still forced to work through all repeated elements first. That is, without a skip link.
When a functional skip link is provided, users can skip over, or "bypass" the repeated blocks of content.
The skip link can be thought of as an anchor link that once activated, it moves the users past the navigation and into the unique content that the skip link's HREF points to. To get this right, there are a couple important considerations to keep in mind:
- Skip links must change the actual focus, not just the apparent, visual focus. This is because it isn't enough for the page to look like it has moved past the blocks; it needs to be functional. When a user goes to continue navigating, they can't be taken back to where they started, effectively defeating the purpose of the bypass.
- Skip links must be presented visually when they receive keyboard focus. Although commonly cited as an accessibility requirement for screen reader users, skip links absolutely have to work for users with sight who are using a keyboard, keyboard emulator, or other input or navigation device. Therefore, someone has to know it's there and that they're currently selecting it.
In fact, screen reader users have other ways to navigate a page and move past content. They'll commonly navigate by headings, for example. Keyboard users who are not using a screen reader don't have access to those same quick keys and controls, so the ability to bypass blocks is very important.
Where the skip link is placed is just as important as anything else. For main navigation and other top-level menus, it needs to appear before the repeated elements in order to be effective. This means that in most web designs, the skip link will usually need to be the first element a user can reach by keyboard.
While WCAG requires skip links for repeated content, they can also be very useful in other places where it would be confusing, cumbersome, or annoying to force a user to manually move through a lot of links if they don't want to. For example, maybe a web page presents a hyperlinked list of all 50 states or all the letters of the alphabet, or anything else that would require a lot of tab stops to move through, it can be a good practice to add skip links before those blocks as well.
Even if the content is not repeated on multiple web pages, it can be made more usable with thoughtful incorporation of skip links. In these examples, a link might say "Skip over states" or "Skip over alphabet links," a feature many may appreciate that would not detract from the design or usability for anyone else at all.
Was this content helpful?
Subscribe to our blog and newsletter.
