Skip to main content

a11y/useAltText

It asserts that alternative text to images or areas, help to rely on to screen readers to understand the purpose and the context of the image.

ESLint Equivalent: alt-text

Examples

Invalid

<img src="foo" />

 file.jsx:1 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide alt text when using img, area, input type='image', and object
     elements.

    <img src="foo" />
    ^^^^^^^^^^^^^^^^^

  Meaningful alternative text on elements helps users relying on screen
    readers to understand content's purpose within a page.


<img {...props} />

 file.jsx:1 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide alt text when using img, area, input type='image', and object
     elements.

    <img {...props} />
    ^^^^^^^^^^^^^^^^^^

  Meaningful alternative text on elements helps users relying on screen
    readers to understand content's purpose within a page.


<img {...props} alt={undefined} />

 file.jsx:1 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide alt text when using img, area, input type='image', and object
     elements.

    <img {...props} alt={undefined} />
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Meaningful alternative text on elements helps users relying on screen
    readers to understand content's purpose within a page.


<img src="foo" role="presentation" />

 file.jsx:1 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide alt text when using img, area, input type='image', and object
     elements.

    <img src="foo" role="presentation" />
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Meaningful alternative text on elements helps users relying on screen
    readers to understand content's purpose within a page.


<img src="foo" role="none" />

 file.jsx:1 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide alt text when using img, area, input type='image', and object
     elements.

    <img src="foo" role="none" />
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Meaningful alternative text on elements helps users relying on screen
    readers to understand content's purpose within a page.


<object {...props} />

 file.jsx:1 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide alt text when using img, area, input type='image', and object
     elements.

    <object {...props} />
    ^^^^^^^^^^^^^^^^^^^^^

  Meaningful alternative text on elements helps users relying on screen
    readers to understand content's purpose within a page.


<object aria-label={undefined} />

 file.jsx:1 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide alt text when using img, area, input type='image', and object
     elements.

    <object aria-label={undefined} />
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Meaningful alternative text on elements helps users relying on screen
    readers to understand content's purpose within a page.


<area {...props} />

 file.jsx:1 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide alt text when using img, area, input type='image', and object
     elements.

    <area {...props} />
    ^^^^^^^^^^^^^^^^^^^

  Meaningful alternative text on elements helps users relying on screen
    readers to understand content's purpose within a page.


<area alt={undefined} />

 file.jsx:1 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide alt text when using img, area, input type='image', and object
     elements.

    <area alt={undefined} />
    ^^^^^^^^^^^^^^^^^^^^^^^^

  Meaningful alternative text on elements helps users relying on screen
    readers to understand content's purpose within a page.


<input type="image" {...props} />

 file.jsx:1 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide alt text when using img, area, input type='image', and object
     elements.

    <input type="image" {...props} />
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Meaningful alternative text on elements helps users relying on screen
    readers to understand content's purpose within a page.


<input type="image" {...props} alt={undefined} />

 file.jsx:1 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide alt text when using img, area, input type='image', and object
     elements.

    <input type="image" {...props} alt={undefined} />
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Meaningful alternative text on elements helps users relying on screen
    readers to understand content's purpose within a page.

<img src="foo" />

 file.html:1 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide alt text when using img, area, input type='image', and object
     elements.

    <img src="foo" />
    ^^^^^^^^^^^^^^

  Meaningful alternative text on elements helps users relying on screen
    readers to understand content's purpose within a page.


<img alt />

 file.html:1 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide alt text when using img, area, input type='image', and object
     elements.

    <img alt />
    ^^^^^^^^

  Meaningful alternative text on elements helps users relying on screen
    readers to understand content's purpose within a page.


<img src="foo" role="presentation" />

 file.html:1 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide alt text when using img, area, input type='image', and object
     elements.

    <img src="foo" role="presentation" />
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Meaningful alternative text on elements helps users relying on screen
    readers to understand content's purpose within a page.


<img src="foo" role="none" />

 file.html:1 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide alt text when using img, area, input type='image', and object
     elements.

    <img src="foo" role="none" />
    ^^^^^^^^^^^^^^^^^^^^^^^^^^

  Meaningful alternative text on elements helps users relying on screen
    readers to understand content's purpose within a page.


<object ></object>

 file.html:1 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide alt text when using img, area, input type='image', and object
     elements.

    <object ></object>
    ^^^^^^^^^^^^^^^^^

  Meaningful alternative text on elements helps users relying on screen
    readers to understand content's purpose within a page.


<area  />

 file.html:1 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide alt text when using img, area, input type='image', and object
     elements.

    <area  />
    ^^^^^

  Meaningful alternative text on elements helps users relying on screen
    readers to understand content's purpose within a page.


<area alt />

 file.html:1 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide alt text when using img, area, input type='image', and object
     elements.

    <area alt />
    ^^^^^^^^^

  Meaningful alternative text on elements helps users relying on screen
    readers to understand content's purpose within a page.


<input type="image" />

 file.html:1 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide alt text when using img, area, input type='image', and object
     elements.

    <input type="image" />
    ^^^^^^^^^^^^^^^^^^^

  Meaningful alternative text on elements helps users relying on screen
    readers to understand content's purpose within a page.


<input type="image" alt />

 file.html:1 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide alt text when using img, area, input type='image', and object
     elements.

    <input type="image" alt />
    ^^^^^^^^^^^^^^^^^^^^^^^

  Meaningful alternative text on elements helps users relying on screen
    readers to understand content's purpose within a page.

Valid

<img {...props} alt />
<img src="foo" alt="Foo eating a sandwich." />
<img src="foo" alt={"Foo eating a sandwich."} />
<img src="foo" alt={altText} />
<img src="foo" alt={`${person} smiling`} />
<img src="foo" alt="" />
<object aria-label />
<object aria-label="foo" />
<object aria-labelledby="id1" />
<object>Meaningful description</object>
<object>{hello}</object>
<object title="An object" />
<area {...props} alt />
<area aria-label="foo" />
<area aria-labelledby="id1" />
<area alt="This is descriptive!" />
<input type="image" {...props} alt />
<input type="image" alt="This is descriptive!" />
<input type="image" aria-label="foo" />
<input type="image" aria-labelledby="id1" />
<img src="foo" alt="Foo eating a sandwich." />
<object aria-label="foo" ></object>
<object aria-labelledby="id1" ></object>
<object title="An object" ></object>
<area aria-label="foo" />
<area aria-labelledby="id1" />
<area alt="This is descriptive!" />
<input type="image" alt="This is descriptive!" />
<input type="image" aria-label="foo" />
<input type="image" aria-labelledby="id1" />