Headers 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 headers 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.
- Use descriptive words for your headers
- Headers become more specific as you descend in header order (H1 - H6)
- Headers 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 headers for text formatting or styling
- Never use empty headers to create space on your web page
- Do not skip header levels
- Do not use large font sizes for regular text
- Screen readers may mistake large font for a header
Types of Header 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.
Header 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 header level back to a H2 because you are now announcing new content to the user.
University web developers created scripts that automate header levels in Gato web pages. Gato's smart header functionality will adjust header levels in rich text editors if an editor creates a non-compliant header structure on their web page. This automation applies to all header misalignment and helps you keep your site in compliance.
Gato Header Levels
- Header 1: Page Title
- Header 2: Black Solid Title
- Header 3: Smaller title with gold font
- Header 4: Smaller title with bold, black font
Using Header Levels in Gato
Sections in Gato can be given a title. If a title is used for a section, it will be a heading level 2 (H2). If you are using the Text and Image content type, headers that follow this optional section title will be automatically adjusted to the appropriate heading level.
Section titles also help facilitate better content structure for both sighted and visually impaired users, by providing intuitive page structure with visual page transitions.
Text and Image
The Text and Image content type also allows an editor to give an optional title. If a title is entered, the header will auto-adjust to an appropriate header level based on the preceding header level on the page. This automation occurs using Gato's smart header functionality.
Rich Editor Titles
In the styles drop-down, the selections correspond to the following header levels:
- Header 2: Title
- Header 3: Subtitle
- Header 4: Subsubtitle
Using these header options will help you keep your page organized for all site visitors.
The title, subtitle, & subsubtitle should not be used to format text, these should only be used to specify header structure on the page.
Common Misuses of Header Levels
Formatting Text Using Headers
It is a common error that web editors use headers to format text because they have special styling that increases font size and the boldness of the text. Never use header/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 Header Levels
Skipping header levels should be avoided (e.g. H1 directly to H3). People using screen readers often rely on headers 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 header. Avoid using large font sizes on text that is not a header.
Using Empty Headers to Create Space between Content
Some editors use headers 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.
Egbert, E., Abou-Zahra, S. (2017, April 27). Headings. Retrieved from https://www.w3.org/WAI/tutorials/page-structure/headings/
Bailey, E. W. (2018, April 16). <h1>–<h6>: The HTML Section Heading elements. Retrieved from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
Ali, A. (2017, August 14). How to structure headings for web accessibility. Retrieved from https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility