According to WebAIM’s screen reader survey, most screen reader users prefer to navigate web pages and documents by headings, meaning it’s important to style them correctly. Although bolded, all-caps text can mimic a heading, it doesn’t include the markup necessary for screen readers to recognize it as such. The same is true for colored and italicized text.
Headings should instead follow a logical semantic structure as if you’re constructing an outline:
- <H1> Main heading – usually reserved for page titles <H1>
- <H2> Subheading – identifies sections </H2>
- <H3> Subheading – identifies subsections </H3>
This format ensures that screen readers will read the page in order, calling out key organizational elements, and it allows users to explore the page via keyboard commands (e.g., “H” to jump from heading-to-heading). Remember, headings should be used in proper order whenever possible. There should never be an H2 heading without an H1 parent. NOTE: In WordPress sites created by eTech, the page title is H1, so the first level of headings on the page should be H2.
Watch SS Bart’s helpful web headings video to learn more about headings and how they enable users to navigate sites with simple keystrokes.
This resource is part of the Teaching Hub’s Accessibility Guide. For detailed information about accessibility at UA, visit accessibility.ua.edu.