An image without alt text is silent to a screen reader user, and the editor is often the place where that silence is created. A writer inserts a photo, sees it look right, and moves on. Nothing in the editor asks what the picture shows. The fix is not to block publishing, which writers resent and route around, but to make the question hard to skip and easy to answer well.
Ask the writer whether the image carries meaning
Not every image needs a description. A decorative divider or a background texture should be marked as decorative, which tells assistive technology to skip it. An image that carries information, such as a chart or a screenshot of an error, needs a description of what it shows. Make the writer choose between the two when the image is inserted, with a plain question, rather than leaving a blank field that could mean either.
function imageMarkup(src: string, alt: string | null) {
if (alt === null) {
// The writer chose "decorative": an empty alt tells screen readers to skip it.
return { src, alt: "" };
}
if (alt.trim() === "") {
throw new Error("Describe the image, or mark it as decorative.");
}
return { src, alt: alt.trim() };
}The distinction matters in the markup. An empty alt="" means decorative. A missing alt attribute means the image has no text alternative at all, which some screen readers announce by its file name. The editor should never produce a missing attribute, so every image is either described or deliberately empty.
Prompt for the subject, not the file name
A field labelled “Alt text” with nothing else around it invites writers to type the file name, or nothing. Ask a more specific question: what does a reader need to know from this picture? Show a short hint with an example, such as “A bar chart showing revenue rising each quarter in 2025”. The example teaches the level of detail without dictating the answer.
Automatic suggestions help, but they are drafts
An image recognition service can suggest a description, and that saves time for simple photographs. The suggestion is a draft. It can miss the point of the image, invent details, and misread text inside it. Show the suggestion in the field, let the writer edit it, and never save it without the writer seeing it. A suggestion that is accepted without reading is worse than an empty field, because it looks finished.
Text inside an image should be written out
A screenshot of a menu, a poster with a slogan, or a scan of a letter contains words that a reader cannot reach without the picture. Ask the writer to include the text in the description, or to place the text in the article and mark the image as decorative. Either way, the words must be available to every reader, not only to those who can see the image.
A short test list
- Insert an image and check the editor asks whether it is decorative or needs a description.
- Save an image with an empty description marked as informative and confirm the save is blocked with a clear message.
- Mark an image as decorative and inspect the saved markup for an empty alt attribute.
- Accept an automatic description, edit it, and confirm the edited text is what is saved.
- Read the article with a screen reader and confirm each image is either described or skipped.
RichTextEditor is a perpetual-licence JavaScript editor — one purchase, self-hosted, no metered editor loads. Download the evaluation or see how it compares.