Structure Content with Headings
Using accessible headings does not mean simply changing the way a piece of text looks — you must use the tools in the content management system (CMS) or other software to apply the appropriate “tags” to text.
Headings in Digital Content
Headings mean something specific when talking about digital content. There are six hierarchical levels of headings (H1, H2, H3, H4, H5 and H6).
Headings are incredibly helpful to organize web content into smaller, more digestible pieces. Strategic headings optimize the reading experience and help readers find the information they are interested in quickly and effectively.
Writing Headings
When writing your content, it is important to use headings to organize your content to make it easier for readers (both sighted and those using assistive technologies) to understand what is being said and skip sections that are irrelevant to them.
The Web Content Accessibility Guidelines (WCAG) outline the importance of using descriptive language for headings. This doesn’t mean they have to be long — just that they should provide context.
When writing headings:
- Clearly demonstrate what a section is about.
- Don’t write clickbait.
- Write headlines to stand alone.
- Help readers skip sections.
Hierarchically Nested Headings
The levels of headings (H1 through H6) have a hierarchical relationship.
Any given page is required to have at least one heading — an H1 — that acts as the “page name.”
Any additional organization of content from that point would be nested underneath H2 headings. If further hierarchy is needed within a section, you would go down to the H3 level and so on and so forth.
It can be helpful to think of headings like a page outline.
Example of Nesting Headings
Incorrectly Nested
- Heading 1
- Heading 3
- Heading 3
- Heading 2
- Heading 3
- Heading 3
Correctly Nested
- Heading 1
- Heading 2
- Heading 3
- Heading 2
- Heading 3
- Heading 3
Practical Tips for Headings
- Make sure every page has at least one heading.
- Avoid duplicate headings on the same page.
- Organize headings hierarchically — don’t skip any levels.
- Treat the headings like your page outline.
- Watch out for empty headings (heading tags with no words inside them), especially in WYSIWYG editors.
Headings in Aggie UX
Using Aggie UX on your websites helps you structure your content hierarchically. Most components include headings that are built with page structure in mind to display the right heading level.
Most components allow for a section or slab intro, where you can set an H2 heading that gives context to the content within the component. The next heading level (like on cards) is an H3 automatically (unless you are opting out of using a section intro, in which case they will be H2 headings).
Some components and templates, such as custom content, allow you to enter free-form content where you can format text as different heading levels and as paragraph text. It is your responsibility to choose the appropriate heading levels based on the page structure, not how it looks on the page.
While we have built hierarchical headings into most components, it is your responsibility to fill them out appropriately. You can learn about the intended use case of each component and its inherent heading structure in the documentation provided on aggieux.tamu.edu.
Use Siteimprove to Find Issues with Headings
Siteimprove can help you find accessibility issues related to headings on your webpages, including:
- Pages with empty headings
- Pages missing a title
- Pages without content after a heading
- Pages where headings aren’t structured
- Pages that don’t start with a level 1 heading
- Pages missing headings
Find and Address Issues with Headings
To see if you have any of these issues on your site:
- Log in to Siteimprove.
- On the left side menu, open Accessibility > Issues.
- On the Issues table, set the filters to Element type: Headings.
- Click on each issue to get more information about how to address the issue and see affected pages.
- Repeat this process on the Potential Issues (Accessibility > Potential Issues) page to review occurrences that need a human to review to see if they are issues.
Almost all heading issues can be addressed by content editors without having to touch code.
Once you have identified the issue, go into your CMS to address the issue and publish your changes.
After the page has been republished with your changes, go back to Siteimprove to rescan that page to see if the issue has been resolved.
Get Access to Siteimprove
All Texas A&M University website owners have the ability to monitor the accessibility (and quality assurance) of their sites using Siteimprove. Use Siteimprove to identify potential issues, learn how to address them and watch your scores over time. If you are responsible for a Texas A&M website, email web@tamu.edu with your name, NetID and the sites you are responsible for to get access.