Skip to Main / Bypass Block

Overview

A Skip to Main/Bypass block allows users to navigate more directly skip repeated items that are on every page and move to the page’s content. These blocks appear when they receive focus with keyboard navigation and otherwise are visually hidden.

Impact

  • Removes repetition for users with mobility impairments, or who utilize keyboard for navigation, to access the main content. This repetition can cause users pain and can take a long time.
  • Screen reader users can avoid hearing repeated content on ever page before accessing main content
  • Screen magnifier users do not have to search repetitive information to access main content each time a new page is loaded

Behavior

  • When used as a Skip to Main, element should be visibly hidden until user navigates to the element (Tab for keyboard, Swipe for mobile when using a screen reader)
  • The link in the block should be activated by the default control for a link – the Enter key for keyboard and Double Tap when using a screen reader on mobile
  • In order for this to take effect all content that should be skipped (usually a menu) needs to be outside of the targeted ID (#main in the below example)

The Code

HTML

<a class="skip-to-main" href="#main">Skip to main content</a>

Add the id that contains the main content, in this example #main, to that element to focus to the correct element.

CSS

a.skip-to-main {
    left:-999px;
    position:absolute;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
    z-index:-999;
    background-color:#CCCCCC;
    font-size:1.2em;
    text-align: center;
    border:1px solid #CCCCCC;
}
a.skip-to-main:focus, a.skip-to-main:active {
    left: auto;
    top: auto;
    width: 30%;
    height: auto;
    overflow:auto;
    margin: 10px 35%;
    padding:5px;
    z-index:999;
}

ARIA

None required or needed to enhance as long as the text in the link describes the action. Generally this is only used for bypass blocks and not skip to main. If needed use an aria-label to describe the action. Example:

<a class="skip-to-main" aria-label="Go to Sidebar" href="#main">Skip to Content</a>

In Action

See the Pen Example Skip to Main / Bypass Block by Joe Baker (@JoeBakera11y) on CodePen.

Relevant WCAG

2.4.1: Bypass Blocks

css.php