Images

Introduction

Images

When adding non-text content to a website, the non-text content must have a text alternative.听Images are a form of non-text content that听require听a text alternative if the image provides meaningful information. These text alternatives are critical to ensure users with disabilities who cannot see an image can have the text alternative read to them instead. However, text alternatives can also be useful for all users to better understand the purpose of an image.听

Alternative Text

Alternative text听辞谤听alt text听is a text replacement for an image that is used to explain what the image is and what it's trying to convey to the user. This is very important to screen reader users as a screen reader can read the alt text and read it back to the screen reader user.听It requires using the听alt听attribute on an听img听别濒别尘别苍迟.

Alternative text should briefly describe what the picture is conveying:

Syntax:&濒迟;颈尘驳听补濒迟="text">

Importance of Alt text听

  1. The use of alternative text is a principle of accessibility.听Alternative text is read by screen readers to provide a description of image to its user.
  2. If an image fails to load, alternative text is shown to give the user information about the image.

Decorative Images & Alt text听

When images are used for decoration and serve no other purpose than aesthetics, they require an empty alt attribute or null alt text (alt = 鈥溾��). The reason why an empty alt attribute would be used instead of not having an alt text is because the empty alt text allows screen readers to skip over the image.听听

If the image is a decorative image (background image), it does not need alternative text. All decorative images should have the 鈥渘ull鈥� attribute.

Syntax:&濒迟;颈尘驳听补濒迟="">

Figure Captions

The best method to provide alternative description to users is by using听蹿颈驳耻谤别听肠补辫迟颈辞苍蝉. Images can have figure captions associated to them that will not only be read by a screen reader but can provide additional information to sighted users.听At times, an alternative text might provide more information to assistive technology users giving a disadvantaged to sighted users. Moreover, alternative text can be an inconvenience to assistive technology users when it becomes too long. Figure captions are located either below or above the image to associate the description and image.

Syntax:听<figure>听<figcaption>听text听</figcaption>听</figure>

Visit the听Best Practices for Accessible Images听web page for more tips and tricks for image accessibility.

  • The alternative text must听accurately听represent the image.
  • Do not听use the phrases 鈥渋mage of鈥� or 鈥済raphic of鈥� in the alternative text.
  • The best method to practice is using captions; this will provide equal access to all users.
  • If images have text within them, the alternative text should include the embedded text and a brief description of the image.
  • Alternative text should be within 8 to 80 characters long.听If it is too long, use a complex image description.
  • If the image is a link, both the image and the link will require a description.
  • The alt text should explain where the link goes if the image is inside an <a> element along with the ARIA-label attribute.
  • Decorative images do not need alternative text. (alt=鈥濃��)
  • Complex images require additional text descriptions that should be provided on the page.听Refer to the听Best Practices for Accessible Images听for more information.

Example 1: Alt Text听

The image below is a meaningful image that needs a text alternative via alt text or caption. If alt text were used good alternative text for this image would be:听<Img Alt= "Duck swimming in a pond">听

Duck swimming in a pond. Alt text Example

听

Example 2: Figure Captions

The example below is another meaningful image that needs either alt text or a caption. 听If a caption were used, it could provide additional context may not otherwise be seen in the image.听

Orange Trees. Caption Example

Orange Trees from the 快活林性息 Orange Grove

For more examples go to听Best Practices for Accessible Images

Manual Review

  1. Review each听img听element and ensure it has the听alt听attribute.
    1. If the听alt听attribute is present, examine if the alternative text within the听alt听attribute contains a short and meaningful description of the image.
    2. If the听alt听attribute is not present, look to see if there is an alternative image description method (e.g., caption, description within the text, linked image methods, etc.)
      1. Review the text alternative to determine if it is a meaningful description of the image

Automated Testing Tools

  1. Open the Web Developer toolbar on your browser (Chrome, Firefox)
  2. Navigate to the Images column
  3. Select 鈥淒isplay Alt Attributes鈥�
  4. Manually review the alternative texts to see if they meet the guidelines.听

Activate the WAVE toolbar and navigate to the 鈥淒etails鈥� panel. Use 鈥�Errors, Features, and Alerts鈥� to check all the alternative text that is present on the webpage.

The following icons are accessibility errors related to images found by WAVE:听

WCAG 2.1 and References