Skip-to links
Skip-to links are a mechanism that is available to bypass blocks of content that are repeated on multiple Web pages. The most common use-case is to allow keyboard-only users to skip over the navigation to get to the main content without needing to tab over the entire menu every time they load the page.
Page Bypass blocks (skip-to link) in-action
Keyboard and screen reader users expect the skip-to link trigger to be the first focusable element in the `<body>` element. When a user hits the Tab key it gives it focus and as a result becomes visible. If the user hits the Enter key while it is focused it will jump to the main content area.
```
<body>
<div id="skip-link">
<a href="#main" class="element-invisible element-focusable">Skip to main content</a>
</div>
<nav>...</nav>
<main id="main">...</main>
...
```
#main id should be an id on the page after the main navigation.
The following CSS will keep the link hidden to mouse uers, and only show it to keyboard-only when they use the Tab key.
```
.element-invisible {
margin: 0;
padding: 0;
width: 1px;
position: absolute !important;
clip: rect(1px 1px 1px 1px);
clip: rect(1px,1px,1px,1px);
overflow: hidden;
height: 1px;
}
.element-invisible.element-focusable:active,
.element-invisible.element-focusable:focus {
position: static !important;
clip: auto;
overflow: visible;
height: auto;
}
```
Landmarks
HTML5 Landmark elements are used to improve the keyboard navigation of the page for assistive technology. By defining the Landmark role of a block of content (for example role="main" for the main content), screen reader users can quickly locate and jump to the section of the page that meets their needs.
The most common landmarks are:
| HTML5 Element | Alternative ARIA role | Purpose |
|---|---|---|
| <header> | role="header" | Wraps around logos and other header content. |
| <nav> | role="navigation" | Wraps the sites navigation elements. |
| <main> | role="main" | Wraps the main content on the site. |
| <aside> | role="complementary" | Wraps related content. |
| <footer> | role="contentinfo" | Wraps informational content below the main area. |
Page with duplicate regions, like having two <nav> elements, require the use of an aria-label to differentiate which navigation it is. Using aria-label="main menu" and aria-label="sub menu" would be good examples.