accessibility-guidelines

This document is in beta. Help us by reporting issues via Github or email

Back to the overview page

Skip to main content

On this page:


Summary

Give keyboard and screen reader users a way to go directly to the page’s main content. [Web only]

When content (like a header with navigation links) is repeated at the top of several pages, keyboard users should be able to bypass it and move the keyboard focus directly to the start of the main content area of the page.


Requirements (Web only)

Common mistakes

Why?

This ensures that people who do not use a mouse can quickly and easily reach the primary content of the page.

Official wording in the Web Content Accessibility Guidelines

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

This applies to native apps by replacing “Web pages” with “screens”.

See the W3C’s detailed explanation of this guideline with techniques and examples.


Guidance for Design

Examples


Guidance for Web

Basic example of a “Skip to main content” link

<body>
  <a href="#main">Skip to main content</a>

  <!-- header and navigation go here -->

  <main id="main">
    <h1>Main heading on the page</h1>

    <p>This is the first paragraph of content on the page</p>

    <!-- ... -->
  </main>

  <!-- ... -->
</body>

More guidance for Web


More info

Sources

Contribute

This document is in beta. Help us by reporting issues via Github or email