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
<img src="ATI-Logo-small-1.jpg" alt="assistive technology initiative logo"/>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
<img src="ATI-Logo-small-1.jpg" alt=""/>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:
HTML Code Example for Image
<img class="wp-image-4555 aligncenter" src="https://ati.gmu.edu/wp-content/uploads/ATI-Logo-small-1.jpg" alt="ATI Logo" usemap="#atilogo" width="201" height="190" />
HTML Code Example for Image Map Areas
<map name="atilogo">
<area title="ATI Website" alt="ATI Website" coords="90,90,40" shape="circle" href="http://ati.gmu.edu" target="" />
<area title="Accessible Media Page" alt="Accessible Media Page" coords="130,25,40" shape="circle" href="https://ati.gmu.edu/accessible-media/" target="" />
<area title="Accessible Text Page" alt="Accessible Text Page" coords="165,95,40" shape="circle" href="https://ati.gmu.edu/accessible-text/" target="" />
</map>Avoid use of flashing or blinking images
Whenever possible, avoid blinking content as this can be distracting for many individuals navigating your website. Moreover, individuals with photosensitivity disorders may be susceptible to seizures from images or visual content that blinks or flashes too often (see WCAG 2.3.1 opens a new window for more details). While WCAG identifies success criteria to work around these challenges, the ATI would strongly recommend avoiding this type of web-based content.
For more information about this topic, visit Successes and Failures for WCAG 2.3.1 opens a new window.
Additional Resources
- *WebAIM Alternative Text opens a new window
- *The “alt text” Decision Tree – How to use the “alt” attribute opens a new window
- *Providing text alternatives for image maps opens a new window
- *W3C Web Accessibility Tutorials: Image Maps opens a new window