Role Img Alt
Critical - WCAG Level A
What the issue is:
Elements with role="img" must expose an accessible name so assistive technologies can convey the image's meaning. A common violation is using role="img" on a non-semantic element (e.g., a <div> with a background-image) without providing an accessible name (alt text, aria-label, or aria-labelledby).
Why it matters:
Screen readers and other AT announce images by their accessible name. If an image has no accessible name, AT users hear only a generic "image" announcement (or nothing), losing the content or purpose that sighted users receive visually. Keyboard-only users and users of magnifiers also rely on text alternatives for understanding content or navigating pages.
How to fix it:
Decide whether the image is decorative or informative. If decorative, mark it as ignored: use an <img> with alt="" or role="presentation" / aria-hidden="true" on non-semantic elements so AT skips it.
If the image conveys information, give it an accessible name:
Best: use a semantic <img src="..." alt="meaningful description">. The alt attribute is the primary mechanism for images.
If you must use a non-img element with role="img" (e.g., for complex styling), supply aria-label="..." or aria-labelledby="idOfCaption" so the accessible name is computed.
For long or complex images (charts, diagrams), provide a short alt and a longer description via aria-describedby or a linked long description; or use <figure><figcaption> and reference it with aria-labelledby.
Best practices:
Prefer semantic <img> with concise alt text
Keep alt text succinct and informative
For complex images, pair a short alt with a longer textual description
Use aria-labelledby when the caption already exists in the DOM.
Common mistakes:
Relying solely on title attributes (not consistently exposed)
Leaving role="img" without aria-label/aria-labelledby
Using CSS background-images for meaningful content without accessible name
Using role="presentation" incorrectly for informative images
Always test with a screen reader to confirm the accessible name is correct.