Images coded for the web have four standard elements: The actual image file name, the styling (example borders created with CSS coding), the title tag (which is the mouse over text you see when hovering over an image), and the alt tag. Alt stands for alternative. In the “old days”, it was used to show text when an image was not able to display. This happened a lot during the dial up Internet phase when connections were very slow. Now, this tag is often used for search engine optimization. It is indeed a great way to add important keywords to support the optimization efforts of the website.

But did you know that Alt Tags are also important to make a website ADA compliant? Websites, just like buildings, can be ADA compliant. For certain industries, it is actually a legal requirement. This is often true if you are an agency receiving governmental funding.

Visually impaired Internet users use software programs known as Screen Readers that read text on a webpage as well as the description of an image. The description being read comes from the alt attribute so it is important that the text entered in the Alt Tag (alt=””) is relevant to the image, photograph, or graphic, all of which are considered image files. If the image is more complex and harder to describe in a few words, then a long description code can be used. This code can open up a page or pop-up which then explains the image in greater details. This is a great option for graphs.

Below is what the code for this image is:

src=”https://www.santarosawebsite.com/websitedesign/wp-content/uploads/2018/04/blue-eye-baby.jpg”
title=”Blue Eye Baby”
alt=”pretty blue eye baby”
class=”petaluma”

Note that alt tags cannot be applied to CSS coded background images. Those use a different type of code which does not accept tags. We foresee that, in the future, new code will be created to allow for alternative text to be applied to background images as well. Also images made using the <i> code such as Font Awesome (extremely popular on the web) needs some added code to be make ADA compliant. For those you cannot add an Alt Tag but you can do the following.

<a href=”https://facebook.com/your-id-here”><i class=”fa fa-facebook”></i></a>

Should be changed to:

<a href=”https://facebook.com/your-id-here” title=”Follow us on Facebook”><i class=”fa fa-facebook” title=”Follow us on Facebook” aria-hidden></i><span class=”hideme”>Follow BWC on Facebook</span></a>

The class “hideme” would need to be set in your stylesheet like this:

.hideme{display:none;}

Note that if the icons are to indicate a shopping cart state such as “There are 3 items in your cart” other adjustments would need to be made. As you can see, it gets quite technical when it comes to the coding adjustments.

If you need an ADA compliant website or complimentary consultation, give us a call at 707-794-9999. We also invite you to read more about our ADA website compliance services at this link.