Skip to main content link

Rule ID Bypass 1
Definition Provide a keyboard-supported means of bypassing blocks of content, such as navigation menus and page headers, to get to the main content of the page.
Purpose
  • Most pages of websites typically have navigation menus, page headers and other repeated content before the main content of the page.
  • For keyboard-only and screen reader users, a link or other means of skipping these types of content blocks makes it easy to go directly to the main content of the page, without first having to tab through the repeated content.
Required No for HTML4 Legacy Techniques ruleset mapping
WCAG Success Criteria

2.4.1 Bypass Blocks (Level A, Primary Success Criterion)

Rule Category Keyboard Support
Scope Page
Target Resources a and a[button]
  • a
Techniques
  • Make the first link on the page an internal link that references a valid target element at the beginning of the main content of the page.
  • The id attribute is preferred method to identify the target element for the "Skip to main content" link.
  • To make any target element focusable, add tabindex="-1" to the element. If the target is an a element, adding tabindex="-1" will remove it from the tab order.
  • If you use an h1[id="main"] element as the target of the "Skip to main content" link, most screen readers will read the heading level and content when the user activates the skip to link.
  • Use the "SkipTo" script, main and navigation landmarks and headings (H1-H2) to enable keyboard navigation from the "SkipTo" menu to all major sections of a page, including main content.
  • The name attribute can be used if the target is an a element and is focusable (e.g. tabindex or non-empty href value), but this technique is discouraged, since the name attribute is being deprecated in HTML5.
Manual Checks
  • Using only the keyboard, use the link or "SkipTo" menu to move focus to the main content of the page.
  • After moving focus to the main content, the next tab should move you to the first link, form control or other interactive element after the main content.
Informational Links