Headings and web page accessibility
Expectation
Heading levels should follow a clean, deliberate hierarchy:
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>
The heading hierarchy should be similar to an outline or table of contents for the web page.
Affected audiences
A clean, hierarchical heading structure is important for everyone.
Evaluate headings
What to check
- The page has a heading. Almost all pages should have at least one heading.
- All text that looks like a heading is actually marked up as a heading.
- All text that is marked up as a heading is really a conceptual section heading, dividing the page content into logical chunks.
- The heading hierarchy is meaningful. The page ideally starts with an
<h1>
heading (which is usually similar to the page title) and does not skip levels; however, these are not absolute requirements. - Multiple
<h1>
headings on a page are valid, but they may cause confusion and should probably be avoided. - Avoid skipping headings or creating empty headings.
How to check
To check your 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 thorough.
- View the source code of the web page.
- Identify the visual "heading" elements.
- Check that all visual "heading" elements use an
<h>
tag (<h1>
to<h6>
). - Verify that all sub-heading elements have a higher number.
- Identify all
<h>
tags in the source code. - 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
- In any browser, open the W3C Nu HTML Validator (Nu Html Checker).
- Verify that "Check by" is set to .
- In the "Address" field, enter the URL (for example,
https://www.w3.org/
). - Select .
- Select . The results page appears.
- 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
- Open the WAVE web accessibility evaluation tool.
- In the "Web page address" box, enter the website address.
- Select . Your web page will display with several icons on it.
- 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. - In the WAVE panel, choose to see the heading structure and the text of the headings.
This is document arza in the Knowledge Base.
Last modified on 2023-10-04 10:59:09.