Headings
Table of Contents
Benefits of Headings
Organizing web pages by headings helps users get a sense of the page’s organization and structure. Visually, headings are presented as larger and more distinct than surrounding text. Making texts larger helps guide the eye around the page. Using headings and making them visually apparent is especially helpful for users with cognitive disabilities.
If the underlying code for a pages headings is correct, screen reader users can also benefit from headings. Screen reader users can navigate a page according to its headings, listen to a list of all headings, and skip to a desired heading to begin reading at that point. Screen reader users can use headings to skip the repeated blocks of content like headers, menus, and sidebars, for example.
In 2017, WebAIM asked how screen reader users preferred to find information on lengthy web pages. Almost 70% of respondents said they preferred to use headings on a page. Clearly, organizing pages using headings is one of the best accessibility strategies available.
Using Headings
Headings are ranked <h1> through <h6>. Use headings hierarchically, with the <h1> representing the most important idea on the page, and sub-sections organized with <h2> level headings. Those sub-sections can themselves be divided with <h3> level headings, and so on.
It is best to plan out a heading structure before composing a page. Doing so will help you both select appropriate heading levels and keep your thoughts organized overall.
All pages should at least have a <h1> level heading giving the title of the page.
Do not skip heading levels to be more specific (for example, do not skip from <h2> to <h5>). It is permissible to skip headings in the other direction if the outline of the page calls for it (for example, from <h5> to <h2>).
Do not select heading levels based on their appearance. Select the appropriate heading rank in your hierarchy.
Do not use bold instead of a heading. One of the most common accessibility mistakes is making text bold when a heading is needed. Though the text may look like a heading, the underlying code is not set correctly, and screen reader users will not benefit.
Do not overuse headings. In most cases, content editors will not need more than <h2> rank headings and the occasional <h3> rank. Only for exceptionally long or complex pages would <h5> and <h6> be necessary.
Development Best Practices
Page Sections, Landmarks, and ARIA Labels.
Most content on web pages should be organized into sections. When pages are organized into sections, a heading should be present. Developers may choose to use sectioning elements to indicate these sections. When using a sectioning element, a heading should generally be the first content within the section to act as a label.
Developers and designers should also organize pages into landmarks. According to a 2017 WebAIM survey, more than half of screen reader users use at least sometimes. Some landmarks, such as complementaries, navigations, and regions, should have ARIA labels. If a heading is present, use the aria-labelledby attribute to associate a visual heading with its landmark.
ARIA role=heading
In some cases, such as legacy websites or applications, semantic heading tags may be impossible or unadvisable. In such cases, it may be possible to add ARIA attributes to existing tags in order to change their semantics. To change an element’s default semantics into a heading, use role=heading and an appropriate aria-level. This approach should be seen as a last resort.
Common Heading Idioms
A common question concerns how many <h1> level headings should be on a page. The document title should always be an <h1>. Making the site name in the header and the document title both <h1> elements is becoming less common. Most screen reader users prefer that only the document title be an <h1>.
A common misconception is that the <h1> must be the first heading on the page. It is normal to use headings for repeated blocks of information that occur before the document title, such as menus or sidebars.
For single page applications, browser focus should be set on the <h1> heading after a new view is loaded.
Headings are often improperly used in cases where there are no dedicated semantic HTML elements. Headings should not be used as subheadings, subtitles, alternative titles, taglines, or slogans. In such cases, it is best to use a <p> tag.
It is generally inappropriate to use headings within tables, such as in <th> elements. Tables can be given an accessible name using a <caption> element or by using an ARIA label.