img Alternate Text

Always include an alt prop on <img> tags. If the image is presentational, alt can be an empty string or the <img> must have role="presentation".

ESLint: jsx-a11y/alt-text

Examples

⇣ Incorrect code for this rule:

<img src="snow.png" />

⇡ Correct code for this rule:

<img src="snow.png" alt="Falling snow" />

<img src="snow.png" alt="" />

<img src="snow.png" role="presentation" />

No Redundant img Alternate Text

Do not use words like "image", "photo", or "picture" in <img> alt props. Screen readers already announce img elements as images, so there is no need to include this information in the alt text.

ESLint: jsx-a11y/img-redundant-alt

Examples

⇣ Incorrect code for this rule:

<img src="snow.png" alt="Picture of falling snow" />

⇡ Correct code for this rule:

<img src="snow.png" alt="Falling snow" />

Valid ARIA Roles

Use only valid, non-abstract ARIA roles.

ESLint: jsx-a11y/aria-role

Examples

⇣ Incorrect code for this rule:

Invalid ARIA role:

<div role="datepicker" />

Abstract ARIA role:

<div role="range" />

⇡ Correct code for this rule:

<div role="button" />

No accessKey

Do not use accessKey on elements. Inconsistencies between keyboard shortcuts and keyboard commands used by people using screen readers and keyboards complicate accessibility.

ESLint: jsx-a11y/no-access-key

Examples

⇣ Incorrect code for this rule:

<div accessKey="h" />

⇡ Correct code for this rule:

<div />