Does each image that conveys information have a text alternative?

A screen reader facing an image without an alternative announces the raw filename: "sales-chart-q3-2025.png". No useful information gets through. For 18.5% of images on homepages (WebAIM Million 2025), this is exactly what happens.

This criterion concerns only images that carry information — those that, if removed, would cause the visitor to lose something. A results chart, a product photo on a product sheet, a submit button with an icon: each must have an alternative. A decorative image, on the other hand, must have an empty alt (see criterion 1.2).

Eight types of elements are covered: <img>, elements with role="img", <area> zones, <input type="image"> buttons, server-side images (ismap), <svg>, <object> and <embed> of image type, and <canvas>. Each type accepts specific alternative mechanisms: alt, aria-label, aria-labelledby, or <title> for SVGs.

No alternative, no information.

8 tests to verify the presence of text alternatives on images

Images <img> and elements role="img"

  1. Identify all <img> and all elements with role="img" on the page.
  2. For each element, decide whether it conveys information (if the image disappeared, would you lose something?).
  3. For an informative <img>: verify that at least one of these attributes is present and non-empty: aria-labelledby, aria-label, alt, title.
  4. For an element with role="img": verify that at least one of these attributes is present and non-empty: aria-labelledby or aria-label. Note: alt and title are not accepted for this case.
  5. At least one alternative found → test passed. No alternative → test failed.

Hotspots <area>

  1. Identify all <area> elements on the page (clickable zones of an image map).
  2. For each <area>, determine whether the zone conveys useful information.
  3. Verify that at least one of these attributes is present and filled: aria-label or alt.
  4. At least one alternative found → test passed. No alternative → test failed.

Image buttons <input type="image">

  1. Identify all <input type="image"> elements on the page.
  2. For each element, determine whether the image carries information.
  3. Verify that at least one of these attributes is present and filled: aria-labelledby, aria-label, alt, title.
  4. At least one alternative found → test passed. No alternative → test failed.

Note: the alternative must describe the function of the button, not the appearance of the icon.

Server-side image links <img ismap>

  1. Identify all <img ismap> elements on the page (server-side image-links).
  2. For each image, verify that a text alternative allows access to the same resources: a link or set of links, or an equivalent component (selection list, etc.).
  3. Alternative present → test passed. No alternative → test failed.

Inline SVG <svg>

  1. Identify all <svg> elements on the page.
  2. For each <svg>, determine whether it conveys information.
  3. Verify that the <svg> has the role="img" attribute. Without this attribute → test fails directly, even if an alternative is present.
  4. If role="img" is present, verify that at least one of these alternatives is filled: a child <title> element, aria-labelledby pointing to existing text, or aria-label on the <svg>.
  5. At least one alternative found → test passed. None → test failed.

Images <object>

  1. Identify all <object type="image/..."> elements on the page.
  2. For each element, determine whether the image carries information.
  3. Verify the presence of role="img" on the <object> element.
  4. Verify that at least one of these alternatives is filled: aria-labelledby, aria-label, or title → test passed.
  5. If no ARIA alternative is found, verify that an adjacent link or button provides access to alternative content, or that a replacement mechanism exists → test passed.
  6. None of the conditions met → test failed.

Images <embed>

  1. Identify all <embed type="image/..."> elements on the page.
  2. For each element, determine whether the image carries information.
  3. Verify the presence of role="img" on the <embed> element.
  4. Verify that at least one of these alternatives is filled: aria-labelledby, aria-label, or title → test passed.
  5. If no ARIA alternative is present, verify that an adjacent link or button provides access to alternative content, or that a replacement mechanism exists → test passed.
  6. None of the conditions met → test failed.

Images <canvas>

  1. Identify all <canvas> elements on the page.
  2. For each element, determine whether the rendered image carries information.
  3. Primary path: role="img" present AND aria-labelledby or aria-label filled → test passed.
  4. If role="img" is absent or without ARIA alternative, verify one of these conditions:
    • Text content is present between <canvas> and </canvas>.
    • An adjacent link or button provides access to alternative content.
    • A mechanism exists to replace the <canvas> with alternative content.
  5. One of these conditions met → test passed. None → test failed.

Attention: as soon as role="img" is present, only the primary path (step 3) is acceptable. Content between the tags is no longer sufficient.

Examples

❌ Non-compliant : Informative image without alt attribute

<img src="evolution-chiffre-affaires-2025.png">

The alt attribute is missing. The screen reader announces the raw filename "evolution dash chiffre dash affaires dash 2025 dot p-n-g" or simply "image" depending on the browser and its configuration. The information contained in the chart is completely inaccessible.

✅ Compliant : Informative image with descriptive and quantified alt

<img src="evolution-chiffre-affaires-2025.png" alt="Chart of revenue growth: +18% between January and June 2025, from 2.1M€ to 2.5M€">

The alternative conveys the essential message of the chart with key data. A screen reader user obtains the same information as a sighted user, without having to consult an external source.

