Bypass Blocks

This information relates to criterion 2.4.1 bypass blocks, which states:

A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.

If you want to see a bypass block in action, go back to the WCAG page, or any other main page in this website. As soon as the page loads, hit the TAB key. At the top of the page, a bar will appear, containing a link called 'Skip to main content.' If you press ENTER, you will move past the navigation menu and into the main content. You could also try this on other websites, such as the BBC Opens in new window or Euan's Guide Opens in new window.

You may notice that the skip link on Euan's Guide is not hidden. That is fine. It doesn't have to be hidden. This particular site is mostly used by disabled people, so it is better to have it visible all the time. Most websites choose to hide it though, which is also fine.

How do I create a bypass block?

1. Create landmarks

Landmarks are named regions on the page. They are used by screen readers to help blind people navigate, so they relate to other criteria too. For the purposes of creating a bypass block though, you should have a <main> region. The usual landmarks are:

  1. <header>
  2. <nav>
  3. <main>
  4. <footer>

The main region will need an id attribute adding, so that it can be used as a bookmark for the skip link. For simplicity's sake, I used the following:

<main id="main">

2. Create the skip link in the html

Once you have a main landmark coded with a bookmark, you can create the skip link. This should be in the <header> region of the page. It should be coded as follows:

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

The class="skip" attribute is there to enable the next step. It identifies this particular link as being different from normal links on the page, so that it can be styled differently.

3. Style the skip link with css

The css code might be in a separate linked style sheet, or in the <head> section of the html. In rare cases, it might be included as a style="" attribute of a particular html tag. I have a separate style sheet and within it, I have included the following css for the skip link. The first bit determines how the link looks most of the time, i.e. when it is hidden. The focus part is for when it is the active element, or when a user has tabbed to it.

.skip {
    background-color: #ffffff;
    box-sizing: border-box;
    color: #004080;
    font-family: Calibri, sans-serif;
    display: block;
    height: 0;
    left: 0;
    line-height: 50px;
    overflow: hidden;
    padding-top: 0;
    position: fixed;
    text-align: center;
    top: 0;
    -webkit-transition: box-shadow .3s,height .3s,padding-top .3s; 
    transition: box-shadow .3s,height .3s,padding-top .3s;
    width: 100%;
    z-index: 900;
}

.skip:focus {
    font-weight: bold;
    height: 50px;
    left: 0;
}

The parts you might want to change are the text colour, font-family and background-color. The brown background on mine comes from the general focus css for all links, which is brown. The focus css here, is only where it differs from the normal link css.

Clicky