One of the things that I love (I’m serious, I love this) is how the simplest concepts in web accessibility span design, development and content creation.
Take something like alternative text for an image. We usually consider the task of creating alt text for an image to be fairly straightforward—and often it is. However, sometimes the process of coming up with the besta alt text for a particular scenario, in a given context, requires one to dig a little deeper. It’s this digging that I find fascinating.
I’m a big advocate of the concept of front-loading important information at both a macro- and micro-level in our content. Let’s look at each of these in turn.
Front-loading at the Macro-level
At a macro-level, CNN does a pretty good job of including a bulleted list of story “highlights” that give you a decent summary of an article before you read it. See Figure 1 for an example.
Figure 1: Screenshot of the CNN article, An iPhone case you can eat by Doug Gross, showing 3 bullet points called Story Highlights
The Story Highlights section serves multiple purposes, one of which is to provide a snapshot of the article so that one can more readily answer the question, “Is this article something I want to invest the time in reading fully?”
That’s pretty straight-forward, but does the same principle hold true if we zoom in?
Front-loading at the Micro-level
At a micro-level, we often use content to help people do the same thing. While it’s not the only reason that microcopy is important, good microcopy certainly aids repetitive tasks—such as helping people determine whether the content in front of them is information that they want to investigate further.
Let me illustrate with an example.
I regularly refer to an article I wrote last year, Overlays and Lightboxes: Keys to Success.
In that article, I discuss the alt text that was used for an image contained in a link that launched a video about the TapType keyboard. The original alt text was:
<img src="../Thumbnail.png" alt="TapType">
When we tackled the alternative text for this image, we thought that it should not only contain more detail, but that it should front-load the important content by letting the user know that the link was actually to a video about the TapType keyboard. I suggested:
<img src="../Thumbnail.png" alt="Video: Features of the TapType keyboard" />
Not only does this revised alt text provide more detail, but we’ve included the word “Video:” at the start of the alt text. With this change, people using a screen reader or a braille display will get that information first, and will be aware that the link will take them to a video. If the alt text had simply read “Features of the TapType keyboard” it wouldn’t have communicated the full picture. Users wouldn’t know whether the link pointed to an HTML page, a PDF, a video or something else entirely. To address this, we took the time to place the important words up front.
Sorted, right? Well, not quite.
I’ve given this explanation at least a dozen times when I’ve used the example in my workshops. However, last week I ran a full day “Accessibility for UX Designers” workshop as part of the awesome Ready to Inspire conference in Leiden, Netherlands. I explained this example the same way as I’d always done: the alt text of “Video: Features of the TapType keyboard” puts all of the important content at the front of the alt text.
Except this time I had a realisation.
I caught myself mid-sentence, and questioned my tried-and-true example. I thought, “Is that always the case? Is this the best order to present this content, such that the most important content comes first?”
And I realized it wasn’t.
There were scenarios that came to mind when other content would be more important. On this site, in this context, where the content was entirely about the TapType keyboard, the words “Video” and “Features” are the most important words.
But consider a site that may compare a number of different keyboards. In that particular case, the fact that the video is specifically about the TapType keyboard is actually more important, and would distinguish it from videos about other keyboards.
On a keyboard review site, the most distinguishing, front-loaded alt text might be:
<img src="../Thumbnail.png" alt="Video: TapType keyboard features" />
Can you see it? In this scenarios, the words “Video:” and “TapType” are now the most important words, so we’ve elevated the words “TapType” closer to the front of the alt text.
It’s a very small difference, but it highlights the fact that you should always put a lot of thought into what the alternative text should be for an image. Sometimes it is simple, and sometimes it is more complex.
Spanning Multiple Worlds
Getting this aspect of accessibility right depends not only on content, but also on context. What is the person using the site trying to accomplish at any given time? What are their goals? What is their mindset? How do they approach a particular problem? And how, then, do we write our alt text to fit their mental model?
And that is the reason that I love accessibility. It’s a part of UX. It’s built right in, and is something that we need to take into account at every level of design, development and content creation. Because when we take into account the clarity of alt text in our content and in our interfaces, we can create something that more closely matches people’s expectations, that speaks to them in their language, and that helps answer their questions. When we take that level of care for something that seems as simple as alt text, we show that we care for nuance, for subtlety, for detail.
And we show that we care for the user experience for everyone—including people with disabilities.