Skip Links and Accessibility

Introduction: Skip Links allow better accessibility for key board devices where the user may not be able to use the mouse due to a disability. Skip Links allow user to skip repetitive navigation and go the the relevant content. In absence of Skip Links, the user would have to tab through several unnecessary navigation links.

Steps to implement Skip Links: We need 2 main steps to implement skip links. These are:

1. Have a skip link near the top of the page, ideally before the navigation. The skip link is a regular<a href> anchor that points to a div later in the page that has the relevant content.
2. Hide the skip link via css, show it only when the focus is on it, — usually when the page is opened.

Let us look at skip links with an actual example.

When the user tabs after the page opens, the user sees “Skip to main content” link. Pressing Enter key here takes the user to the main section of “Loren Ipsun…”. So the user can skip the navigation links.

Once the user tabs again the “Skip to main content” link disappears.

Let us look at the code behind this.

Above, the skip link is shown on lines 11 to 13. If a user were on this link and press the “Enter” key, the focus would go to the main div on line 27.

This skip link has go to be hidden when the focus is elsewhere on navigation links. This is done by CSS below non lines 6–9, where the top is outside the page at -100 px. When user tabs and reaches the skip link, then the top changes to 0px and the skip link is seen on the screen.

Conclusion: Skip Links allow keyboard users to directly go to the relevant section of the page and are considered to be a good accessibility practice. There are users who have motor challenges and are not able to use mouse. Skip links benefit such users as they can directly go to a specific section of the page with fewer tabs.