Image (<img>, <svg> <figure>, <figcaption>)

When To Use

• Use <img> to add images to your website. ³
• Use <figure> to create a group of content like an image, diagram or code snippet with an optional caption via a <figcaption>. ²

Rules

General Rules

• Each image should contain an alt attribute, that states what can be seen on the picture. Otherwise the file name might get announced by screen reader. ³
• If the image is a <svg> element use <svg role="img" aria-labelledby="titleID"> with a <title id="titleID"> element inside of it. ¹³
• End alt descriptions with a period. This will create a small pause by screen readers. ⁹
• Don‘t include "Image of", in the alt text, since screen reader already announce the type. Exceptions can be made if the type it important, like a sketch or illustation. ⁹
• The content of the alt text dependents on the context that it is used in. Do describe the relevant information that the image conveys depending on the way you use that image. But always keep it as short as possible ⁹
• To marking up emojis or emoticons you can use use a <div> or <span> with a role="img" and an aria-label. See code example below. ⁴

Rules By Image Type

Images can be categorized into their purposes, to determine how to implement them: ¹

Informative Images

• Communicate a straightforward idea or message that can be conveyed in a brief sentence or phrase. Using the alt attribute to describe the image is enough. ¹
• Make sure not to to provide additional information inside the alt text that could be beneficial to sighted users as well.

Decorative Images

• Images that are purely decorative do not contribute any additional information to the content of a page. ¹
• Use a null alt text (alt="" or just alt) for decorative images to avoid adding noise to screen reader output or diverting users‘ attention from adjacent text. ^{1 6}
• What is considered an decorative image can only be decided by the author. A few heuristics for decorative images: ¹
  • Visual elements such as borders, spacers, and corners used for styling purposes. ¹
  • Images used to enhance the appearance or expand the clickable region of a link. ¹
  • An image that is illustrative of the adjacent text but does not provide any additional information. ¹
  • Images that are described and identified by the text surrounding it. ¹
  • Since the purpose of the the empty alt attribute is to reduce auditory clutter, you can ask yourself if a person using assistive technologies would benefit from a additional description, or if, on the other side, some context would get lost, where the image to be hidden from assistive technologies. ¹

Functional Images

• Functional images are utilized for initiating actions rather than communicating information, commonly found in buttons, links, and other interactive elements. ¹
• When providing a text alternative for a functional image, it should communicate the action that will be triggered rather than describing the image itself. ¹
• Such as "Print this page" instead of "Image of a printer", "Search" rather than "Magnifying lens", or "Example.com homepage" instead of "Example.com logo". ¹
• But an image inside a link, that also includes a visual descriptive text, should be considered as a decorative image when the alt text would be basically the same as the visual text and should include an empty alt text instead. This is to reduce auditory clutter. An image that adds information, like a "new window"-Icon should contain "new window" in its alt description. ¹

Images of Text

• Whenever an image consists of text the alt text should be the same. ¹
• Note: Text should be displayed as actual text whenever possible. ¹
• To conform with WCAG 2.1 AA images of text should be replaced by actual text if the technology being used allows the visual presentation of the text as intended or needed.
• But images of text are allowed in two cases:
  • If the image is customizable (font, size, color and background can be changed)
  • If the presentation of the text is essential and would not work as intended without it (that includes logos)
• To conform with WCAG 2.1 AAA images of text must be replaced by actual text. Expect for:
  • If the presentation of the text is essential and would not work as intended without it (that includes logos)
• So customizable images are not allowed anymore for WCAG 2.1 AAA and there is no exception made for insufficient technologies.

Complex Images

• Images that cannot be expressed through a brief phrase or sentence, like graph, charts, diagrams or illustrations. ¹
• There are multiple ways of handling those images:
  • Add a short description to the image via the alt tag and add the expanded explanation next to the image. This can be done via the <figure> and <figcaption> elements to associate the explanation. The difference in content between the two is that the alt text describes what can be seen in the picture, while the caption would editorialize and give context. So the alt text is still necessary! ¹
  • The expanded explanation can alternatively also be linked to. But don‘t rely only on the longdesc attribute of the <img> element, since this is not supported across most browsers, but also add a visible and accessible link. ¹
  • Using aria-describedby to link a longer flat text description to the image.

