This UX Accessibility Blog Series, “Setting Up An Accessible Web Page,” will walk you through the basic elements of an accessible web page in hopes that you can take what you’ve learned and apply it to more complex pages. This blog series is loosely based on Heydon Pickering’s book “Inclusive Design Patterns: Coding Accessibility Into Web Design.”

We’ve talked about what needs to be done to make images accessible multiple times before, but since the relationship between these elements and accessibility/inclusivity is an important conversation to have, we’ll go over them (maybe in a bit more detail) again.

Why?

As we’ve discussed in a previous blog post, images can help users comprehend what they are reading better by giving them something visual to associate with the text. For example, if you’re looking at houses to buy on Zillow, the pictures can help you decide if you are interested in the house even more than the text description alone of the house.

Visually impaired users do not have this luxury. They rely on only the text descriptions of pictures to help them gain a better understanding of what the images on a page are. Text alternatives are read by screen readers to the user in place of the image. Also, in the event that your user has a slow internet connection (out in the field, internet outage, etc.), the images on your page may not load at all, causing the alt text to be displayed in place of the images themselves. Adding alt text to your images also satisfies the first principle of web accessibility, perceivable. For these reasons, it is imperative that clear, descriptive alternative text be added to every image.

Every image should have an alt attribute. (bolded, italicized, and underlined because it’s just that important)

Links

If your image also happens to be a link, make sure the alt text describes the link destination and not necessarily the image itself. For example, you have the FNC, Inc. logo on your page that links to fncinc.com, such as in your footer.

In this case, using “FNC, Inc. Logo” may not be very helpful. You’ll need to make sure the alt text says something like, “FNC, Inc Home Page”. According to Penn State’s accessibility article, “Image ALT Tag Tips for HTML,” providing a full description (saying “FNC, Inc. Logo. Directs to FNC home page”) is unnecessarily redundant.

Purely Decorative Images

Images that are used for purely decorative purposes, such as a horizontal line that separates two sections, don’t necessarily need a description. Penn State’s article uses a rainbow divider image as an example.

<img src=”examples/spectrumtooltip.gif” alt=”A Rainbow line used as a divider” >

Screen reader says “A rainbow line as a divider.” If you have eighteen rainbow toolbars, the screen reader would repeat this eighteen times. This text is irrelevant to a screen reader user and increases reading time.

In this case, adding the description in the alt attribute could just annoy the user. However, every image must have an alt attribute, so we can add the alt attribute, but leave it equal to an empty string. This satisfies the HTML requirement of having an alt attribute but also keeps screen readers from just announcing “image” when encountering an <img /> tag that doesn’t have an alt attribute.