Ensure All Skip Links Have a Focusable Target

An HTML page must have a link at the top before the navigation that allows users to skip lengthy navigation and proceed to a page’s main content.

Why It Matters

Screen readers announce content sequentially as it appears in an HTML file. Assistive technology will focus on the content at the top of the page first, which is often lengthy. This can be time-consuming for users who are only interested in the main content. Including a skip link in an HTML page aids blind users, people with low vision, and mouse-only users.

Fixing the Issue

Developers should ensure that all skip links on a web page have a focusable target that allows users to skip the navigation.

Place the skip navigation link at the top of the page right after the opening body tag.

Good Code Example

Use the following markup to add a skip link:

Code example

<div id="skip">
<a href="courses/html-css/navigation/skip-navigation#content">Skip Content</a>
</div>

Copy

Unfortunately, WebKit-based browsers such as Safari and Chrome have a bug that prevents same-page links from working as they should. You can create a workaround for these browsers using Javascript.

If you decide to hide the skip-link, don’t hide it using any of these CSS options:

Use CSS to permanently position the link off screen.
Set display: none.
Set visibility: invisible

Hiding the skip-link with CSS works fine for screen reader users, but this removes access to the link for sighted users who benefit from the skip link. Setting either display: none; or visibility: invisible; properties make the link inaccessible to everyone. The following two accessible approaches to deal with skip links are best practices:

Make the “skip navigation” link permanently visible
Use CSS to hide the link off screen until it receives keyboard focus to make it visible to all users.

To implement the CSS approach best practice to the markup above, include the following CSS code: