Accessible Headings and Page Structure

Why structure matters beyond looks

Sighted readers glance at a page and pick up its shape from size, spacing and weight. A person using a screen reader cannot do that, so they rely on the structure coded into the page. Most screen readers can list every heading on a page or jump to the next one with a single keypress. When headings are present and well ordered, that list works like a table of contents. When they are missing or scrambled, the page becomes a long, unlabeled stream of text.

Good heading structure also helps people who use voice control, people who zoom in heavily and only see a small part of the page at a time, and readers who simply skim. Search engines use headings as hints about topics as well, though accessibility is reason enough to get them right.

Real headings versus styled text

A common mistake is making a line of text look like a heading by making it bold or larger. To a screen reader it is still an ordinary paragraph. A real heading is marked up as a heading in the page itself. Most editors and publishing systems offer a paragraph style or a menu with options such as Heading 2 or Heading 3. Use those instead of manual formatting.

The reverse mistake also happens. Some writers choose a heading level because they like how it looks, such as a small heading for a big section. Styling should be handled separately, through the design or theme, while the level should reflect the outline of the content.

How to order headings

Think of your page as an outline.

• One page title. The main title of the page is the top level. Many publishing systems add this automatically from the title field, so check before adding another.
• Major sections come next. Each main topic gets a second-level heading.
• Subsections nest under their parent. A third-level heading belongs inside a second-level section, a fourth inside a third, and so on.
• Do not skip levels. Jumping from a second-level heading straight to a fourth makes a reader wonder whether something is missing.
• Do not go deeper than you need. Most articles work well with just two levels below the title. If you need five levels, the page may be trying to do too much.

A short example of a good outline for a page about a community garden might look like this:

• Community Garden Guide (title)
  • Getting started
    • Choosing a plot
    • What to bring
  • Seasonal care
  • Rules and etiquette

Read the outline on its own. If a stranger could understand what the page covers from the headings alone, the structure is probably working.

Writing headings that make sense out of context

Because assistive technology often presents headings as a list, each one should still make sense when read by itself. “More information” or “Next steps” tells a listener little. “Opening hours and access” or “How to book a plot” is more useful. This is closely related to writing descriptive subheadings for any reader: short, specific and honest about what follows.

Avoid using empty headings, headings that only contain an image with no description, or repeating the same heading text many times without any difference. If several sections need the same label, add a distinguishing word.

Other structural elements

Headings are only one part of structure. A few others deserve attention.

• Lists. Use real bulleted or numbered lists rather than typing dashes by hand, so screen readers can announce “list of five items.”
• Tables. Use tables for data that really has rows and columns, and mark the header cells. Avoid tables for layout.
• Landmarks. Page templates usually define regions such as navigation, main content and footer. These let users skip repeated menus and go straight to the main content. If you choose a template or theme, check that it provides them.
• Paragraphs. Short paragraphs with space between them help everyone, including readers with attention or reading difficulties. White space is part of how a page communicates its shape.

Checking your structure

You can test heading order in a few minutes without special software.

1. Look at your draft and write down every heading and its level.
2. Check that the levels never jump down by more than one step.
3. Read just the list of headings. Does it tell a coherent story?
4. Look for text that looks like a heading but is not marked as one.
5. If you can, use a browser feature or a free checking tool that displays the heading outline, and compare it with your notes. Tools differ in what they show, so treat them as a prompt to look closer rather than a final verdict.

For a deeper check, try a screen reader yourself, or ask someone who uses one regularly. The first time you hear your own page read as a list of headings can be revealing, and it usually leads to small but worthwhile edits.

A note on documents beyond web pages

The same principles apply to word processor files, slide decks and PDFs. In a document, use the built-in heading styles instead of manual formatting. In slides, give each slide a unique, meaningful title. Exported files can lose their structure if the original did not have it, so build it into the source file first.

Keep it simple

Heading structure is one of the cheapest accessibility improvements available. It costs no extra design work, it helps many types of readers, and it keeps your content organized for your own benefit as well. Get into the habit of outlining before drafting, and the structure will tend to take care of itself.