One of the easiest but also most confusing pieces of HTML for ADA conformance is the ALT tag. The ALT is actually original code. It came in with HTML 1.0 and its purpose was in fact accessibility. It literally means ‘Alternative to the image’ and its goal is to add more clarity to an image, especially for persons who rely on screen readers.
So if you had an image of your new Jacksonville location, you could supply a descriptive ALT to the HTML. That way, a blind person reviewing the webpage would know what the image was. Instead of having ‘IMAGE’ read out on the screen reader, the code would look like this:
<img src="jacksonville.png" alt="Breaking ground at our new Jacksonville location.">
Over time, ALT tags have been more associated with search engine optimization (SEO), but understanding the role of the ALT tag in accessibility will allow you to intelligently approach both topics.
Descriptive ALT Tags
You should put a valid description into an ALT when the image conveys important information that is not available elsewhere on the page or the image has SEO value. Here are some examples:
-
The image is a link: Linked images should always have a descriptive ALT. Otherwise a screen reader just tells the user that the image is a link.
<a href="https://www.examplecompanyname.com/"> <img src="jacksonville.png" alt="Click here to get hours and address of our Jacksonville location.">
-
The image conveys information visually: You have a link to a pdf in content and at the end of the link you’ve added a PDF icon. The icon tells users that the link is to a PDF. Do the same in the ALT.
<a href="https://www.veryfakebankname.org/"> <img src="PDF_Icon.png" alt="This link opens a PDF.">
-
Buttons with images only: The most common example of this is a site search icon. If you have a button that says ‘Search’, screen readers and visual users alike know that the button executes a search, but because it’s an image of a magnifying glass, only the non-visually impaired user will know what the button does.
<input type="image" src="search_button.png" alt="Search Our Site">
-
Images with text in the image: This is less and less common these days because of the rise of responsive design and SEO, but some people still insist on an image that has the text in it. An example may be a promotional image with holiday rates. The ALT needs to give that pertinent info to screen readers since they are unable to read images.
<img src="Holiday2017_APR.png" alt="End the year with a new low APR on new and used cars. Starting at 1.8% for qualified buyers. See your branch manager for details.">
ALT tags for decorative images
It seems pretty clear that you should always put a descriptive text in an ALT then, right? Well, not quite. What if the image is just decorative? It would be pretty annoying to a user to make a screen reader read out every spacer gif and bar line on a page. So, when should you use a descriptive ALT and when you shouldn’t you?
Often a spacer or divider image is used in a web design. In this case, the image has visual significance but not for screen readers. For example, if you’ve got a blog and you’ve put in an image of a sunset because the article is about retirement, having a screen reader read out ‘Image of a sunset’ is often a waste of time. Also, if the information conveyed in the image is also in the article, you should put ALT=”” on the image since it’s just duplicating information at that point. Therefore, if you use the ALT = ”” code into your HTML source, the screen reader will pretend the image doesn’t exist altogether. Example: <img src="jacksonville.png" alt="">
Note: If you are not sure, default to putting a descriptive ALT in there. Annoying someone with a descriptive ALT is not an ADA violation, but hiding useful information form a screen reader is.
Learning where and when to use ALT tags when creating and maintaining an accessible website will eliminate a lot of unforced errors from making their way onto the site. Share this information with anyone responsible for maintaining your website so you can eliminate mistakes and adhere to WCAG 2.0 AA conformance standards.