src/content/docs/linter/rules/use-alt-text.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="JSX and TSX" icon="seti:javascript"> ## Summary - Rule available since: `v1.0.0` - Diagnostic Category: [`lint/a11y/useAltText`](/reference/diagnostics#diagnostic-category) - This rule is **recommended**, meaning it is enabled by default. - This rule doesn't have a fix. - The default severity of this rule is [**error**](/reference/diagnostics#error). - Sources: - Same as [`jsx-a11y/alt-text`](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/alt-text.md){
"linter": {
"rules": {
"a11y": {
"useAltText": "error"
}
}
}
}
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: ``, <area>, <input type="image">, and <object>.
<input type="image" src="image.png" />
<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" />
{
"linter": {
"rules": {
"a11y": {
"useAltText": "error"
}
}
}
}
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:
``, <area>, <input type="image">, and <object>.
:::note
In .html files, this rule matches element names case-insensitively (e.g., , ).
In component-based frameworks (Vue, Svelte, Astro), only lowercase element names are checked. PascalCase variants like `` are assumed to be custom components and are ignored. :::
<input type="image" src="image.png" />
<area href="foo" />
<object data="foo"></object>
<input type="image" src="image.png" alt="Submit" />
<object data="foo" title="Embedded content"></object>
<!-- Decorative images can be hidden from assistive technologies -->