jsx-a11y/alt-text Correctness
What it does
Enforce that all elements that require alternative text have meaningful information to relay back to the end user.
Why is this bad?
Alternative text is a critical component of accessibility for screen reader users, enabling them to understand the content and function of an element. Missing or inadequate alt text makes content inaccessible to users who rely on assistive technologies.
Examples
Examples of incorrect code for this rule:
<img src="flower.jpg" />
<img src="flower.jpg" alt="" />
<object />
<area />Examples of correct code for this rule:
<img src="flower.jpg" alt="A close-up of a white daisy" />
<img src="decorative.jpg" alt="" role="presentation" />
<object aria-label="Interactive chart" />
<area alt="Navigation link" />Configuration
This rule accepts a configuration object with the following properties:
area
type: string[]
default: []
Custom components to check for alt text on area elements.
elements
type: array
Custom components to check for alt text on any of the supported elements.
elements[n]
type: "img" | "object" | "area" | "input[type="image"]"
img
type: string[]
default: []
Custom components to check for alt text on img elements.
input[type="image"]
type: string[]
default: []
Custom components to check for alt text on input[type="image"] elements.
object
type: string[]
default: []
Custom components to check for alt text on object elements.
How to use
To enable this rule using the config file or in the CLI, you can use:
{
"plugins": ["jsx-a11y"],
"rules": {
"jsx-a11y/alt-text": "error"
}
}import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["jsx-a11y"],
rules: {
"jsx-a11y/alt-text": "error",
},
});oxlint --deny jsx-a11y/alt-text --jsx-a11y-pluginVersion
This rule was added in v0.0.16.