Heading
Referred HTML Tags
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Essential A11y Requirements
Context
The role of heading tags in the context of accessibility is to act as the page's table of contents. Headings communicate the organization of the content on the page. Web browsers and assistive technologies can use them to provide in-page navigation.
Traditionally, the headings on the page are ordered so that the level one heading (e.g., <h1>) is the title of the whole page. Next, headings from level two (<h2>) are for the main content sections of the page. The level three headings mark each section's content distribution and so on according to the page content and UI design.
However, the primary objective is to have a clear and consistent logical headings system that faithfully describes the content. Any use of headings that meet these essentials may work.
It is important to note that a heading level is not supposed to imply the importance of the content below it but its hierarchy in the page content's layout. Therefore, the guiding factor in assigning the headings on the page should be the layout of the UI.
To maintain a stable headings system:
- You can adjust the appearance of any heading by CSS. Avoid using a specific heading level just because it is suitable for the design. Make sure that the heading level reflects its place in the content hierarchy.
- Avoid skipping headings levels. For the headings' structure to be explicit and distinct, and for assistive technology users to use it for in-page navigation, the levels of headings of each section must be consecutive in ascending order.
Color contrast
The WCAG's AA conformance level requires that the color contrast ratio of texts and their backgrounds is at least 4.5:1 Where the font size is larger than 24 CSS pixels (e.g., font-size: 24px), or where the text is bold and larger than 18.5 CSS pixels, a contrast ratio of 3:1 is sufficient. Learn more about color contrast here, or test your contrast ratios using the WCAG Contrast Checker.
Accessible name
It's only natural that headings elements will contain a text node within them. It produces an accessible name in itself. When a heading tag doesn't include a text node (where, for example, there is an icon instead), the author must provide an alternative, like using one of the WAI-ARIA labeling attributes (e.g., aria-label, aria-labelledby).
Learn more about accessible names here
Equivalent WAI-ARIA Role
Required properties/attributes/context
- Ensure that the element has an accessible name
- Each heading element must have an
aria-levelattribute that accepts a number between 1-6. If anaria-levelis not set, the element will be registered to the accessibility tree as a heading level 2.