Accessible heading guidelines
- Use "real" headings.
- Use headings to organize and make content scannable.
- Don't skip heading levels.
- Headings in Canvas
Headings are about logical structure, not visual effects. Consider these two lists. In the first, the six items appear to be cities. In the second, the six items appear to be two states with two cities under them. Headings help organize content into groups of related ideas—and reveal relationships between those groups.
HTML headings convey meaning, but only if the text is properly marked up:
- Don't just make a heading bold and larger (it may look like a heading, but it has no meaning). Use the heading styles in your rich-text editor, or mark them up with proper HTML.
- Don't use headings based solely on their visual appearance or size (instead, use the correct heading level and alter the look of headings with rich-text-editor options or in the CSS).
Why? Screen readers can generate browsable lists of headings with a single keystroke, providing users who are blind with a mental picture of the page and helping them find content quickly. Additionally, automated search and analysis engines use heading information to construct an index of a page's contents.
For sighted users, headings are also important. Large blocks of text without headings appear dense and daunting, particularly online. Many users simply skip over them. Headings organize content and make text much more approachable.
There are six levels of headings in HTML: H1-H6. Every page should have one (and only one) H1—the title. The remaining headings (H2-H6) are used to organize content and should be hierarchical—that is, H2 headings are the second most important heading, while H3 headings are subsets of H2 headings, etc.
An example of properly nested headings:
<h1>Title of the Page</h1>
To create a heading in Canvas, don't just make the text bold and larger. Instead, highlight the text you want to make a heading, and select the appropriate heading level from the Paragraph dropdown in the rich content editor.
This adds underlying markup that makes headings available to screen readers and other assistive technologies.
Relevant W3C WAI documents
- WCAG 2.1 Guideline 1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
- How to Meet WCAG 2.1 Guideline 1.3.1
- WCAG 2.1 Guideline 2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.
- How to Meet WCAG 2.1 Guideline 2.4.1
- WCAG 2.1 Guideline 2.4.6 Headings and Labels: Headings and labels describe topic or purpose.
- How to Meet WCAG 2.1 Guideline 2.4.6