Non-text Content

Why it matters

Information locked inside an image is not there at all for someone who cannot see it. A screen reader has nothing to read out. A braille display has nothing to render. The customer is left guessing. Picture a store where every product photo has no words attached. The photography could be beautiful and a blind shopper still could not tell one ring from another. The other half of the job is judgment, because alt text is a function of the page rather than of the picture. A photo of the world is "International Travel" on a travel site and "International Campuses" on a university one. Same image, different sentence. The page is about something different, so the description is too. The words you write are also the only version of that image a search engine can read, so a described image is a findable one.

Who this rule protects

Blind and screen reader users meet this rule first, because for them the alt text is the image. Deafblind users read the same words on a braille display, which makes the text the only route in. People browsing with images switched off on a slow connection get whatever you wrote and nothing else. So does anyone having the page read aloud by a voice assistant.

How to check it yourself

1. 1Turn on a screen reader and move through the page. Every image carrying meaning should be announced with words you could use in place of the picture. VoiceOver opens on a Mac with Cmd+F5.
2. 2Read the alt text on product and hero images and ask whether it names the item and the variant on screen. If the sentence would work as a replacement for the photo, it passes. Judge what it says rather than how it is spelled, because a file name that happens to describe the picture is fine and a hand-written sentence that describes nothing is not.
3. 3Check every icon that acts as a control, such as search, cart and close. Each one has to be named for what it does rather than for what it looks like.
4. 4Confirm decorative images are marked so assistive technology skips them. For an image element that means alt="". A purely decorative graphic can move into a CSS background instead.
5. 5Find any chart or diagram and look for two things. A short label naming it, and a longer description nearby carrying the trend and the numbers.
6. 6Find any CAPTCHA and check both halves. It needs text saying what it is for, and a second version using a different sense, such as audio alongside the visual puzzle.
7. 7Check the alt text is written in the same language as the page around it. An English description on a French page is a conformance problem rather than a style one.

Failures we see most often

• Product photos ship with no alt attribute at all, so a screen reader falls back to the file name and every product sounds the same.
• A decorative divider carries alt="decorative-line-final-v2" instead of an empty alt, so the same noise is read out on every page of the site.
• An icon-only cart button has no accessible name, so it is announced as "button" and nothing more.
• A status badge is drawn with a CSS background image, which cannot carry a text alternative, and nothing else in the markup says what the status is, so it reaches sighted users only.
• A chart carries alt="chart", which describes nothing, and the data stays visible to sighted readers alone.
• An editor swaps the image in the CMS and leaves the old alt text behind, so the description now belongs to a picture that has gone.
• A price is spelled out in ASCII art, or with look-alike characters borrowed from another alphabet, so a screen reader reads it as noise.
• A CAPTCHA offers wavy letters and nothing else, which shuts out anyone who cannot read them.

Who this one is for

Read from this rule's own note above, so the grouping and the note cannot disagree.

• Blind and screen reader userspeople who cannot see the screen

How this one is tested

We list 8 ACT rules against 1.1.1. Each one defines exactly what a checker looks at, which is how automated tools decide what to flag. Each one also checks a slice, so passing every rule here is not the same as meeting the criterion, and a rule can be proposed rather than approved or need a person to finish it. The note beside each says which.

• Element marked as decorative is not exposedA tool can check this
• Image accessible name is descriptiveA tool finds candidates, you decide
• Image button has non-empty accessible nameA tool can check this
• Image has non-empty accessible nameA tool can check this
• Link has non-empty accessible nameA tool can check this
• Object element rendering non-text content has non-empty accessible nameA tool can check this
• SVG element with explicit role has non-empty accessible nameA tool can check this
• Image not in the accessibility tree is decorativeA tool can check this

How to fix it

• Write alt text by asking what you would say out loud instead of showing the image, on this page, in this sentence. For a product, name the item and the variant on screen, such as the color or the size.
• Name a functional icon for its job rather than its drawing. A search button described as "Search" tells a user what pressing it does. "Magnifying glass" only describes the picture.
• Use alt="" for decoration, or move the graphic into a CSS background so there is nothing left for assistive technology to announce.
• Give a complex chart two alternatives. A short one that names it, and a longer description nearby carrying the trend and the implications, with the actual data in a table wherever that is practical.
• For an inline SVG icon, add a role of img alongside the accessible name. Some browser and screen reader pairings skip the name on an svg element without it.
• Label your CAPTCHA and offer a second route through it, such as an audio version. Then give people a way to reach a human when both routes fail.

Passes vs. fails