Images & Alt Text

Alternative text (alt text) is a textual description of an image that is
conveyed to users who cannot see it — including screen reader users, users on
slow connections, and search engines. Providing meaningful alt text for all
non-decorative images is one of the most fundamental accessibility requirements.
^[1]

---

Types of images and how to handle them

Informative images convey information that is not available in surrounding
text. Write alt text that conveys the same information as the image.
^[2]

Decorative images add visual interest but convey no information. Use an
empty alt attribute: alt="" — this tells screen readers to skip the image
entirely. Do not omit the alt attribute — a missing alt causes screen readers
to announce the filename.

Functional images are used as links or buttons. The alt text should describe
the action, not the image. A magnifying glass icon inside a search button should
have alt="Search", not alt="Magnifying glass".

Complex images such as charts, graphs, and diagrams require a longer
description. Provide a brief alt text and a full description nearby in the page,
or link to a separate page with the description.

Text images should be avoided wherever possible. If an image contains text,
the alt text must contain exactly that text.

---

Writing good alt text

• Be concise — typically under 100 characters
• Describe the content and function, not the appearance
• Do not start with "Image of" or "Picture of" — screen readers already announce it as an image
• Do not repeat information already in the surrounding text
• End with a full stop if the alt text is a complete sentence

^[1]

---

SVG and icon fonts

SVG images used inline should include a title element and role="img":

• svg role="img" — title — Description of the SVG — /title — /svg

Icon fonts (such as Font Awesome) rendered via pseudo-elements should have
their container marked with aria-hidden="true" and an accompanying visually
hidden text label.
^[3]

---

Common failures

Missing alt attribute. Screen readers will announce the image filename —
often something like "img_20240312_143022.jpg" — which is meaningless.

Generic alt text. Alt text such as "image", "photo", or "graphic" provides
no information. Describe what the image actually shows.

Redundant alt text. If the image caption or surrounding paragraph already
describes the image fully, use alt="" to avoid repetition.

---

References

1. W3C Web Accessibility Initiative. Understanding Success Criterion 1.1.1: Non-text Content. https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html ↑
2. W3C Web Accessibility Initiative. Images Tutorial. https://www.w3.org/WAI/tutorials/images/ ↑
3. W3C Web Accessibility Initiative. SVG Accessibility. https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA6 ↑