42. No option to skip repeated content

2.4.1

skip content incorrect example

Description: A means of bypassing blocks of content that are repeated on multiple web pages must be provided.

Context: Manually maneuvering through content takes significantly longer on assistive devices, by providing a way to skip directly to relevant content browsing becomes significantly faster. While this link should be present and visible, it can be positioned off-screen to hide it from any user that isn’t using keyboard navigation, and then moved into the screen upon focus.

<header id="header">
     <!--Content-->
</header>
<div id="main-home" class="row">
    <!--Content-->
</div>

How to fix it: One of the ways to ensure this is to have a link at the top of each page that goes directly to the main content area. (The link should be the first focusable control on the web page and be visible when it receives focus). Such a link is not present on the page. If you have not ensured this by providing this type of links or by other means, this criterion is failed. Another way of ensuring conformance is to provide a heading for each block of content that are repeated on multiple web pages.

<a class="skip-main" href="#main-home">Skip to main content</a>
<header id="header">
    <!--Content-->
</header>
<div id="main-home" class="row">
    <!--Content-->
</div>
a.skip-main {
  left:-999px;
  position:absolute;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
  z-index:-999;
}
a.skip-main:focus, a.skip-main:active {
  color: #fff;
  background-color:#000;
  left: auto;
  top: auto;
  width: 30%;
  height: auto;
  overflow:auto;
  margin: 10px 35%;
  padding:5px;
  border-radius: 15px;
  border:4px solid yellow;
  text-align:center;
  font-size:1.2em;
  z-index:999;
}

Techniques: G1