Heading Structure and Alt Text: A Quick Audit

Last updated 2026-08-05

Headings and alt text are the two places where accessibility and SEO are the same job. Both exist so that someone who cannot see your layout, whether that is a screen reader user or a crawler, can still understand what the page contains and how it is organized. Both are quick to audit and quick to fix.

Headings describe structure, not size

One H1 that states what the page is about. It should agree with the title tag without necessarily matching it word for word.
No skipped levels. An H2 followed by an H4 leaves a hole in the outline, and assistive technology reads that hole as a missing section.
Every heading should summarize the section that follows it. If a heading could be deleted without loss, it was decoration.
Never choose a heading level for its font size. That is what CSS is for.
Keep the outline shallow. If you are at H5, the page probably wants to be two pages.

The HTML5 outline algorithm, which would have made multiple H1s safe by nesting them in sections, was never implemented by browsers or assistive technology. Google has said multiple H1s will not break your page, and that is true, but a single H1 remains the clearer and better-supported choice.

<!-- Reads cleanly as an outline -->
<h1>How to audit on-page SEO</h1>
  <h2>What on-page SEO covers</h2>
  <h2>The checklist</h2>
    <h3>1. Confirm the page can be indexed</h3>
    <h3>2. Check the canonical</h3>
  <h2>How often to re-run it</h2>

<!-- Broken: no H1, a skipped level, and a heading used for styling -->
<h2>How to audit on-page SEO</h2>
  <h4>The checklist</h4>
  <h3>Sign up for our newsletter</h3>

Read your outline in ten seconds

In the console, this prints the outline the way a machine sees it, which makes gaps and stray headings obvious:

[...document.querySelectorAll('h1,h2,h3,h4,h5,h6')]
  .forEach(h => console.log('  '.repeat(+h.tagName[1] - 1) + h.tagName, h.textContent.trim()));

Watch for three things: no H1 at all, more than one H1, and headings that belong to navigation or a sidebar appearing in the middle of your content outline. The last one is usually a template problem rather than a writing problem.

Alt text that actually helps

Alt text answers one question: if this image did not load, what would the reader need in its place? That makes it about function and context rather than a description of pixels. The same photograph needs different alt text in an article about architecture than in one about weather.

Image role	Good alt	Why
Meaningful content	`alt="Broken-link results listing each link with its HTTP status code"`	describes what the reader would otherwise miss
Purely decorative	`alt=""`	empty alt tells a screen reader to skip it. Omitting the attribute makes it read the filename instead
Image inside a link	`alt="Download the CSV export"`	the alt is the link text, so it must describe the destination, not the picture
Icon or icon button	`alt="Close"`	name the action. "X icon" describes the glyph and helps nobody
Chart or diagram	`alt="Traffic by month, described in the text below"`	the real content belongs in the copy, where everyone can read it
Image of text	repeat the text exactly	anything else loses information. Better still, use real text

Keep it to a phrase. If you need two sentences, the information belongs in the page copy.
Skip "image of" and "photo of". The technology already announces that it is an image.
Do not stuff keywords. Alt text with a keyword list is bad for readers and looks exactly like what it is.
Never drop the attribute to mean decorative. Missing and empty are different states, and only one of them is a decision.

alt, title, figcaption, and aria-label

alt: the text equivalent of the image. Always present, empty when decorative.
title: a tooltip on hover. Not reliably announced, invisible on touch devices, and no substitute for alt.
figcaption: a visible caption for everyone. Complements alt rather than replacing it, so avoid repeating the same words in both.
aria-label: for interactive elements without visible text, such as an icon-only button. On an img element, use alt.

The five-minute audit

Print the heading outline and confirm one H1, no skips, and no navigation headings mixed into the content.
Count images and count alt attributes. Any gap is a bug.
Check that every decorative image has an explicit alt="".
Read the alt text of every linked image and ask whether it describes the destination.
Check images that contain text and make sure the text is available as text somewhere.

None of this is only for SEO. Missing alt text and broken heading outlines are two of the most commonly reported accessibility failures on the web, and both fall under WCAG. Fixing them helps real people first and search engines second.

Common questions

Can I use more than one H1?

HTML allows it and Google has said it will not break your page. It is still not the best choice: the sectioning outline that would have made nested H1s meaningful was never implemented, so a single H1 with H2 and H3 beneath it is what browsers, screen readers, and crawlers all handle consistently.

Does alt text help rankings?

It is how search engines understand an image, so it is the main reason an image ranks in image search, and it contributes context to the page around it. It is not a lever to pull for the page itself, and keyword-stuffed alt text can only hurt.

What about CSS background images?

They have no alt attribute, and assistive technology treats them as invisible. That is correct for genuinely decorative images. If an image carries meaning, it belongs in an img element with real alt text, not in a stylesheet.

Should keywords go in headings?

Write the heading that describes the section, and the words that matter will usually be in it naturally. Forcing a phrase into every H2 makes the page worse to read and adds nothing a search engine will reward.