Basic

Names, alt text, and empty alt

Every image needs a decision: does it carry information or not? If yes, alt holds the information in words. If no, alt is empty and the image is skipped. Both are correct; a missing alt attribute is never correct.

What you will see

Each string should make sense with no image in front of you. If it names a file, rewrite it as the fact.

About 1 min of reading

Try It

Audit every image on one page

List images without alt

grep -oE ']*>' index.html | grep -v 'alt=' | wc -l

Before you run it, say out loud what it will print. Then open the answer.

What it prints

Zero. Each hit is a missing decision that must be filled with a fact or an empty string.

List empty alt uses

grep -oE 'alt=""' index.html | wc -l

Before you run it, say out loud what it will print. Then open the answer.

What it prints

The count of decorative images. Each one should be a flourish, not a chart or a logo that names the product.

Check icon-only links

grep -oE ']*>\s*

Before you run it, say out loud what it will print. Then open the answer.

What it prints

For each hit, confirm the inner img has a non-empty alt. That alt is the link name.

Read the alt aloud

grep -oE 'alt="[^"]*"' index.html

Before you run it, say out loud what it will print. Then open the answer.

What it prints

Each string should make sense with no image in front of you. If it names a file, rewrite it as the fact.

Do not put the word 'image of' in alt. The technology already announces that it is an image, so the phrase is duplicated noise.

Data Flow

Image to a decision

1 Ask whether the image conveys content

↓

2 Yes: write the conclusion in alt

↓

3 No: write alt=""

↓

4 Never leave alt absent

Why this works

How long alt should be

One sentence, under about 125 characters. Longer than that belongs in a caption or a figcaption outside the image, so it is announced in reading order.

Where the name comes from

Prefer text in the document. Use alt for images and aria-label only for controls whose visible text is not usable as a name, such as an icon-only button.

Examples

alt is the content, not the filename

A chart of quarterly revenue gets alt describing the trend in one sentence, not 'chart.png'. The reader of alt is the person who cannot see the chart, so they need the conclusion.

Empty alt for decoration

alt="" on a divider flourish means the announcement is skipped entirely. Without it, the reader hears the filename, which is noise that also breaks the reading flow.

Links made of images

An image inside an anchor has no other text, so alt is the link's name. If alt is empty there, the link has no name and the audit fails.

Words this lesson uses

Each one is defined here on this site. Open the entry for the full definition and the other words it points at.

← What accessibility is for

Previous Lesson

What accessibility is for

Next Lesson

Focus, and why it must be visible

Focus, and why it must be visible →