# ember/template-require-valid-alt-text

💼 This rule is enabled in the 📋 `template-lint-migration` [config](https://github.com/ember-cli/eslint-plugin-ember#-configurations).

<!-- end auto-generated rule header -->

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 screenreader 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: `<img>`, `<area>`, `<input type="image">`, and `<object>`.

Enforce `img` alt attribute does not contain the word image, picture, or photo. Screen readers already announce `img` elements as an image. There is no need to use words such as _image_, _photo_, and/or _picture_. The rule will first check if `aria-hidden` is true to determine whether to enforce the rule. If the image is hidden, then rule will always succeed.

## Examples

This rule **forbids** the following:

### `<img>`

An `<img>` must have the `alt` attribute. It must have either meaningful text, or be an empty string.

The content of an `alt` attribute is used to calculate the machine-readable label of an element, whereas the text content is used to produce a label for the element. For this reason, adding a label to an icon can produce a confusing or duplicated label on a control that already has appropriate text content.

If it's not a meaningful image, it should have an empty alt attribute value and have the role of presentation or none.

`img` alt attribute does not contain the word image, picture, or photo. Screen readers already announce `img` elements as an image. There is no need to use words such as _image_, _photo_, _logo_, _spacer_, and/or _picture_.

Numbers are not considered valid alt text, and this rule disallows using only numbers in alt text.

This rule **forbids** the following:

```gjs
<template>
  <img src='rwjblue.png' />
  <img src='foo' alt='Photo of foo being weird.' />
  <img src='foo' alt='YourCompany logo' />
  <img src='bar' alt='Image of me at a bar!' />
  <img src='baz' alt='Picture of baz fixing a bug.' />
  <img src='b52.jpg' alt='52' />
  <img src='foo' alt='foo as a banana' role='presentation' />
</template>
```

This rule **allows** the following:

```gjs
<template>
  <img
    src='rwjblue.png'
    alt='A man standing in front of a room of people, giving a presentation about Ember.'
  />
  <img src='foo' alt='YourCompany Home Page' />
  <img src='bar' aria-hidden='true' alt='Picture of me taking a photo of an image' />
  // Will pass because it is hidden.
  <img src='baz' alt='Baz taking a {{photo}}' />
  // This is valid since photo is a variable name.
  <img src='b52.jpg' alt='b52 bomber jet' />
  <img src='foo' alt='' role='presentation' />
  // This is valid because it has a role of presentation.
</template>
```

### `<object>`

Add alternative text to all embedded `<object>` elements using either inner text, setting the `title` prop, or using the `aria-label` or `aria-labelledby` props.

Note, the `title` prop is generally less reliable than the alternatives. Some screen readers will not read this value aloud, leaving no description of the non-text content.

This rule **forbids** the following:

```gjs
<template><object width='128' height='256'></object></template>
```

This rule **allows** the following:

```gjs
<template>
  <object width='128' height='256' title='Middle-sized'></object>
  <object width='128' height='256' aria-label='Middle-sized'></object>
  <object width='128' height='256' aria-labelledby='id-12345'></object>
</template>
```

### `<input type="image">`

All `<input type="image">` elements must have a non-empty `alt` prop set with a meaningful description of the image or have the `aria-label` or `aria-labelledby` props set.

This rule **forbids** the following:

```gjs
<template><input type='image' /></template>
```

This rule **allows** the following:

```gjs
<template><input type='image' alt='Select image to upload' /></template>
```

### `<area>`

All clickable `<area>` elements within an image map have an `alt`, `aria-label` or `aria-labelledby` prop that describes the purpose of the link.

This rule **forbids** the following:

```gjs
<template><area shape='poly' coords='113,24,211,0' href='inform.html' /></template>
```

This rule **allows** the following:

```gjs
<template><area shape='poly' coords='113,24,211,0' href='inform.html' alt='Inform' /></template>
```

## References

- [WCAG Technique- using alt attributes on img elements](https://www.w3.org/TR/WCAG20-TECHS/H37.html)
- [WCAG Criterion 1.1.1 - Non-text Content](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html)
- [HTML 5.2 spec - the img element](https://www.w3.org/TR/html5/semantics-embedded-content.html#the-img-element)
- [Failure of Success Criterion 1.1.1 due to providing a text alternative that is not null (e.g., alt="spacer" or alt="image") for images that should be ignored by assistive technology](https://www.w3.org/WAI/WCAG21/Techniques/failures/F39)