 Rob Dodson [X](https://twitter.com/rob_dodson) [GitHub](https://github.com/robdodson) [Homepage](https://robdodson.me)
Screen readers have commands to quickly jump between headings or to specific
landmark regions. In fact,
[a survey of screen reader users](http://www.heydonworks.com/article/responses-to-the-screen-reader-strategy-survey)
found that they most often navigate an unfamiliar page by exploring the
headings.
By using correct heading and landmark elements, you can dramatically
improve the navigation experience on your site for users of assistive technologies.
## Use headings to outline the page
Use `h1`-`h6` elements to create a *structural* outline for your page. The goal is
to create a skeleton or scaffold of the page such that anyone navigating by
headings can form a mental picture.
A common practice is to use a single `h1` for the primary headline or logo on a
page, `h2` elements to designate major sections, and `h3` elements in supporting
subsections:
```html
Company name
Section Heading
...
Sub-section Heading
```
## Don't skip heading levels
Developers often skip heading levels to use the browser's default styles that
closely match their design. This is considered an anti-pattern because it breaks
the outline model.
Instead of relying on the browser's default font-sizing for headings, use your
own CSS, and don't skip levels.
For example, this site has a section called "IN THE NEWS", followed by two
headlines:
The section heading, "IN THE NEWS", could be an `h2`, and the supporting
headlines could both be `h3` elements.
Because the `font-size` for "IN THE NEWS" is *smaller* than the headline, it may
be tempting to make the headline for the first story an `h2` and to make
"IN THE NEWS" an `h3`. While that may match the browser's default styling,
it would break the outline conveyed to a screen reader user!
Though it may seem counterintuitive, it does not matter if *visually* the
`h3` and `h4` elements are larger than their `h2` or `h1` counterparts.
What matters is the outline conveyed by the elements and elements' ordering.
You can use Lighthouse to check if your page skips any heading levels. Run the
Accessibility audit (**Lighthouse \> Options \> Accessibility** ) and look
for the results of the **Headings don't skip levels** audit.
## Use landmarks to aid navigation
HTML5 elements such as `main`, `nav`, and `aside` act as **landmarks**, or
special regions on the page to which a screen reader can jump.
Use landmark tags to define major sections of your page, instead of relying on
`div`s. Be careful not to go overboard because having *too many* landmarks can be
overwhelming. For example, stick to just one `main` element instead of 3 or
4.
Lighthouse recommends manually auditing your site to check that "HTML5 landmark
elements are used to improve navigation." You can use this [list of landmark
elements](https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/landmarks/HTML5.html)
to check your page.
## Bypass repetitive content with skip links
Many sites contain repetitive navigation in their headers, which can be annoying
to navigate with assistive technology. Use a **skip link** to let users bypass this content.
A skip link is an offscreen anchor that is always the first focusable item in
the DOM. Typically, it contains an in-page link to the main content of the page. Because it is
the first element in the DOM, it only takes a single action from assistive technology to focus
it and bypass repetitive navigation.
```html
Skip to main
...
[Main content]
```
```css
/* style.css */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000000;
color: white;
padding: 8px;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
```
Many popular sites such as [GitHub](https://github.com/), [The NY
Times](https://www.nytimes.com/), and [Wikipedia](https://wikipedia.org/) all
contain skip links. Try visiting them and pressing the `TAB` key on your
keyboard a few times.
Lighthouse can help you check if your page contains a skip link. Run the
Accessibility audit again and look for the results of the **The page contains a
heading, skip link, or landmark region** audit.
> [!NOTE]
> **Note:** Technically, this test will also pass if your site contains any `h1`-`h6` elements or any of the HTML landmark elements. Although the test is vague in its requirements, it's still nice to pass it if you can!