Fix guides · WCAG 2.2
Adding alternative text to images
1.1.1 Non-text Content · Level A W3C: Understanding 1.1.1
An <img> without an alt attribute gives a screen reader nothing to announce except, often, the file name. The sample is a team photo with no alt.
Who this affects: People who use screen readers, people who turn images off, and anyone on a connection where images fail to load.
The failing markup
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Crect width='80' height='80' fill='%23525252'/%3E%3C/svg%3E" width="80" height="80">How to fix it
- Add alt text that says what the image contributes in context: "Maria Rossi, head of support", not "photo".
- If the image is decorative, or its content is already in the text next to it, use alt="" so assistive technology skips it.
- Do not start with "image of"; screen readers already announce that it is an image.
The change
Removed: <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Crect width='80' height='80' fill='%23525252'/%3E%3C/svg%3E" width="80" height="80">Added: <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Crect width='80' height='80' fill='%23525252'/%3E%3C/svg%3E" width="80" height="80" alt="Maria Rossi, head of support">Verified by the scanner
On 2026-09-13 both versions of this sample were run through Accessibility Pro's scan pipeline with arc-style, axe-core, ibm-equal-access, pa11y, focus-graph. The failing markup was reported as:
- axe-core:
image-alt, WCAG 1.1.1 - ibm-equal-access:
ibm-img_alt_valid, WCAG 1.1.1
The fixed markup produced no findings at all. To run the same check on every pull request, use the accessibility GitHub Action; how accurate the scanner is overall is in the published benchmark.
Worth knowing
- A scanner can tell that alt is missing, but not whether existing alt text is accurate. That part needs a person, and the scanner does not score it as a pass.