DEV Community

Cover image for A11y tips: use headings and use them well
Carlos Espada
Carlos Espada

Posted on

A11y tips: use headings and use them well

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.

Discussion (0)