---
title: role=img Element Alt Text | Accessibility Rule
description: '[role="img"] elements need to have an alternative text'
source_url:
  html: https://testingbot.com/support/accessibility/web/rules/role-img-alt
  md: https://testingbot.com/support/accessibility/web/rules/role-img-alt/index.md
---
# Ensure [role="img"] elements have alternative text

Rule ID: role-img-altUser Impact: seriousGuidelines: WCAG 2.0

Elements with `role="img"` must include accessible alternative text to convey their purpose and content to users relying on assistive technologies.

## About This Rule

This guideline ensures that elements with `role="img"` have accessible alternative text, enhancing accessibility for users who rely on screen readers. Adhering to this practice aligns with the following standards:

- WCAG 2.1 (A): 1.1.1 Non-text Content
- WCAG 2.0 (A): 1.1.1 Non-text Content
- WCAG 2.2 (A): 1.1.1 Non-text Content
- Section 508: 1194.22(a) - A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content)
- Trusted Tester: 7.A
- EN 301 549

## Why It Matters

Screen readers cannot interpret visual content without accessible alternative text. Providing descriptive text for elements with `role="img"` ensures that users with visual impairments can understand the content and purpose of these elements. :contentReference[oaicite:0]{index=0}

## How to Fix

To enhance accessibility:

- **Use `aria-label`:** Add an `aria-label` attribute with a descriptive value to the element. 

    <div role="img" aria-label="Description of the image"></div>

- **Use `aria-labelledby`:** Reference an existing element that contains the description using `aria-labelledby`. 

    <div id="image-description">Description of the image</div>
    <div role="img" aria-labelledby="image-description"></div>

- **Use `title` Attribute:** Include a `title` attribute with descriptive text. 

    <div role="img" title="Description of the image"></div>

### Examples

#### Incorrect

A `div` with `role="img"` and no alternative text:

    <div role="img"></div>

#### Correct

A `div` with `role="img"` and an `aria-label`:

    <div role="img" aria-label="Description of the image"></div>

## More Information

- [H37: Using alt attributes on img elements](https://www.w3.org/TR/WCAG20-TECHS/H37.html)
- [H67: Using null alt text and no title attribute on img elements for images that AT should ignore](https://www.w3.org/TR/WCAG20-TECHS/H67.html)

## Other Rules

Interested in other web accessibility rules? Please see these other rules:

- [scrollable-region-focusable](https://testingbot.com/support/accessibility/web/rules/scrollable-region-focusable)
- [select-name](https://testingbot.com/support/accessibility/web/rules/select-name)
- [server-side-image-map](https://testingbot.com/support/accessibility/web/rules/server-side-image-map)
- [summary-name](https://testingbot.com/support/accessibility/web/rules/summary-name)
- [svg-img-alt](https://testingbot.com/support/accessibility/web/rules/svg-img-alt)