Write alt text for the job the image does: a quick landing page check

Alt text is the easiest accessibility fix on a landing page and the one most often left as an afterthought. Hero screenshots, logo strips, feature icons and linked images all need a decision, and the decision is different for each. Here is a quick way to go through them.

Why it matters

MDN calls the alt attribute mandatory and says screen readers read its value so users know what the image means. It is also shown when the image fails to load. When alt is missing entirely, MDN notes that some screen readers may announce the file name instead, which is not much help if it is IMG_4821.webp.

WCAG 2.2 success criterion 1.1.1 (Non-text Content) says non-text content needs a text alternative that serves the equivalent purpose. The key word is purpose, not description.

The check

1. Open the page and list every image. In DevTools console: [...document.images].map(i => [i.currentSrc.split('/').pop(), i.getAttribute('alt')])
2. Look for null. That means the attribute is missing, which is different from an empty string.
3. For each image, ask what it is doing on the page and write the alt text for that job.

What to write, by job

• Decoration (background flourishes, divider shapes): use alt="". MDN says an empty alt marks the image as not a key part of the content, and non-visual browsers may skip it. Do not leave the attribute out, because that is not the same thing.
• Informative (a product screenshot that shows the feature you are describing): say what a sighted visitor takes from it. "Dashboard showing weekly signups by channel" is better than "screenshot".
• A control (an image inside a link or button): describe the action, not the picture. MDN's example is alt="next page" rather than alt="arrow right".
• Logos in a "used by" strip: the company name is usually enough.
• Text inside images: put the same words in the alt text, and ask whether it should be real text instead.

Read it with the sentence before it

MDN suggests reading the alt value together with the text just before the image. If the sentence is "On my travels, I saw a cute little animal:" then "image" makes no sense after it, but "A penguin on a beach" does. That test catches most weak alt text in seconds.

Things to avoid

• Starting with "image of" or "picture of". The screen reader already says it is an image.
• Using title instead of alt. MDN says title is not an acceptable substitute, and repeating the same text in both can make some screen readers read it twice.
• Stuffing keywords. Alt text is for people first.
• Writing a paragraph. If an image needs a long explanation, put the explanation in the page text.

W3C also points out that text alternatives help search and make content easier to reuse, so this is not only a compliance task.

It takes about ten minutes for a typical landing page, and it is worth repeating whenever a new section is added.

Sources: img element on MDN and Understanding SC 1.1.1: Non-text Content (W3C).