Alert: Meet DEI's 2022 Trusted Testers!

Learn more about DEI's Trusted Tester for Web Pilot Course...Read more

Creating Accessible Images

Contact the IT Accessibility Coordinator

Kristine Neuber
IT Accessibility Coordinator

Assistive Technology Initiative
MS: 6A11
Voice: 703-993-9815
Fax: 703-993-4743
kneuber@gmu.edu

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 (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.

assistive technology initiative logo

 

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:

ATI Logo
Accessible Media ATI Website Accessible Text

 

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 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