❌ Non-compliant : Informative SVG without role="img"

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" aria-label="Completion gauge: 75%">
  <circle cx="100" cy="100" r="80" fill="#e63946"/>
  <text x="100" y="110" text-anchor="middle" fill="white" font-size="24">75%</text>
</svg>

The aria-label is present, but without role="img", the SVG is not exposed as an image to assistive technologies. RGAA requires both. Test 1.1.5 fails, even if the intent is good.

✅ Compliant : Informative SVG with role="img" and aria-label

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"
     role="img" aria-label="Project completion gauge: 75% achieved">
  <circle cx="100" cy="100" r="80" fill="#e63946"/>
  <text x="100" y="110" text-anchor="middle" fill="white" font-size="24">75%</text>
</svg>

role="img" exposes the SVG as an image to screen readers. The aria-label provides a contextualized alternative. Test 1.1.5 passed.

❌ Non-compliant : Image button without text alternative

<form action="/search" method="get">
  <label for="q">Search</label>
  <input type="text" name="q" id="q">
  <input type="image" src="btn-loupe.png">
</form>

The <input type="image"> has no alt attribute. The screen reader announces "btn-loupe.png". The user does not understand that this button submits the search. Test 1.1.3 fails.

✅ Compliant : Image button with functional alt

<form action="/search" method="get">
  <label for="q">Search</label>
  <input type="text" name="q" id="q">
  <input type="image" src="btn-loupe.png" alt="Start search">
</form>

The alt describes the function of the button, not the appearance of the icon. The screen reader user knows exactly what this button does. Test 1.1.3 passed.

Tips and pitfalls

⚠️ alt="image" or alt="photo": the alternative that isn't one

This is the most frequent error in RGAA audits. Screen readers already announce the role of the element ("image"). Writing alt="photo of profile" produces the announcement "image, photo of profile". The alt must describe what the image shows or communicates, not its format.

⚠️ SVG with aria-label but without role="img": test 1.1.5 still fails

An <svg> without role="img" does not validate test 1.1.5, even if an aria-label is correctly filled. The role is a mandatory prerequisite: without it, the SVG is not exposed as an image to assistive technologies. Always check both attributes together.

⚠️ The same image may require different alternatives depending on the page

A photo of an executive used as a decorative element on the homepage can have alt="". The same photo on the "Team" page is informative and requires an alt with the person's name and function. The alternative depends on the role of the image in its context, not the image itself.

⚠️ <canvas> with role="img": only one valid alternative path

As soon as a <canvas> has role="img", only aria-label and aria-labelledby are accepted. Text content between <canvas> and </canvas> is no longer acceptable. This is a peculiarity of test 1.1.8 that official documentation mentions in a note, but many miss in audits.

💡 For image buttons, describe the function, never the appearance

An <input type="image"> with a magnifying glass icon must have alt="Start search", not alt="Magnifying glass" or alt="Search icon". Criterion 1.3 will then verify the relevance of this alternative.

💡 The phone test for writing a good alt

Imagine describing the page over the phone to someone who cannot see it. What you would naturally say to convey the content of the image — that's the good alt. If you would say nothing, the image is probably decorative and the alt should be empty.

Frequently asked questions

How should decorative images be handled according to RGAA regarding the alt attribute?

The alt attribute must always be present on an <img>, but its value differs depending on the role of the image. For an informative image: alt with descriptive text. For a decorative image: alt="" (empty). If the attribute is missing, the screen reader announces the filename. Criterion 1.2 details the rules for decorative images.

What maximum length should an alt attribute conform to RGAA have?

RGAA does not impose a limit. In practice, aim for 80 to 100 characters for simple images. For a complex chart or dense infographic, a short alt describing the subject ("2025 Budget breakdown, see description below") can be supplemented by a detailed description via aria-describedby or an adjacent link. Criterion 1.6 covers complex images requiring detailed description.

How do you make an inline SVG accessible with RGAA text alternative?

No, the alt attribute does not exist on <svg>. For an informative inline SVG, add role="img" to the <svg> tag, then either a <title> as the first child element (pointing to it with aria-labelledby), or directly an aria-label. The <title> with aria-labelledby benefits from the best support among tested browser/screen reader combinations.

Why doesn't the title attribute replace alt on an <img> in RGAA?

Technically yes: test 1.1.1 accepts title as a valid mechanism for <img>. However, this is a last resort solution. The title is not announced by default by all screen readers depending on their configuration, and it is only accessible on mouse hover for sighted users. Prefer alt in all cases.

How do you quickly audit images without text alternative on a page?

From the DevTools console: document.querySelectorAll('img:not([alt])') lists images without an alt attribute. To spot empty alt on potentially informative images: document.querySelectorAll('img[alt=""]'). Includdy automatically flags these cases and classifies them by severity level.

References

RGAA 4.1.2: Criterion 1.1
WCAG 2.1:1.1.1 (A)H36H37H53F65H241.1.1 (A)