Image

Referred HTML Tags

<img>

Essential A11y Requirements

Text Alternative

Images are by definition visual content. Therefore, by nature, they are not accessible to the visually impaired, so the author must add a text alternative to each image that describes what can be seen in it. The image tag has a dedicated attribute for this text alternative, namely the "alt" attribute.

1<img src="/path/to/image.jpg" alt="a description of the image's content" />

A practical alternative text describes, in a few words, what's seen in the picture. Avoid going into too many details if they are not essential for the user's understanding of the content. On the other hand, do not skimp on any details if they are. Avoid using phrases like "image of ...", "picture of ...", since a screen reader will specify this anyway based on the element's semantics. An author is exempt from adding "alt" text to the image only when the image is purely decorative and has no meaning or importance in understanding the content or using the page. However, if you choose not to use an "alt" text (or other equivalent labeling technique), you should “hide” the element from assistive technologies. Screen readers will do their best to provide the user with some text for every image. If they don't find an "alt" or other labeling attribute, they will read the content of the image's "src" attribute (e.g., the image location's URL) to the user. To make screen readers ignore an image element, you can do the following:

1. Leave the "alt" attribute empty. That is, add the "alt" attribute to the <img /> tag and keep its value as an empty string.
2. Use the aria-hidden="true" attribute; this attribute removes elements from the accessibility tree, making screen readers (and other assistive technologies using the accessibility tree) ignore the element that carries it.

1<img src="/path/to/image.jpg" alt="" />
2<!-- Or -->
3<img src="/path/to/image.jpg" aria-hidden="true" />

learn more about accessible names here

Equivalent WAI-ARIA Role

role=”img”

The role="img" is slightly different from other WAI-ARIA roles because it does not constitute an alternative to another semantic element. The functionality of the "img" role is to group a few different graphic elements that are supposed to act together as one image under a single element so that screen readers will read them as one image.

Required properties/attributes/context

• Ensure that the element has an alternative text. Note that not all elements accept the “alt” attribute, and you may have to use another labeling attribute.
• Note that the graphic elements inside the role=”img” element should be hidden from screen readers, so that they won’t try to read them. You can use the aria-hidden=”true” attribute to achieve that.

Additional Reading

W3C's Web Accessibility Tutorials - Images