Headings
Headings on web pages act much like titles in a document. They provide structure and organization for the reader and give clear context about the information being communicated.
Importance for Accessibility
Web browsers, plug-ins, and assistive technologies can use headings to provide in-page navigation on web pages. This navigation allows a screen reader to move forward and backwards on the page without needing to scan every line of text on the page.
Quick Reference
- Use descriptive words for your headings
- Headings become more specific as you descend in heading order (H1 - H6)
- Headings use linear order, but can break this order when you need to create a new section of content
- H1, H2, H3 can reverse to H2 if you are creating a new section of content
- Never use headings for text formatting or styling
- Never use empty headings to create space on your web page
- Do not skip heading levels
- Do not use large font sizes for regular text
- Screen readers may mistake large font for a heading
Heading Levels
Types of Heading Levels
In total, there are six levels of headings you can use to structure sections of content on the page (<h1> through to <h6>).
Heading 1 is the most important and is the heading for the page, this typically corresponds to the title of the page. It gives users an indication of what the page is about - you should have a single Heading 1 on each page. Each heading 2 creates a section of content. They divide pages into consumable sections which help to organize the content.
When you get to the next heading, ask yourself: Is it a new section? If so, then a Heading 2 would be appropriate. If it’s a sub-section of the last heading 2, then a Heading 3 would be suitable. If it’s a sub-section of the last Heading 3, then a Heading 4 would be a good fit, and so on.
Heading Order
Heading level has a linear descending order of importance (H1 - H6). For each section of content, the order should remain linear unless you begin a new section of content. At this point, you can reset your heading level back to a H2 because you are now announcing new content to the user.
Heading Automation
University web developers created scripts that automate header levels in Gato web pages. Gato's smart heading functionality will adjust heading levels in rich text editors if an editor creates a non-compliant heading structure on their web page. This automation applies to all heading misalignment and helps you keep your site in compliance.
Common Misuses of Heading Levels
Formatting Text Using Headings
It is a common error that web editors use headings to format text because they have special styling that increases font size and the boldness of the text. Never use heading/title options in a rich editor to format your text. Instead, use appropriate CSS to style text when your design requires altering the base styling provided by university web designers.
Avoid Skipping Heading Levels
Skipping heading levels should be avoided (e.g. H1 directly to H3). People using screen readers often rely on headings for in-page navigating, so if the structure is not hierarchical they may not understand the relationship of your content areas.
Large Font Sizes
It is possible for screen readers to view regular text that has a large font size as a heading. Avoid using large font sizes on text that is not a heading.
Using Empty Headings to Create Space between Content
Some editors use headings as a way to create space between content blocks. This causes your site to be in violation of compliance codes within WCAG 2.0 AA standards and should be avoided. Use the separator content type or create a new section with correct title instead.