Skip to content

altTexts

Reports elements that require alt text but are missing it.

✅ This rule is included in the jsx logical and logicalStrict presets.

Alternative text provides a textual description for images and other media. Search engine crawlers and screen readers use this text to describe the element to users who cannot see it.

Elements like <img>, <area>, <input type="image">, and <object> must have appropriate alternative text through alt, aria-label, aria-labelledby, or title attributes.

This is required for WCAG 1.1.1 compliance.

<
JSX.IntrinsicElements.img: DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>
img
ImgHTMLAttributes<HTMLImageElement>.src?: string | undefined
src
="foo.jpg" />
<
JSX.IntrinsicElements.img: DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>
img
ImgHTMLAttributes<HTMLImageElement>.src?: string | undefined
src
="foo.jpg" alt />
Error ts(2322) ― Type 'boolean' is not assignable to type 'string'.
<
JSX.IntrinsicElements.area: DetailedHTMLProps<AreaHTMLAttributes<HTMLAreaElement>, HTMLAreaElement>
area
AreaHTMLAttributes<HTMLAreaElement>.href?: string | undefined
href
="#" />
<
JSX.IntrinsicElements.input: DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>
input
InputHTMLAttributes<HTMLInputElement>.type?: HTMLInputTypeAttribute | undefined
type
="image"
InputHTMLAttributes<HTMLInputElement>.src?: string | undefined
src
="submit.png" />
<
JSX.IntrinsicElements.object: DetailedHTMLProps<ObjectHTMLAttributes<HTMLObjectElement>, HTMLObjectElement>
object
ObjectHTMLAttributes<HTMLObjectElement>.data?: string | undefined
data
="movie.mp4" />

If you’re not working with images or media elements, or if you use a framework that automatically injects known good alt text for those elements, you can disable this rule.

Made with ❤️‍🔥 around the world by the Flint team and contributors.