Alt text on every image: how Sentinel and the design gate check it

What alt text is for

The alt attribute holds words that stand in for an image when it can't be seen. A screen reader reads them aloud in place of the picture. A browser shows them if the image fails to load. Search engines use them to understand what the image shows. Good alt text describes what the image contributes to the page, briefly: “A bakery counter full of fresh pastries” rather than “image1.jpg” or “photo”.

When an image is purely decorative, a texture or a flourish that adds nothing a reader would miss, accessibility guidance says to use an empty alt="", which tells screen readers to skip it. A missing alt, by contrast, often makes a screen reader read out the file name instead. The guide to writing alt text covers how to describe different kinds of image.

Two checks with different rules

In short, the gate enforces the accessibility minimum at publish: every img has an alt attribute, and its advice is to describe each image or use an empty value for one that only decorates. Sentinel asks for more while you work: every image and every element presented as an image must have actual words, through alt or aria-label. Its Report tab entry, “Every image has a text alternative”, shows how many images and illustrations it checked. The builder won't publish while any Sentinel check fails, so from the builder Sentinel's stricter rule is the one to meet; the server's own gate, which also covers publishing from the CLI or an agent, applies the minimum.

How Anticode pages get their descriptions

• Curated photos. Design-engine pages can use photos from a curated library served from Unsplash's image server. Each photo in the library comes with a written description, so it arrives with alt text already set, such as “Golden croissants on a dark board”.
• Drawn illustrations. Where a page uses an abstract shape instead of a photo, for a product or a service, it's an element with role="img" labelled with the item's name, so assistive technology announces what it stands for.
• Team portraits. In a Team section, each member is shown as their initials in a coloured shape, labelled with their name and role; the initials themselves are hidden from screen readers so they aren't read twice.
• Charts. The dashboard's bar chart is labelled with a sentence giving the latest value and the high.

For photos you add yourself, which app builds use, check that each one ends up with a description that says what matters in it, not just what it is. More on adding your own pictures in media uploads.

Why it sits on a security list

Alt text isn't a security control. It's on Sentinel's list of twelve because that list is the set of things that must be true of the exact HTML that ships, and a page that excludes some of its visitors fails that bar as surely as one with a careless form. Having it checked in the same pass as the security items means it's never left for later.

Limits

• Presence, not quality. Both checks confirm a description exists. “Picture” passes. Read your alt text as if you couldn't see the image.
• Background images aren't images to these checks. A photo set as a CSS background has no alt and isn't checked; don't put meaningful pictures there.
• Text in images. A sign or menu photographed as an image needs its words in the alt text or, better, on the page as real text.

Questions people ask

Should decorative images have empty alt text?

Yes, by accessibility guidance, and the design gate accepts alt="". Sentinel's image alt text check still fails it, though, and the builder won't publish while a Sentinel check fails, so on a page published from the builder give every image a short description.

What happens if an image has no alt attribute?

Screen readers may read out the file name, and the design gate refuses to publish the page until it's added.

Do CSS illustrations need alt text?

If they're presented as images with role="img", yes. Sentinel checks for an aria-label on them.