altTexts
Reports elements that require alt text but are missing it.
✅ This rule is included in the jsxlogicalandlogicalStrictpresets.
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.
Examples
Section titled “Examples”<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) ― <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" /><JSX.IntrinsicElements.img: DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>
img ImgHTMLAttributes<HTMLImageElement>.src?: string | undefined
src="foo.jpg" ImgHTMLAttributes<HTMLImageElement>.alt?: string | undefined
alt="A foo" /><JSX.IntrinsicElements.img: DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>
img ImgHTMLAttributes<HTMLImageElement>.src?: string | undefined
src="foo.jpg" ImgHTMLAttributes<HTMLImageElement>.alt?: string | undefined
alt="" /><JSX.IntrinsicElements.img: DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>
img ImgHTMLAttributes<HTMLImageElement>.src?: string | undefined
src="foo.jpg" AriaAttributes["aria-label"]?: string | undefined
Defines a string value that labels the current element.
aria-label="Foo" /><JSX.IntrinsicElements.area: DetailedHTMLProps<AreaHTMLAttributes<HTMLAreaElement>, HTMLAreaElement>
area AreaHTMLAttributes<HTMLAreaElement>.alt?: string | undefined
alt="Click here" AreaHTMLAttributes<HTMLAreaElement>.href?: string | undefined
href="#" /><JSX.IntrinsicElements.input: DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>
input InputHTMLAttributes<HTMLInputElement>.type?: HTMLInputTypeAttribute | undefined
type="image" InputHTMLAttributes<HTMLInputElement>.alt?: string | undefined
alt="Submit" /><JSX.IntrinsicElements.object: DetailedHTMLProps<ObjectHTMLAttributes<HTMLObjectElement>, HTMLObjectElement>
object AriaAttributes["aria-label"]?: string | undefined
Defines a string value that labels the current element.
aria-label="Video" />When Not To Use It
Section titled “When Not To Use It”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.
Further Reading
Section titled “Further Reading”Equivalents in Other Linters
Section titled “Equivalents in Other Linters”- ESLint:
jsx-a11y/alt-text - Oxlint:
jsx_a11y/alt-text
Made with ❤️🔥 around the world by
the Flint team and contributors.