Making Digital Images Accessible to People with Disabilities

ASU Digital Accessibility Liaisons

When images don’t load on a web page…

This is what the web is like for people using screen readers when images don’t have alt text.

​

Please don’t do this.

Why do images need alt(ernative) text?

Alternative--or alt--text is a text description of meaningful images that can be read by screen readers, seen when an image doesn't load on a page, and be indexed by crawlers.

• People with low or no vision can’t see images, but a screen reader can read alt text for them. �(Without alt text, screen readers often read the file name, like "73crop_img32_900px.png…" Ugh!)
• Using alt text can result in higher SEO rankings. Google can’t index images (very well), but it can index alt text. For example, search engines may be able to tell this is a man in a hoodie.

But if you're trying to rank for "Sheldon Cooper" or “Vulcan mind meld,” you'll need to lend the search engine a helping hand.

Where can I add alt text?

1. In a caption

2. In surrounding content

3. In an alt text field

How to add alt text with a WYSIWYG (rich text editor)

Adding alt text in Canvas

Adding alt text in Microsoft Word

Adding alt text in Google docs

Adding alt text in Microsoft Outlook

Adding alt text in Gmail

Adding alt text in WordPress

Adding alt text in Webspark (Drupal)

Types of images

Which images need alt text?

All images.

�All images should have an alt attribute (sometimes called an "alt tag").

• Informative images: Images that graphically represent concepts and information.
• Functional images: An image used as a link, button or control.
• Images of text: An image that contains graphic text as part of the image.
• Decorative images: An image that is only visually decorative and does not convey information.

We'll mention two other types, complex and animated images, but these are unique and beyond the scope of this talk.

Informative images

Images used to label other information�alt=”Phone”�alt=”Fax”

Images that graphically represent concepts and information need a short description

that supplies the essential information being conveyed.

Images used to supplement other information�alt=”Dog wearing the small silver bell.”

Images conveying succinct information�alt=”Push the cap down and turn it counter-clockwise (from right to left)”

Images conveying an impression or emotion�alt=”Our business is family friendly.”

From the W3C’s “Web Accessibility Tutorials”

Functional images

Linked logos�alt=”ASU home”

Image buttons�alt=”Learn Guitar”�alt=”Submit”�alt=”Search”

An image used as a link, button or other control should have a description of �the function of the link or button (not it's visual appearance).

�Linked icons�alt=”Print this page”�alt=”Next”�alt=”Opens in a new window”

Graphic text images

When an image contains graphic text, that text is your alt text.

Logo not linked�alt=”Arizona State University”

Image of text (unlinked)�alt=”Hayden 50 - Celebrating our past, building our future”�alt=”Best Colleges U.S. News Most Innovative 2017”

Decorative images

Image used as part of page design�alt=" "

If the image is just visually decorative (does not convey information), provide a null text alternative (alt=" ").

Don't forget to watch our calendar of events!

Get the best of ESPN sent to your inbox

Call us at 480-965-0000.

Don’t miss the impressive Tropical House – a huge greenhouse that displays examples of exotic plant-life from every tropical environment on the planet.

Eye candy (or generic images)�alt=" "

Complex images

Complex images like charts, graphs and infographics require special treatment we can't get into now.

​

But briefly…

�Complex images get alt text that summarizes the image AND gives the location of a full word-for-word text version of the chart.

​

�Learn more at accessibility.asu.edu/complex-images

Animated images

Unless they are purely decorative, animated images also need alt text.

Ask, "What is the purpose of the animated image?”

​

See more requirements for animated images at accessibility.asu.edu/animated

What if I’m still not sure?

Imagine that you’re describing the web page or document aloud over the phone to someone who needs to understand the page. Ask yourself, "What (if any) information or function do the images have?"

​

OR

​

Use the W3C’s “Alt Decision Tree”

w3.org/WAI/tutorials/images/decision-tree/

From the W3C’s “Web Accessibility Tutorials”

Writing good alt text

Write great alt text

• Give an accurate, equivalent description of the content and/or function of the image.
• Ask yourself, “What is this image primarily trying to convey?” The answer is your alt text.
• Put the most important information at the beginning.
• Keep it short. (Don’t force the user to listen to unnecessary text.)
• Don’t include words like “image”, “icon”, “logo” or “picture.” (Screen readers announce the element as a “Graphic” or “Image” before reading the alt text.)
• Consider context. Ask yourself, "What is important about the image in relation to the content?"
• If the description is already available in a caption or the content, don't repeat it in the alt text--instead, mark the image as decorative.

1. What alt text would you add for this image?

Seat belts are comprised of a buckle and a tongue.

1. Inequivalent and equivalent alt text

2. What alt text would you add for this image?

2. Inequivalent and equivalent alt text

3. What alt text would you add for this image?

3. Inequivalent and equivalent alt text

1. Good, better, best: alt text

Good: <img src="pancakes.png" alt="pancakes">

Better: <img src="pancakes.png" alt="Blueberry pancakes">

Best: <img src="pancakes.png" alt="Stack of blueberry pancakes with powdered sugar">

From moz.com

2. Good, better, best: alt text

Good: <img src="escalator.jpg" alt="man on escalator">

Better: <img src="escalator.jpg" alt="man walking on escalator">

Best: <img src="escalator.jpg" alt="man wearing backpack walking down escalator">

From moz.com

3. Good, better, best: alt text

Good: <img src="bird.png" alt="Rooster">

Better: <img src="bird.png" alt="Rooster crowing">

Best: <img src="bird.png" alt="Red-crested rooster crowing">

From moz.com

Still want more on accessible images?

Visit accessibility.asu.edu

Email accessibility@asu.edu

Ask questions on ASU’s #accessibility Slack channel.

Thank you!