headings
GUIDELINES: 2.4.6, 2.4.10
Overview
Headings are used to organize a page visually and structurally. The order and ranking of headings should be acknowledged, as they play a role in the importance of content. This guideline goes over how to create a page with this in mind, as well as gives insights on how, when. and why you would want to ensure your heading ranks are proper.
Who is impacted?
Users who use screen readers are primarily impacted by heading structure. Those with cognitive disabilities can also be impacted.
How to test?
Use an HTML validator. Input code, and it will show an error if heading structure is improper, as well as other possible errors. Authors can also manually check headings.
Resources
Heading Ranks
Headings should be displayed in order of their ranks. This means that the most important heading rank is 1 (h1), and the lowest rank is 6 (h6). There should never be a lower rank placed above a higher rank, and there should only ever be a single h1 per page. Authors should also avoid skipping any heading ranks whenever possible to avoid confusion.
Headings that hold an equal rank, or a higher rank, should start a new section completely, while headings with lower ranks start new subsections nested inside a higher rank.
Page Organization
Visually, the higher ranked headings are presented as larger and more bolded than the lower ranked ones. For screen readers, the higher ranked headings are always the ones listed first.
Whenever a page is separated into sections, headings should be used to allow users to understand where they start or end. This means that it is important to use these headers properly when conveying content to the users. Having larger text helps guide the users, so they know how to follow content, while meaningful heading text allows screen readers to understand as well.