Alt Text Required for Every Image

ProNew

A set of uploaded images that cannot be published until each has a description or is marked decorative, with a counter of what is missing and a button that jumps to the next one. Use this when your content must meet accessibility standards and people tend to skip alt text.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Editors add images to content that must be accessible, and you want the missing alt text found before publishing.

Do not use it when: Do not force alt text on images that are purely decorative; give them an explicit decorative choice.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`images`	`{ id, name, src, alt, decorative }[]`	The images to describe.
`onPublish`	`(images) => void`	Called when every image is done.

altDone(image) is exported.

Accessibility

Each image has a labelled description field naming the file ("Description of team.jpg"); the thumbnail itself is alt="" because the field next to it is the description.
Decorative is an explicit choice with its own labelled checkbox, which disables the field and says screen readers will skip the image, so "no description" is never an accident.
The count of what is missing is a status, "Go to the next one" moves focus to the first field that needs work, and Publish is disabled until all are done.

Testing

The pattern ships with a Testing Library test (image-alt-text-required.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

Editors add images to content that must be accessible, and you want the missing alt text found before publishing.

Do not use it when: Do not force alt text on images that are purely decorative; give them an explicit decorative choice.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`images`	`{ id, name, src, alt, decorative }[]`	The images to describe.
`onPublish`	`(images) => void`	Called when every image is done.

altDone(image) is exported.

Accessibility

Each image has a labelled description field naming the file ("Description of team.jpg"); the thumbnail itself is alt="" because the field next to it is the description.
Decorative is an explicit choice with its own labelled checkbox, which disables the field and says screen readers will skip the image, so "no description" is never an accident.
The count of what is missing is a status, "Go to the next one" moves focus to the first field that needs work, and Publish is disabled until all are done.

Testing

The pattern ships with a Testing Library test (image-alt-text-required.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.