Understanding and Using Headings
Headings create an organizational flow to anything they're used in. There are six headings, 1 through 6, with 1 being the most important and 6 being the least. When looking at headings from an accessibility point of view, headings tell screen readers how to section a page and help users understand the structure of the content before they even start reading it.
Why Headings Matter for Accessibility
Headings are one of the primary ways users of assistive technology navigate a page. Screen reader users often pull up a "list of headings" and jump directly to the section they need instead of reading everything from start to end. Clear and logical heading structure helps:
- Screen reader users scan and navigate content efficiently.
- Users with cognitive disabilities understand how information is organized.
- Keyboard-only users move through sections more predictably.
- Search engines better understand your content hierarchy.
Understanding Heading Levels
Each heading level represents a level of importance and hierarchy in your context:
- Heading 1 (h1): The main title of a page.
- Heading 2 (h2): Major sections on a page.
- Heading 3 (h3): Subsections within an h2.
- Heading 4-6 (h4, h5, h6): Additional layers of detail as needed.
Ultimately, the hierarchy should make sense even if all the regular text disappears and only the headings remain.
Best Practices: One H1 per Page
While modern HTML allows for more than one h1, the best practice for accessibility and clarity is to use:
- One h1 per page to describe the overall purpose of the page
- H2s and below to organize the rest of the content
This helps screen reader users quickly understand what the page is about when they arrive.
Note that, in WordPress, the h1 tag is already used by the page title, so you should avoid adding another h1 in the content editor unless you have a very specific reason to do so.