What changes if it disappears?
Identify the message lost when someone cannot see the image. A photograph in a news report may provide evidence; the same photograph on a booking banner may only set a mood.
DIGITAL ACCESSIBILITY / WRITING PRACTICE
Give the image
a useful alternative.
The same picture can need different words on different pages. Start with its purpose, then write what your reader needs to understand or do.
Decide before you describe
Does it do something?
For an image that names a link or button, communicate the destination or action. If visible text already names that same control, a decorative icon can use alt="".
Is the full story elsewhere?
Charts and diagrams often need nearby text, a data table or a linked description. A short alternative can identify the graphic and direct readers to that detail.
An empty alt="" is intentional. Omitting the attribute is a different thing. This guide concerns HTML images; document editors and social platforms have different controls.
Method: W3C WAI image decision tree, functional images and complex images.
Work through your image
Choose the role on this page, add context and draft your words. Add a local reference image while you write, then explicitly save or download the draft if you want to keep it. This helper does not analyse images or judge whether your description is equivalent.
YOUR IMAGE WORKSPACE
Keep a reference. Take your draft with you.
Everything here runs in your browser. The reference image is not uploaded, saved on this device or included in downloads. Only the six writing fields are saved when you choose Save writing draft. Reselect the image after a reload.
JPEG, PNG or WebP, up to 8 MiB. A still frame is shown; animation is not assessed. The filename is never used as alternative text.
Save and resume your writing
Nothing is saved or restored automatically. Device storage is shared with other users of this browser profile. Use a JSON file to move your writing to another device.
Use this lab's JSON format, up to 256 KiB and 50,000 characters per field. Import replaces the six writing fields after validation; it does not save them or change your reference image.
YOUR WORKING NOTES
Choose the image's purpose
The guidance and example markup will appear here.
Markup to adapt
A draft template, displayed as text. Replace example paths and review the content in its real page.
A person must check whether the alternative conveys the same relevant information or function. This tool never awards compliance.
A purpose guide you can use anywhere
Decorative
Use an empty alternative when the image contributes no information or function. Check that a linked image still has a useful link name.
Informative
Describe the relevant message. Include position, expression or setting when those details matter to the surrounding content.
Functional
Name what will happen. “Open route map” helps a reader act; “blue pin” describes only the artwork.
Images of text
Prefer actual text where possible. When meaningful words exist only in an image, include them in the alternative. Logos have specific exceptions to the images-of-text requirement.
Complex
Pair a useful short alternative with a discoverable full equivalent. A trend summary alone may leave out values needed to make the same decision.
Already explained
An empty alternative can avoid repetition if nearby accessible text conveys everything relevant. A caption that only gives a credit is not an equivalent description.
Reference: W3C WAI Images Tutorial. For text rendered inside graphics, see Images of Text.
Seven scenarios. Context changes the answer.
Make your choice first, then open a suggested approach. These are original practice examples; wording can vary while preserving the same meaning.
01 / FERRY PHOTO
A welcoming booking banner
A ferry photograph sits beside “Plan your island trip.” All route and booking information is in the text. The photograph adds atmosphere and is not a link.
Suggested approach: booking banner
Decorative: use alt="". There is no extra route or service information to convey here.
Revisit the choice if the photograph becomes evidence of a particular vessel or boarding facility.
02 / SAME PHOTO, NEW PURPOSE
A story about boarding access
The ferry photograph now accompanies an article about step-free boarding. It shows a portable ramp between the quay and ferry entrance.
Suggested approach: boarding report
Informative: alt="A portable ramp bridges the quay and the ferry entrance."
Convey the visible feature discussed by the story. Do not claim the ramp is safe or standards-compliant from a photograph alone.
03 / ICON BUTTON
A speaker icon in a lesson
A button contains only a speaker image. Activating it starts the spoken version of the lesson.
Suggested approach: audio button
Functional: <button type="button"><img src="speaker.svg" alt="Play lesson audio"></button>
The name communicates the action. After playback starts, update the control's name and behavior together if it becomes a pause button.
04 / CHART
Completion rates across three months
A bar chart gives training completion as 40% in January, 55% in February and 70% in March. A manager needs the values and the trend.
Suggested approach: completion chart
Short alternative: alt="Training completion rose from January to March. Values follow in the table."
Add an accessible table: January 40%, February 55%, March 70%. Explain any scale, grouping or comparison that changes the interpretation. Keep the table discoverable next to the chart.
05 / EVENT POSTER
Details available only as an image
A poster reads “Inclusive Design Workshop · 18 October · 14:00–16:00 · Community Hall · Free entry.” No text version appears on the page.
Suggested approach: event poster
Provide those event details as real page text. Until that equivalent exists, an alternative must convey the poster's meaningful words, including the date, time, venue and cost.
A short label such as “workshop poster” would not let someone plan a visit. If a URL or contact detail appears in the artwork, provide it in usable text too.
06 / LINKED LOGO
One image, two link patterns
An Island Learning logo links to the organisation's homepage. In one header it is the link's only content; in another, the same link also contains visible “Island Learning home” text.
Suggested approach: linked logo
Image-only link: alt="Island Learning home" identifies the destination. With that equivalent visible text inside the same link, use alt="" on the logo to avoid repetition.
Do not leave an image-only link unnamed just because the logo seems decorative. An independent accessible link name must still exist.
07 / REPEATED INFORMATION
An illustration beside the instructions
An illustration shows a user choosing “Download transcript.” The immediately adjacent text says “Select Download transcript below the video to save the lesson as text.” It conveys the full instruction.
Suggested approach: repeated instruction
Use alt="" if the illustration adds nothing beyond that complete instruction. Keep the actual Download transcript link named and keyboard accessible.
If the illustration later highlights a hidden menu or a location not described by the text, update the text equivalent.
Continue the review in a real page
Read the alternative in its surrounding paragraph. Navigate to any link or button with a keyboard, then inspect or listen to its accessible name. For a chart, confirm the full description or table is reachable. Record the result in the digital testing worksheet.
- W3C WAI: image decision tree
- W3C WAI: functional images
- W3C WAI: complex images and full equivalents
- WCAG 2.2: understanding 1.1.1 Non-text Content
References checked 15 September 2026. The helper is a writing aid, not an automated accessibility certification.