More than two-thirds (67.7%) of screen reader users use headings with the primary method to find information, and a vast majority of them (85.7%) find them useful for navigating. That is why it is essential to have a good heading structure in our documents. Here are some tips:
- Use a single
<h1>in the entire document. There always has to be only one and it has to describe the content of the page in the best possible way.
- If you can, place it just before the main content (marked with
<main>), so it will be much more convenient to access it once the
<h1>is found since it will be the next thing that the screen reader will announce.
- Remember that your document does not have to start with an
<h1>, you can start with a lower level as long as there is later an
<h1>located in the place we just explained.
- If the design does not show an element that represents the
<h1>it is not a problem, you can always put it where it is most convenient for screen readers and hide it visually using the CSS Clip technique.
- Use the rest of the levels in a logical way that contributes meaning to the structure of the document. Remember that the levels you use will be those that mark the importance of each content for screen readers.
- Don't skip levels. Make sure that a
<h2>is not followed directly by an
<h4>, for example. It is ok to skip ranks when closing subsections, for instance, a
<h2>beginning a new section, can follow an
<h4>as it closes the previous section.
- Whenever you can, put the content related to the header just below it, for the same reason that we have commented on the