Photo by Ali Yahya on Unsplash

How hard is it to do an ALT attribute?

I’ve been designing and developing ADA compliant sites for a long time (way before it was a buzzword) so whenever I see super simple things that could be done to enhance ADA compliance on websites that are just missed, forgotten, or empty … it drives me nuts. Not only because they’re simple to do, but because they’re also best practice stuff, table stakes for good experiences and good code.

One of these glaring omissions concerns the alt attribute. One of the cornerstones of a recent ADA-related lawsuit, the omission of this foundational attribute for the img tag prevented a blind man from gaining access to coupons delivered on a supermarket’s website. You see, the screen reader software that the user employed to read the website to him uses the alt attribute of images to read the image. In this case, the coupons were images with non-existent alternative text. So how did this coupon “display” to this blind user? Well, it basically “looked” (sounded) like this:

Wow, that’s an awesome coupon! Can’t wait to get some savings at my local Winn Dixie!

All they had to do here was put explanatory text of the coupon into the alt attribute. But they didn’t. My guess is that their CMS was set up to only accept an image for this element and did not include a text field for the alt text. Lazy.

The alt attribute is one of the older specifications in HTML dating back to 1995 and the HTML 2.0 spec. So unless you’ve been living under a rock for the last 22 years, there is no reason for you to not know or use this attribute. Seriously, slow down and pay attention to your code. Architect your CMS smarter, provide for ADA!

Best practices are called “Best Practices” for a reason.

‘Nuff said.


P.S. The a11y project has some great tips on using alttext, check it out.