< Back to Guides | Learn more at PaulJAdam.com >

Headings - Accessibility Quick Guide

Heading elements are used to structure and organize a document. Screen readers provide quick navigation commands to quickly list out and jump between all the headings on a page. See headings demo for more on navigating headings via screen reader.

Guidance

1. The first heading on a page should be an H1.
2. H1 should start the main content area.
3. Each section and sub-section of the page should have a heading that is one level below its parent heading. e.g. the title of a page is the H1, the sections of the page are H2, and sub-sections of those sections are H3 elements.
4. Headings must not skip levels, i.e. never use H1 > H3, must be H1 > H2.
5. Organize headings like a document outline. Never choose a heading level based on the size desired, i.e. don't pick H6 just for a small heading, instead pick the correct heading level and style with CSS.
6. If there is bold/strong text above a sub-section of content then it should probably be a heading.