useAltText
Ce contenu n’est pas encore disponible dans votre langue.
Diagnostic Category: lint/a11y/useAltText
Since: v1.0.0
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" />code-block.jsx: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.
ℹ If the content is decorative, redundant, or obscured, consider hiding it from assistive technologies with the aria-hidden attribute.
<input type="image" src="image.png" />code-block.jsx: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.
ℹ If the content is decorative, redundant, or obscured, consider hiding it from assistive technologies with the aria-hidden attribute.
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" />