Components
Heading
Heading is used to structure content and create hierarchy on a page.
We are working to improve the accessibility documentation for this component. If you have questions or see something that should be prioritised, please contact us on Github or Slack.
Correct heading levels
Use headings in the correct order (h1-h6) to create a clear and predictable structure. Many users navigate by skimming the headings, and it is therefore essential that the hierarchy is coherent and provides a logical division of the content. A tidy heading structure also makes it easier for assistive technologies to present the page correctly.
Avoid skipping levels in the hierarchy. Moving from <h2> to <h3> is natural, while jumping from <h2> to <h4> can make it harder to understand how the content is organised.
Be consistent across pages and sections in your solution. If a table of contents uses <h2> in one place, the same structure should apply everywhere. Both the visual style and the semantic HTML should be the same for the corresponding heading level. This helps users build a stable mental model of how the content is organised.