# jsx-a11y/alt-text

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

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.

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

```toml 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.

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

{/* End of the generated section. */}

## Examples

Reported:

{/* bad {"count": 4} */}
```jsx
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" />;
```

Not reported:

{/* good */}
```jsx
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:

{/* bad {"count": 2} */}
```jsx
const avatar = <img src={user.photo} alt />;
const logo = <img src="/logo.png" alt={undefined} />;
```

## Options

| Option | Default | What it does |
| --- | --- | --- |
| `elements` | all four | Which 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"`. |

{/* bad {"options": [{"img": ["Avatar"]}]} */}
```jsx
const avatar = <Avatar src={user.photo} />;
```

{/* good {"options": [{"elements": ["img"]}]} */}
```jsx
const search = <input type="image" src="/search.png" />;
```