One of the easiest entry points in accessibility, especially as a content person, is through writing alternative text for images. Writing alternative text provides a means of understanding images for blind users, low-vision users, and users who have images disabled on their web browsers.
There are some exceptions to note when implementing alternative text, and when in doubt, consult the authority on digital accessibility, the World Wide Web Cornsortium, or W3C, who publish the standards on accessibility, the Web Content Accessibility Guidelines.
W3C’s guidance on images, or non-text content is as follows:
All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below.
The exceptions listed include control or input, time-based media (such as video), tests, sensory experiences, CAPTCHA, and images for decoration and formatting purposes. Visit the site to read the whole SC 1.1.1 guideline for non-text content.
Below, I’ll provide some tips on how to approach writing alternative text for your content.
Do
Learn formatting
This may seem basic, but many content people come from writing backgrounds rather than technical ones and may have zero experience with the web when they are hired. Even worse (but not surprising), they won’t be adequately trained on their content stack. I’ve seen this a lot and it leads writers to fear the markup language they’re working in—rather than trying things out, they just copy examples they see and keep their fingers crossed. This is especially problematic (and rampant) with alternative text, which is often absent or simply “image”, which leads these newbies to believe that is the correct way to do things.
Here is the alternative text syntax for a few markup languages:
-
Markdown:
[This is where your alternative text goes.](the_path_to_your_file_here.png) -
HTML:
<img src="the_path_to_your_file_here.png" alt="This is where your alternative text goes.">
Determine meaning
Writing alternative text is easy. Writing good alternative text is hard. But writing good alternative text should always be the goal, after all, the image is there for a reason, right? To write good alternative text, write what the image conveys. How or why does it add meaning to your text? What does a user experience or understand when they see this image? Make sure your users who rely on screenreaders can also experience that. Just make sure you don’t confuse “meaning” with “mood” (see: Add it everywhere)
Learn a little bit about screenreaders
Wait what? This will help me write alt text? Well, yeah…this is the technology you’re writing for. Understanding a bit of how they work will help you learn about how your writing is being read. Imagine this: you’re watching a play and all the actors are reciting the stage directions. If you don’t write for screenreaders, your alternative text could sound like that to your users.
Don’t
Keyword stuff
For the love of Pete Sampras do not load your alt text up with keywords for SEO! This is apparently a common marketing practice, much to the chagrin of the accessibility community. While it’s true that adding alternative text to your images does help SEO (search engine optimization), it is not its purpose. Using it in this way only serves to frustrate users who rely on alternative text for understanding. Don’t be this guy.
Say too much
This is actually tricky—especially if you’re working hard at conveying meaning. But alternative text has character limits, typically around 100 characters (Functional Accessibility Evaluator 2.3 ) due to some of the functionalities of screenreaders (remember to Learn a little bit about screenreaders). Best practices suggest being as succinct as possible, so try to distill the image down to its core meaning or intent without getting lost in extraneous details. If 100 characters seem impossible, if you’re describing a complicated graph for example, you can actually use a different image type to increase your bandwidth—another good reason to learn a little bit about accessibility is to understand all the possibilities.
Add it everywhere
This may surprise you (it did me), but not every image needs alt text. While many images contribute to your content, some images are just there to break up large blocks of text or to look pretty. In web accessibility, these images are called decorative images and they are treated different than say a chart that shows the results of a survey. Decorative images are actually skipped by screenreaders. This allows the reader to maintain their focus on valuable content without being interrupted. For example, “Photograph of an amazing Tuscan sunset” being read out in the middle of a panzanella recipe (an amazing salad, by the way).
Summary
Wow, all this writing about alternative text and not a single image? Fair. However, there are better resources to learn how to write alternative text (I will list them at the end), as I want to avoid regurgitating what others have written. What I want you to walk away with is that alternative text is not simply a description of an image, but rather a meaningful interpretation of an image, requires an understanding of technology, and that writing skills only touch the surface.