Headings and web page accessibility

• Overview
• General guidelines
• Affected audiences
• Evaluate headings
  • What to check
  • How to check

---

Overview

Headings play an important role in web page accessibility. They provide structure and organization to the content. By using proper heading tags and following a logical hierarchy, it improves the accessibility and usability of your website for all users.

General guidelines

Heading levels should follow a clean, deliberate hierarchy. The heading hierarchy should be similar to an outline or table of contents for the web page.

Heading level 1 <h1>
Heading level 2 <h2>
Heading level 3 <h3>
Heading Level 2 <h2>
Heading Level 3 <h3>
Heading Level 4 <h4>
Heading Level 2 <h2>

Affected audiences

A hierarchical heading structure is important for everyone because it helps to organize content in a clear and logical way. By using headings to break up text into sections, readers can easily scan the page and find the information they need.

Evaluate headings

What to check

• A page should have at least one heading.
• All text used as headings should be marked up as headings.
• Make sure the headings are dividing the page content into logical chunks.
• The heading hierarchy is meaningful. It is important to maintain a logical and consistent hierarchy throughout the page.
• Avoid multiple <h1> headings, because they may cause confusion.
• Avoid skipping headings or creating empty headings.

How to check

To check headings, you will either need to examine the web page's source code, or use a tool or web service. If your web page is public, you may use one of the web services mentioned below. For a page behind IU Login authentication, you may either install and use the WAVE browser extension, or check headings manually.

Check headings manually

Checking the headings by examining the page's source code is tedious, but important.

1. View the source code of the web page.
2. Identify the visual "heading" elements.
3. Check that all visual "heading" elements use an <h> tag (<h1> to <h6>).
4. Verify that all sub-heading elements have a higher number.
5. Identify all <h> tags in the source code.
6. Verify that the elements should be structural headings.

Check headings using a web service

If your page is fully public, you can use a web service to check your headings.

Check headings outline

1. In any browser, open the W3C Nu HTML Validator (Nu Html Checker).
2. Verify that "Check by" is set to Address.
3. In the "Address" field, enter the URL (for example, https://www.w3.org/).
4. Select Outline.
5. Select Check. The results page appears.
6. Scroll to the bottom to see the "Heading-level outline".

   Non-visual checks:

   • Is anything there? If nothing appears in the "Heading-level outline", there are no headings marked up on the page.
   • Are any heading levels skipped? The <h> tags for these will be red and followed by the text "[missing]".
   • Does the outline start with <h1> and follow a deliberate hierarchy?

   Visual checks:

   • Compare the "Heading-level outline" to the visual rendering of the page.
   • Are the elements that look like headings on the page listed in the "Heading-level outline"?
   • Are there elements in the "Heading-level outline" that aren't really headings?

Check headings markup in the page

1. Open the WAVE web accessibility evaluation tool.
2. In the "Web page address" box, enter the website address.
3. Select WAVE this page!. Your web page will display with several icons on it.
4. Review the icons. All functional headings will be marked with a heading icon (<h1>, <h2>, <h3>, etc.); the heading icon won't appear for elements that are not functional headings.
5. In the WAVE panel, choose OUTLINE to see the heading structure and the text of the headings.