Image alt text

mediumseo-image-alt

Every <img> needs an alt attribute — real text for informative images, empty for decorative ones. What each screen reader actually hears.

What it is

Every <img> should carry an alt attribute: a text description for informative images, or an empty alt="" for images that are purely decorative. This check reads it directly out of the HTML the server sent, so it runs on every scan regardless of whether a rendering engine is available.

It's the same underlying requirement as the accessibility image-alt audit, checked from a different source — served markup here, the rendered DOM there — which is also why a site can pass one and fail the other if an image is added by client-side script.

Why it matters

Alt text is what a screen reader announces in place of an image, and what search engines and AI crawlers read when they can't interpret pixels. An image with no alt attribute is either skipped in a way that loses information, or announced by its filename — 'IMG dash 4471 dot jpeg' read aloud is worse than silence.

Marking decorative images with alt="" — not omitting the attribute — matters just as much: it tells a screen reader to skip them rather than describe visual decoration that carries no information.

How to fix it

with a reference doc
html
<!-- informative image -->
<img src="chart.png" alt="Revenue grew 18% year over year">

<!-- decorative image -->
<img src="divider.png" alt="">

Reference documentation

Related checks

3
highColor contrastThis reads Lighthouse's own color-contrast audit: whether text has enough contrast against its background, judged by the WCAG formula rather than eyeballed. The threshold is 4.5:1 for normal text and 3:1 for large text (18pt+, or 14pt+ bold).highForm field labelsThis checks that every form field has an associated label — a <label> with a for attribute matching the field's id, or the input nested inside the label — read from Lighthouse's rendered-DOM audit rather than the raw HTML, so it catches labels missing at render time as well as in markup.lowHeading hierarchyHeading hierarchy is whether a page's <h1> through <h6> tags step down one level at a time — an <h2> can be followed by another <h2> or an <h3>, but not by an <h4> with no <h3> in between. This check reads the sequence of heading tags in the order they appear in the HTML.

This is one of the 75 checks the scanner runs. See what we check for the full list, every severity weight, and how the score is computed from them.

See whether your own site passes image alt text.

One page, all 75 checks, free. No account, no card.

Run a scan