jsx-a11y/alt-text

Require alternative text on img, area, object and input type="image"

Also called jsx_a11y/alt-text

A screen reader can't describe a picture, so it reads the alt text. Without one, it reads the file name or says nothing.

  • img, area and input type="image" need alt, aria-label or aria-labelledby.
  • object needs aria-label, aria-labelledby, title or content between its tags. alt doesn't count there.

For an image that's only decoration, write alt="". role="presentation" without alt is reported.

Configure#

Off by default. To turn it on:

bunfig.toml
[lint.rules]
"jsx-a11y/alt-text" = "error" # or "warn"

Every option, set to its default. The ones that are commented out are unset by default.

bunfig.toml
[lint.rules]
"jsx-a11y/alt-text" = ["error", {
  # elements = <list of strings>,
  img = [], # list of strings
  object = [],
  area = [],
  "input[type=\"image\"]" = [],
}]

Examples#

example.jsx4 problems
const avatar = <img src={user.photo} />;
const divider = <img src="/line.png" role="presentation" />;
const search = <input type="image" src="/search.png" />;
const report = <object data="/report.pdf" alt="Annual report" />;
example.jsxNo problems
const avatar = <img src={user.photo} alt={user.name} />;
const divider = <img src="/line.png" alt="" />;
const search = <input type="image" src="/search.png" alt="Search" />;
const report = <object data="/report.pdf">Annual report</object>;

An alt without a value, or with undefined or null, doesn't count:

example.jsx2 problems
const avatar = <img src={user.photo} alt />;
const logo = <img src="/logo.png" alt={undefined} />;

Options#

OptionDefaultWhat it does
elementsall fourWhich kinds to check: "img", "object", "area", "input[type=\"image\"]".
img[]Components to check like img.
object[]Components to check like object.
area[]Components to check like area.
input[type="image"][]Components to check like input type="image".
example.jsxwith { "img": ["Avatar"] }1 problem
const avatar = <Avatar src={user.photo} />;
example.jsxwith { "elements": ["img"] }No problems
const search = <input type="image" src="/search.png" />;