## Navigating content on web pages can be difficult for individuals with disabilities.

When navigating websites, individuals with disabilities often rely on keyboard-only utilities and other assistive technologies. Unfortunately, those technologies often require users to navigate through each link on every page, which can make using the web page cumbersome and slow.

Skip navigation links help fix this issue. The links highlight different sections of content from the same web page, allow users with disabilities to easily locate information and jump directly to what they need.

### Benefits

These measures allow keyboard-only users to skip over repeated sections of content on web pages such as banners and navigation links.

The measures also allow users of assistive technology to skip to specific parts of the page’s content quickly and effectively.

### Examples

#### PayPal's SkipTo plugin

PayPal’s accessibility team offers a lightweight plugin called SkipTo. The plugin works as a skip navigation link and automatically handles many of the potential issues presented by these types of links.

The plugin’s default configuration automatically makes direct jumps to any of the first three headings accessible, as well as the landmarks keyboard.

Hosting the plugin locally is recommended, but it can also be included as a call to the script on gitHub at the bottom of your HTML page. Visit the link above for details.

See the <script> tag on line 11 below:

  <!doctype html>
<html lang="en-US">
<title>Really accessible page - iu.edu</title>
<body>
…
<main role="main" id="mainContent">
…
</main>
</body>
</html>

#### Manual code

Add an <a> element with link text of "Skip to Main Content" as the first HTML element in the <body> section. This link should have an href attribute value with a hash character and the id value of the <main> element or a <div> element containing the main content.

To make the target element able to receive focus, add a tabindex attribute with the value of "-1"

See <a> tag on line 7 and the id and the tabindex attributes on line 9 below:

<!doctype html>
<html lang="en-US">
<body>
…
<main role="main" id="mainContent" tabindex="-1">
…
</main>
</body>
</html>

### Best practices

Please note that the following best practices apply to manual coding:

• Place the skip navigation link as the first interactive element on the page