|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.
- 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.
HTML4 Legacy Techniques
HTML5 and ARIA Techniques
|WCAG Success Criteria
2.4.1 Bypass Blocks (Level A, Primary Success Criterion)
- 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.
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.
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.
- 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.