2. Use Headings to Create Structure (this is an H2)
Headings allow readers to browse content by topical groups, and provides context for users working through lengthy content. Users are much more likely to discover topics of interest if they are marked with a heading.
This structure is especially important for screen reader users. The majority of screen reader users say skimming for headings is the first thing they do when they open a Web page.
If "normal" text is only formatted to look like a heading, e.g., by making it bold, it will not appear in this list, making it much less likely screen reader users will notice the content exists.
The numbers are meaningful: they indicate how "indented" each heading should be when the devices organizes them into a navigable list. Here is the actual outline for this page, with the numbers made visible as indents:
- H1 (article title): Headings
- H2: Use headings to create structure
- H3: Best practices
- H2: Common mistakes
- ...
- ...
- H5: Broken hierarchy
- ...
- ...
- H2: Good page structure
- H3: Real headings
- H3: Maintaining hierarchy
- H4: A nested section
- H4: Another nested section
- H5: A nested section of the above nested section
- H2: Testing for Accessibility
- H3: Test
- H3: Exceptions
- H3: Applicable WCAG Success Criteria
- H3: Resources
- H2: Use headings to create structure
Best Practices (this is an H3)
- Format your headings as "real" headings using the tools provided by your text editor
- Do not skip heading level numbers! If a user hears "Heading Level 4" and wants some context, they are going to go looking for the previous H3, and may think the parent heading is actually an H2 or H1.
- Do not use manual formatting (bold, font size overrides) to create "fake" headings