useAltText (since v1.0.0)
Diagnostic Category: lint/a11y/useAltText
Sources:
- Same as:
jsx-a11y/alt-text
Enforce that all elements that require alternative text have meaningful information to relay back to the end user.
This is a critical component of accessibility for screen reader users in order for them to understand the content’s purpose on the page.
By default, this rule checks for alternative text on the following elements: <img>, <area>, <input type="image">, and <object>.
Examples
Section titled ExamplesInvalid
Section titled Invalid<img src="image.png" />a11y/useAltText.js:1:1 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Provide a text alternative through the alt, aria-label or aria-labelledby attribute
> 1 │ <img src="image.png" />
│ ^^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ Meaningful alternative text on elements helps users relying on screen readers to understand content's purpose within a page.
<input type="image" src="image.png" />a11y/useAltText.js:1:1 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Provide a text alternative through the alt, aria-label or aria-labelledby attribute
> 1 │ <input type="image" src="image.png" />
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ Meaningful alternative text on elements helps users relying on screen readers to understand content's purpose within a page.
Valid
Section titled Valid<img src="image.png" alt="image alt" /><input type="image" src="image.png" alt="alt text" /><input type="image" src="image.png" aria-label="alt text" /><input type="image" src="image.png" aria-labelledby="someId" />