Images must have alternate text
Accessibility testing for dev teams - No experience required
Compliance Data & Impact
Disabilities Affected
- Blind
- Deafblind
Standard(s)
- WCAG 2.1 (A)
- WCAG 2.0 (A)
- Section 508
WCAG Success Criteria [WCAG 2.1 (A)]
- 1.1.1: MUST: Non-text Content
WCAG Success Criteria [WCAG 2.0 (A)]
- 1.1.1: MUST: Non-text Content
Section 508 Guidelines
- 1194.22: MUST: Web based intranet and Internet Information & Applications
- 1194.22 (a): MUST: A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content)
How to Fix the Problem
Ensure all informative <img> elements have short,
descriptive alternate text and all decorative
<img> elements have empty alt attributes (e.g.
alt="").
There are three main ways to add alternate text to an image:
-
Using an
altattribute i.e.<img alt="drawing of a cat" src="..."> -
Using an
aria-labeli.e.<img aria-label="drawing of a cat" src="..."> -
Using an
aria-labelledbyattribute i.e.<img arialabelledby="someID" src="...">
Alt Text Writing Tips
When writing alt text, keep in mind that its purpose is to relay information to blind users about the image’s contents and purpose - blind users should be able to get as much information from alt text as a sighted user gets from the image itself. Alt text should give the intent, purpose, and meaning of the image.
When writing alt text, it is helpful to keep the following questions in mind:
- Why is the non-text content here?
- What information is it presenting?
- What purpose does it fulfill?
- If I could not use the non-text content, what words would I use to convey the same information or function?
Be sure that all text contained in the attribute is useful. Words like "chart," "image," "diagram," or image file names tend not to be very useful and thus should not be used in alt text.
Decorative Elements
Provide "null" alt attributes (using alt="") for
images which do not provide information or do not require alternative text
because the image is described in the page content. Some developers will
mistakenly leave off the alt attribute altogether on images which
they deem do not need alternatives. This is not helpful to assistive
technology users because the assistive technology, such as screen reader, will
often read the source attribute (i.e., file name) as the alternative text. To
tell assistive technology to ignore an image, use a "blank alternative text"
attribute: alt="".
Example:
<img src="line.jpg" alt="">Why it Matters
Screen readers have no way of translating an image into words that gets read
to the user, even if the image only consists of text. As a result, it's
necessary for images to have short, descriptive alt text so
screen reader users clearly understand the image's contents and purpose.
If you can't see, all types of visual information, such as images, are completely useless unless a digital text alternative is provided so that screen readers can convert that text into either sound or braille. The same is true in varying degrees for people with low vision or color-blindness.
When you do not provide an acceptable alternative that works for their available sensory modalities, such as making an image accessible by providing a digital text description, screen readers cannot convert it into speech or braille to make it available by sound or touch.
Rule Description
All images must have alternate text to convey their purpose and meaning to screen reader users.
The Algorithm (in simple terms)
Ensures that every <img> element has alternative text and
either role="presentation" or role="none" (ARIA
1.1).
Resources
Refer to the complete list of axe 4.0 rules.
Was this information helpful?
Your response was as follows:
Date/Time feedback was submitted: