This post originally appeared on the Yahoo! Accessibility Blog.
Images make web pages interesting. So let's make them useful for everyone, not just those that can see them. That may seem like an oxymoron, but not if you think of them as either decoration or content. This page will introduce you to methods for properly using images on web pages.
Images as content
If your image provides more information than being purely decorative, it falls into the general context pool.
Missing alt attribute
Forgetting to put an alt attribute on your link does more than hide the information from your user. It can also cause the screen reader to tell the user the location of your image. This is especially useless and annoying on sites which use dynamic image resizing and CDN locations.
Sample code for an image that has no alt attribute
<img src="very-long-url.jpg" />
Sample image that has no alt attribute
Listen: You'll notice the location of the image announced instead of what the image represents. NVDA screen reader skips the image, as if it had an empty alt attribute. VoiceOver announces an image that has no alt attribute.
Alt text treats the image as the subject itself
If the image is the subject, you will want to include the name of the image and the artist. You may also include the medium (sculpture, oil painting, assemblage...) or other important features of the image.
Sample code for an image that has an alt attribute
<img src="foo.jpg" alt="Hustler photograph by Ted Drake"/>
sample image with alt attribute
Listen: You'll note the alternative text does not describe what is inside the image.
JAWS announces an image with alt text.
Alt text treats the image as content for a story
If your image is providing context to the page, for instance a photograph of Barack Obama in a story of politics, you will want to describe what the image represents. How does it enhance the story?
Sample code for an image that has an alt attribute that describes the image as content
<img src="foo.jpg" alt="An antique sign with a news carrier and the word hustler"/>
Listen: You'll note the alternative text is a short description of the image. JAWS reads the alt text
Alt text and long desc for an image
The longdesc attribute is unfortunately a rarely used HTML feature. It allows us to specify the location of a web page that provides detailed descriptions of the image. This could be a docent's description of a painting or a data table for a stock chart.
Sample code for an image that has alt and longdesc attributes
<img src="foo.jpg" longdesc="hustler.html" alt="An antique sign with a news carrier and the word 'Hustler' at Casa de Fruta"/>
Listen: You'll note the alternative text is a short description of the image. You won't even know the longdesc is available in NVDA or VoiceOver. This recording from JAWS will tell you to hit enter to visit the long description. JAWS prompts user to visit the description link.
Images as decoration
Sometimes you'll have an image that is purely for decoration. These images should be delivered via CSS background images. If for some reason you have an image that needs to be in the source code and is purely for decoration, give it an empty alt attribute.
Sample code for an image that has an empty alt attribute
<img src="https://media.zenfs.com/en-US/blogs/ept_beta1/quote.gif" alt=""/>
Listen: The screen reader will skip images that have empty alt attributes. You won't actually hear anything.
VoiceOver ignores a decorative image with empty alt attribute (no sound at all)
Image that reinforces the text in a link
Leave the alt attribute empty if you place an image within a link with text that is equally descriptive.
Sample code for an image that has an empty alt attribute and precedes text that matches the image
<a href> print this article
Listen: The screen reader will skip images that have empty alt attributes. JAWS ignores the print image and reads the text.
This is also commonly seen in pages that display thumbnails for news articles. Ideally, you would have alt text that describes the image. Sometimes that is not available. It's better to use an empty alt attribute than to duplicate the headline. This example is from Yahoo! Finance.
Sample code for an image that has an empty alt attribute and follows precedes text that also describes the image
Wall St. Wipes Out November Losses as December Dawns
Listen: The screenreader will ignore the image and read the text. JAWS ignores the image and reads the text.
Some images represent actions and may be the only content in the link. You could either display the image inline or use a background image and hide the text. Background images can provide better performance. However, inline images with appropriate alt text will work when CSS and/or images are disabled.
Listen: You'll notice the screen reader will mention each link and image. It will read the alt text. JAWS reading a menu with inline images.
This version is used on Yahoo! Sports. It uses two unordered lists to contain the links. The Mail and Yahoo links use text with images. The other links hide the text and only show the background images.
Sample code for a menu with background images
<a href="https://www.yahoo.com/">Yahoo! </a></li>
<a href="http://mail.yahoo.com?.intl=us">Mail </a></li>
<a title="My Yahoo!" href="http://my.yahoo.com">My Yahoo! </a></li>
<a title="Yahoo! News" href="http://news.yahoo.com">News </a></li>
<a title="Yahoo! Finance" href="http://finance.yahoo.com">Finance </a></li>
<a title="Yahoo! Sports" href="http://sports.yahoo.com">Sports </a></li>
Listen: This example has more structure. The screen reader will tell you there is a list with two links and a list with 4 links. It will tell you the text of the links, there will be no mention of images. JAWS reading a menu with background images.
HTML5 and ARIA for Images
HTML5 Figure and Figcaption
The figure tag allows you to define information, such as images, charts, code snippets, and more that offer additional information about the main content of the page. I'm hesitant to say article, as that is an actual HTML5 tag, but we'd normally use it on an article page for the related image. The figcaption is contained within the figure tag and holds the caption for the figure. Note, the figcaption text is not the same as the alt text.
Sample code with HTML5 figure and figcaption tags
<img src="foo.jpg" alt="Hank on the couch"/>
The Boston Terrier is a breed of dog originating in the United States of America.
Color and markings are important when distinguishing this breed to the AKC standard.
Sample figure and figcaption
The Boston Terrier is a breed of dog originating in the United States of America. Color and markings are important when distinguishing this breed to the AKC standard.
Listen: HTML5 elements will behave differently in various browser/screen reader combinations. You should hear the image and text read normally. There may be no mention of the new tags. JAWS reading an image with figure and figcaption markup.
ARIA for Images
ARIA is a set of meta data that lets you define more complex interactions and structural elements in your HTML. It's primarily used to give better accessibility to screen reader and/or keyboard users. ARIA is supported by most browsers and screen readers, so it is safe to use now. It won't break anything. The longdesc may be deprecated in HTML5, let's go back to the image that had a longdesc attribute and see how we could use ARIA instead.
aria-describedby: this points to a link on the page that points to a long description of the image
Sample code for image with aria-described-by
alt="An antique sign with a news carrier and the word 'Hustler' at Casa de Fruta"
<a href>Image Description</a>
Listen: JAWS will provide the same functionality as a link with longdesc. Screenreaders that do not recognize the longdesc may ignore this attribute JAWS prompts user to visit the description link.
What you can do
- Always put an alt attribute on your images. No exceptions!
- Use an empty alt attribute if the image is purely decorative or is followed by text that equally describes the image
- Think about the best alt text for your image. It depends on what the image represents. Is it a call to action, a work of art, or additional content for the page
- Background image sprites can offer better performance but don't work when images or CSS are disabled.