Making Web Images Accessible to People Who Are Blind
Small touches that help screen-reader users feel included.
By Mel Finefrock • February 7, 2017
When it comes to photodocumentation via social media, many describe their photos with little anecdotes, like “Grandma and me at her eightieth birthday celebration.” These sorts of descriptions add meaning to photos for all who view them but perhaps especially for people who are blind. When it comes to mainstream web design, however, people often overlook labeling or describing their graphics, leaving blind individuals at a loss for understanding their significance. My hope in writing this article is to encourage the use of image description and to demystify the process of implementing it.
The Alt-Text Method
There are two ways to add descriptions to online graphics, the first being alternative text, better known as alt text. What is alt text? Although it’s originally intended to serve as a placeholder for graphics that didn’t download, the neat thing about alt text is that screen-reading software, such as JAWS (Job Access with Speech) by Freedom Scientific, Window-Eyes by Ai Squared, NVDA (NonVisual Desktop Access) by NV Access, and VoiceOver by Apple, pick up these labels and give blind people feedback on the image. As such, alt text is a great way to implement image descriptions and make your website more accessible to screen-reader users.
I’m blind but have been known to take photos on occasion. For the sake of demonstration, these are two of my own photos, described. For the benefit of my sighted readers, I have captions below each image since the alt text isn’t readily apparent unless you tell your browser to opt out of downloading graphics.
While it’s up to you how in-depth you go with your image description, ideally you want to be informative and concise. Here, I have allowed for more detail, because these are my artworks and personal to me. But if you’re writing a description and aren’t sure where to start, close your eyes for a moment and consider what you’d like to know about a picture. Then open your eyes, observe the central aspects of the image, and write them down. “Black-and-white photograph of a woman in a cocktail dress” conveys more about an image than “Picture of a well-dressed woman” for two reasons: (1) Indicating that the photo is in black and white might suggest its time period or the photographer’s artistic style, and (2) noting the style of dress might suggest the significance of the occasion.
Similarly, if I were to use something other than social media as my platform—bad author, bad!—and finally launch an official website, I’d task my designer with creating a logo reading “Mel Finefrock, Author” and would also ensure that they conveyed both color and title in the alt text for the benefit of my blind readers. It’s a small touch, maybe, but it says a lot to a blind person when you go out of your way to include them. I would know.
The In-Text Method
This article about Brittany Maynard demonstrates another form of solid style for image captioning. Instead of placing descriptions in the alt text, People.com labeled each generically (e.g., “Brittany and her family”) and then elaborated in the text accompanying the image. I found that these descriptions added value to the article itself, because I was placed on a level playing field with my sighted peers and was able to witness, although in my mind’s eye, Brittany and her loved ones making memories together before she passed. Brittany’s story is an impactful one, no doubt, but the fact that this article stands out to me years later compared to other, similar pieces owes its memorableness to the image descriptions and therefore speaks volumes about its publisher.
It says a lot to a blind person when you go out of your way to include them.
Either method outlined above works well for the purpose of image description, so use whichever suits you. For example, you might use alt text to describe a company logo, as with my fictitious website, and in-text description for photos in a blog post, such as the one about Brittany Maynard. No matter your approach to image captioning, your efforts will be noticed and much appreciated by blind people who visit your page.
For readers new to HTML, here is a basic tutorial on WikiHow for embedding images and implementing alt text. If you want the embedded image to act simultaneously as a hyperlink, such as with a clickable logo, refer to this article on Catcode.com.