This post originally appeared on the ODEP Disability Blog on February 11, 2015, and is being shared here with permission of its author, editor and freelance writer Mel Finefrock. View the original post.
When it comes to photodocumentation via social media, many unknowingly describe their photos by accompanying them with little anecdotes like “Grandma and me at her 80th 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 though, people often overlook labeling or describing their graphics, leaving individuals who are blind at a loss for understanding the significance of them. My hope in writing this article is to encourage the use of image description and demystify the process of implementing it.
Alternative Text
There are two ways to approach describing your graphics, the first of which being alternative text, better known as alt text. What is alt text? Although it’s originally intended to serve as a placeholder for graphics in the event that a visitor to your website cannot download them, the neat thing about alt text is that screenreading software, such as JAWS (Freedom Scientific), Window-Eyes (GW Micro), NVDA (NV Access) and VoiceOver (Apple), pick up on these labels and give people who are blind feedback as to the nature of the image. As such, alt text is a great way to implement image descriptions and make your website more accessible to screenreader users.
Below, I have included two of my own photos – yes, I’m blind and take photos sometimes – for the sake of demonstration. For the benefit of my sighted readers, I have appended additional descriptions to each image, since the alt text isn’t apparent unless you tell your browser to opt out of downloading graphics.
Stormy seascape at sunrise, featuring light play on the water.
A well-worn guitar resting atop the cabinet of a seriously dilapidated piano.
It’s up to you entirely how in depth you go with your image description, but ideally you want to be both informative and concise. Here, I have allowed for more detail because these are works of art and personal to me. The same goes with my author photo, whose description is admittedly not concise by any stretch of the imagination, because in “reading” the paperback upside-down, I was being ironic and wanted to clue my blind readers in on my humor.
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, were you unable to see it. Then, open your eyes, observe the central aspects of the image and write them down. For example, “black and white photograph of a woman in a cocktail dress” conveys more about an image than simply “picture of a well-dressed woman” for two reasons:
- Indicating that the photo is in black and white might suggest its time period or the photographer’s artistic style, and
- Pointing out the woman’s style of dress might suggest the significance of the occasion for which she is being photographed.
Similarly, if I were to finally create an official website for my editorial services and I commissioned someone to design a blue and white logo reading “Editor Services by Mel Finefrock,” I would also ensure that my Web designer conveyed both the color of the icon and its title in the alt text for the benefit of my visitors who are blind.
In-Text Descriptions
This article about Brittany Maynard from People.com is another prime example of good image description. The blog team’s approach, however, was different than mine; instead of placing the descriptions in the alt text, they labeled the photos generically but relevantly, then accompanied each with an additional, in-text description. Personally, I found that the described images lent further impact to the article itself, because I was placed on an even playing ground with my sighted peers and was able to witness, albeit secondarily in my mind’s eye, Brittany and her loved ones making memories together before she passed.
Either method outlined above works well for the purpose of image description, so use whichever suits you. For example, you might use alt text in order to describe a company logo and in-text description for photos in an article, such as the one about Brittany Maynard.
For readers who are newer to HTML, read a basic tutorial on eHow for embedding images in HTML code, including the implementation of alt text. If you are wanting the embedded image to act simultaneously as a hyperlink, such as with a clickable logo, refer to this article on CatCode.
About the Guest Blogger
Mel Finefrock is a graduate of the University of North Texas and has worked as an editor for independent authors, such as award-winning romance novelist Krista Lakes. Her greatest passion is art; as such, Mel writes songs, poetry and even takes pictures once in a while, which might surprise many on account of her blindness.
Also by Mel Finefrock:
