Heading Order
Minor - WCAG LEVEL AAA
The issue with heading order arises when HTML headings (h1 to h6) are not used in a semantically correct sequence. Headings should form a logical and hierarchical structure to represent the content's organization. For example, an h2 should follow an h1, and an h3 should follow an h2, and so on. Skipping levels (e.g., jumping from an h1 to an h3) can confuse users of assistive technologies like screen readers, which rely on this hierarchy to navigate and understand the content structure.
This matters because users with disabilities, such as those who are blind or have cognitive impairments, depend on a well-structured heading hierarchy to comprehend the document's flow and organization. Screen readers provide shortcuts to navigate through headings, and a logical order ensures users can predictably move through sections of content.
To fix heading order issues:
Review your HTML to ensure that headings are used in a nested, hierarchical manner.
Start with an h1 for the main page title, followed by h2 for main sections, h3 for subsections, and so on.
Avoid skipping levels without a logical reason.
Best practices:
Use CSS for styling rather than choosing heading levels based on their default sizes.
Always choose headings based on the content structure, not appearance.
Ensure that headings are used for structuring content, not for styling purposes alone.
Common mistakes:
Using headings for styling rather than structure
Skipping heading levels without a clear reason
Using multiple h1 tags on a single page when not part of a sectioning element like an article or section.