Groups of Images

• Multiple images that together convey one single information, can be implemented by adding an descriptive alt text to the first of these images and then add empty alt attributes to the rest of these images so that they get ignored by assistive technologies. ¹
• Collection of images can also be implemented inside of two levels of nested <figure> elements. ¹
• If you want or need a visible description for the image (see complex images) use the <figure> and <figcaption> elements to associate the text to the image. This text will be associated not as an accessible name but as additional details (like the aria-details attribute does). An alt text is still needed for the image, but make sure not to duplicate the information (see complex images). ⁵

Contrast Requirements

• There is a minimum contrast requirement of 3:1 (WCAG2.1 1.4.11 AA) for: ¹⁰
  • visual non-text content, like icons, that is needed to identify or understand (not deactivated) user interface components. ¹⁰
  • graphical objects, like icons or important parts of graphs, that are needed to understand the content of the site, except for when the exact visual presentation is required to understand the object. ¹⁰
• "Needed to understand the content", means there is no other visual representation of the graphical object, and the grapical object is not only decorative and the presentation is not essential (like a logo). ¹⁰
• Ignore non-interfering colors when measuring contrast ratio for components with multiple colors. ¹⁰
• A website that supports multiple color profiles like a light and dark mode generally is beneficial to accessibility. If using multiple color profiles make sure to test the contrast requirements in all profiles and possibly change the colors of important non-text content. ¹¹

Contrast Details: Non-Text Content for interface components

• All visual information that identifies a control in a certain state (active, focus, selective, ...) also needs the 3:1 minimum contrast to its surrounding colors. Different states of a component do not have a contrast requirement between each other except for when there are multiple components next to each other. ¹⁰
• See this sentence source for more details on contrast requirements for focus indicators. ¹⁰

Contrast Details: Graphical Object Rules

• Images made up of multiple lines, colors and shapes will be made of multiple graphical objects, some of which are required for understanding. ¹⁰
• Only the graphical objects of a image that are required for understanding must comply with the contrast requirement. ¹⁰

Examples

Marking up emojis or emoticons using <div> or <span> elements with a role="img" and an aria-label: ⁴

<span aria-label="astronaut" role="img">🧑🏽‍🚀</span>

Sources 

1. W3C WAI: Images Tutorial by W3C WAI Tutorial Contributors is licensed under W3C Document License
2. MDN: <figure>: The Figure with Optional Caption element by Mozilla contributors is licensed under CC-BY-SA 2.5
3. MDN: <img>: The Image Embed element by Mozilla contributors is licensed under CC-BY-SA 2.5
4. CSUN: Best Practices for Accessible Images by Mozilla contributors © California State University, Northridge
5. WebAIM: Alternative Text © WebAIM
6. HTML Spec: Living Standard, 13 The HTML syntax is licensed under Creative Commons Attribution 4.0 International License
7. W3C: Images of Text (Level AA) by Accessibility Guidelines Working Group (AG WG) Participants is licensed under W3C Document License
8. W3C: Images of Text (No Exception) (Level AAA) by Accessibility Guidelines Working Group (AG WG) Participants is licensed under W3C Document License
9. axess lab: Alt-texts: The Ultimate Guide by Daniel Göransson © Axess Lab
10. W3C: Non-text Contrast (Level AA) by Accessibility Guidelines Working Group (AG WG) Participants is licensed under W3C Document License
11. Smashing Magazine: Accessible SVGs: Inclusiveness Beyond Patterns by Carie Fisher
12. W3C WAI: Providing text alternatives for emojis, emoticons, ASCII art, and leetspeak by Accessibility Guidelines Working Group (AG WG) Participants is licensed under W3C Document License
13. Smashing Magazine: Accessible SVGs: Perfect Patterns For Screen Reader Users by Carie Fisher