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" />

How to use

To enable this rule in the CLI or using the config file, you can use:

CLI

oxlint --deny jsx-a11y/alt-text --jsx-a11y-plugin

Config (.oxlintrc.json)

{
  "plugins": ["jsx-a11y"],
  "rules": {
    "jsx-a11y/alt-text": "error"
  }
}

References

• Rule Source