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
<h1>.
If you want to see your header structure in a comfortable way, there are extensions for Chrome and Firefox that are very useful.
Top comments (0)