Creating Accessible Images

Images improve the visual appeal of your website. They can, however, become an accessibility barrier for some individuals with disabilities when they are improperly used (e.g., flickering images) or not labeled appropriately (i.e., individuals who are blind or have low vision).

Relevant WCAG Guideline(s): WCAG 1.1.1 (Non-text content) opens a new window, WCAG 2.3.1 (Three Flashes of Below Threshold) opens a new window

For information on how to create accessible images, see below:

• Provide a text alternative for images
• Use empty alt tags for decorative images
• Making image maps accessible
• Avoid use of blinking/flickering images
• Additional resources

---

Provide a text alternative for images (e.g., logos, pictures, icons)

The alt attribute (short for alternative text) is an attribute of the img tag and is meant to be an alternative for non-visual users (i.e., individuals who use screen reader) when they encounter images on your website.

Screen reading applications cannot interpret images. For that reason, it is important that web designers and developers provide alt text that can be read aloud when the screen-reading application encounters an image. Below is an example of the ATI logo with an appropriate alt text description.

 

HTML Code Example

Another benefit of alt text is when an image does not load properly on a website. Instead of encountering a blank placeholder icon on the web page, the user will see the alt text displayed. This benefits all users as important can still be relayed to those individuals browsing your website.

---

Use empty “alt” tags for decorative images

Empty alt attributes hide decorative images, allowing screen reading applications to simply skip past them. This technique is useful for background images and aesthetic elements that hold no functional or instructional purpose.

Without an empty alt attribute, screen readers typically might read the filename of the image or simply indicate there is an image without an additional information. This can be confusing for individuals who are unable to see the image. Below is an example of the same ATI logo with an empty alt attribute.

 

HTML Code Example

---

Making image maps accessible

Image maps are images with clickable areas. To make image maps accessible, it is necessary to provide alt text for both the image (img tag) and the clickable areas (area tag) that the designer have been created.

Again, using the ATI logo, click on the CC, Braille, and ATI sections to go to a new page and read more about the topic: