SFCG

Lesson 8: Heading Structure

Learn how to review web page headings using the W3C HTML Validator.

Background

For our next high-level accessibility improvement, we're discussing headings (HTML heading elements). Correctly implementing headings requires thoughtful, intentional balance.

A page having too many might indicate the need for breaking up content into multiple pages. Not having enough, or not having any, removes the primary way screen readers users navigate web pages and makes content harder to understand.

5-minute action steps

  1. Go to https://validator.w3.org/nu in your browser
  2. Locate the "outline" checkbox input
  3. Make sure it is checked on
  4. Locate the "Check by" select input
  5. Select "address" from the select input
  6. In the URL input that follows, enter the page URL you want to check
  7. Hit the ENTER key or the "Check" button located after the URL input
  8. Wait for the checker to complete
  9. In the "Message Filtering" section of the page, hide all errors, warnings, and info messages
  10. Scroll down to the "Outline" section of the page
  11. Make note of the outline detected

Analyzing the results

Reminder: Do this process one page at a time. You don't have to fix every heading all in one movement. Start small, make a plan, and commit to it.

Some aspects of reviewing headings can be automated but I wouldn't personally recommend it here since a manual review is required anyways. Here's a list of things to check for:

  • Is there only one h1?
  • Do all headings have text in them?
  • Is the text in each heading accurate?
  • Are any headings skipped? (e.g. jumps from h1 to h3, h2 to h4)?
  • Does the overall outline helpfully section the content?

Share your results

The end goal of this exercise is to resolve the issues you've found. Tracking them in your project management system is a huge step toward that goal. Sometimes we can't fix accessibility issues immediately, but we can always chip away at them over time.

Share the results you've noted today with the person or team responsible for fixing these kinds of issues. You might start the conversation with, "I'm learning to review web page headings, and these are some of my results."