Descriptive, but not alternative

It’s time we do away with the anemic, boring, and utilitarian phrases that provision for accessibility when it comes to describing images in the digital space.

As part of the guidelines for creating digital products that are wholly inclusive of and accessible to all — not just what too many consider to be “disabilities” — there is one specific requirement that I want to cover: alternative text (ALT tag).

y, tho?

Let’s first cover broadly why providing alternative text that describes what is visually happening in/with graphic assets is so important. I could go thoroughly into a Dangent™ about pixels and how those are tiny squares that come together to represent an image that only those with optimal vision can consume, but WCAG’s introductory sentence to the section for this requirement is better than any rant I could unravel into:

Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

I couldn’t’ve wrote it any better beyond adding the other benefit to system text — translation into other languages — but I think you get the gist.

Many publishers and digital product creators comply with this requirement. However, (1) not enough are actually following through on compliance throughout their entire platform(s) and (2) every single ALT description I’ve read has been incredibly stale and dryly functional. As to why this is a “problem” at all we have to first talk real quick about aesthetic consistency.

Aesthetic not ascetic

When digital creators make a site one of the the heftiest resource eaters falls under creative. Here we produce a wide array of deliverables beyond the end product that all of our users/audience access: the user interface. From creative ideation sessions to component inventory catalogues every aspect of a digital product has an aesthetic and standards for consistently applying that aesthetic through all of its many forms and mediums (integrations, copy, typography, spacing, color, structure, wayfinding, animations, transitions, and so on). We do this for the same reason schizophrenia is often an undesirable affliction: more than one personality can be a daunting task to comfortably enjoy.

Aesthetic and tone consistency is also another reason some branding agencies rob clientele with $300k+ rebranding budgets, but I’ll save that rant for another day.

So, all that concerned effort to ensure the writing and visuals fit the aesthetic and then we get to accessibility and one of the following scenarios seemingly always occurs:

  1. Development/UAT runs out of budget and everyone decides accessibility isn’t that important. (You probably spent too much time debating about color contrast ratios or whether WCAG meant their pt values to be read as print or digital pt values.)
  2. Alternative text input was not tasked to a creative or creatively-aware resource, if not the author or resource editor, in the first place.
  3. The team read the ALT tag requirements line way too literally, giving up the idea that the text could be both informative and aesthetically pleasing while also consistent with brand guidelines.

I decided to peek behind the curtains of the editorial, content-first sites that would be more likely to have alternative text accompanying their graphic assets (if only to appease legal, or SEO). I’ve split my the audit into three major buckets: The Good, the Bad, and the Ugly.

The surprise to me is that no major editorial publications I’ve audited make an effort to carry their writing styles and aesthetics to the descriptive regions of their platforms. And that’s if they comply with the accessibility requirement at all.

The Bad

These are the publishers that leave ALT tags empty and make no effort to provide descriptions for the graphic elements on their platform. Grab your rustiest pitchforks and meet me in the town square.

The featured image for a New York Times online article showing the ALT tag but a null value. The image is of a young child with a hawk next to a city center statue of a hawk.
Nytimes.com correctly employs figure and figcaption but often leaves the latter, as well as the ALT value, empty.
The featured image for a Vogue.com article with alternative text that repeats the article's title. The image is of art objects consisting of ceramic interpretations of toothpastes and toothbrushes.
Vogue.com often includes no ALT value at all but when they do it is a repeat of the article title verbatim.
The featured image of a Wired.com article with no alternative text. The image is of an athlete scaling a gradient wall while holding their weight with a thick horizontal pole.
As with Nytimes.com, Wired.com often includes no alternative text for images but do for the photo attribution icon.
The featured image for a Techcrunch.com article showing the markup alongside it with not alternative text for the image. The image is a greenish-yellow tinted photograph of Harry Potter with a logo in the place of the lightning bolt scar on his forehead.
When Techcrunch.com includes ALT values they often don't describe the image in the absolute least as they are too busy either summarizing the article or repeating the article title verbatim.

The New York Time, Vogue, even sites you’d expect to be aware of the need for accessibility – like Wired and TechCrunch — out of so many more publishers do very little to properly provide descriptive text to one of the most important variables of their content: photography and illustration. Granted, you can read/listen to the words of the article and get almost everything you need from them, but why do these publishers pay good money for illustrative accompaniments if they aren’t important? Is it that they are only important for those able to visually read as opposed to listen? That wouldn’t make sense since there is nothing special, that I can tell, in solely visually consuming editorial. How is a strong graphic that shows another perspective to the body content not as important for all users, visual or otherwise?

These publishers do sometimes provide captions for graphic assets, and sometimes they even do so with correct markup (figures with figcaptions) albeit it has been very clearly (especially of recent) been explained that figcaptions are not at all a substitute to descriptive text. Mind, nearly every caption provided for these assets that do receive a figcaption is nowhere even near descriptive. They function more as your traditional caption: providing contextual elaboration to the main content that is tangential or summary as opposed to supportive or descriptive of the image.

What is a sad practice that accompanies this haphazard compliance is a complete lack of attention to illustrations. All these publishers seem to ignore any sort of captioning for illustrations (beyond providing credit to the artist). If there is one thing I’ve learned from Nicholas Blechman and Christoph Niemann it’s that illustration can encompass an exponentially greater number of words than a mere one thousand the idiom purports, and yet no effort is taken to spread this feature to those without visual access to that tome behind the image.

Ironically, where Wired fails to provide alternative text for imagery they will provide not only an aria-label for the photo/illustration attribution icons (under the images) but employ a figcaption for said attribution. That leads me to believe that either the field collection for alternative text is nowhere in the CMS or their team doesn’t fully comprehend the what that alternative text field collection is next to the image upload.

The featured image of a Technology Review article with the ALT failing to properly repeat the image's filename as a proper description.
Unfortunately, my favorite publisher Technology Review seems to have a glitch in how the ALT value is being supplied resulting in useless values. The idea was a good one, but without properly formatted and descriptively written filenames this solution is moot.

MIT’s Technology Review provides alternative text for some imagery, but it is definitely not consistent enough to be placed into another category in my audit. They also employ a system whereby the ALT text field is supplied via the image's filename. This is a good idea in thought, but in practice it can fall apart easily resulting in nonsensical descriptive text. When inline images are used they often rely solely on the figcaption, which serves more as a section summary or pullquote than an image description.

The Ugly

These sites did just enough to comply with the WCAG 2.0 requirements set forth for descriptive text. They often correctly used figure/figcaption in addition to providing a value for the ALT tag.

The featured image of a Guardian online with ALT text that repeats the article title and a caption that acts more as a pullquote in that it doesn't explain or describe the image.
This is a perfect illustration of both a caption and alternative text completely missing the power behind an illustrative punch.

In some cases, like the featured image for The Guardian’s “How the religious right gained unprecedented access to Trump”, they completely miss the mark by insufficiently describing the subject matter of the image. The powerful visual metaphor of Trump staring off into a see of hands raised like saluting Nazis is utterly lost with their weak ass “trump with people praying” descriptive text.

You kidding me!? SMDH

The featured image of a Mic article showing both the article title and ALT text, both of which are the same exact text.
Mic likes to ensure those using screen readers know exactly what the title of the article they are reading is.

Another great example of those trying but coming up a wee bit short is Mic. Although every article’s featured image lazily repeats the title of the article for the image’s alternative text (or the caption, verbatim, for inline images), they have at least put an effort into meeting the requirement. And, generally speaking, the text does tend to describe the subject matter in the images. However, it’s still feeble and often because the featured images are only mirrors of the article title their usefulness becomes moot for non-visual readers.

Anna Wintour's head floating over a black background, eyes blinking in disbelief.

Vogue does the same as Mic with featured images, simply repeating the article title and providing no description for the image. Unlike Mic though they appear to do this for every image in the article, not just the featured image. Can you imagine how this article sounds through a screen reader?

Image of Jeremy Bentham's mummified head in the content entry field of Medium.com. There is placeholder text behold the image that reads "Type caption for image (optional)".
GGG Medium gives you the option for a caption, but seriously guys it's super optional. Also, there is no way to enter ALT text.

Medium, despite (or probably due to) being a hub for the people’s voice, is a complete mess. This is likely due to the content being composed by the mass public — as opposed to a singular team that is aware of the need for consistency and contemporary standards — which puts the emphasis of knowledge and input on the writer, and that writer pool spans a wide gamut of experience and industry focus. However, Medium doesn’t help this matter since their article composer not only lacks the ability to provide a value for the ALT tag but also does very little to educate the author on the need, usage, and standards for describing graphics/imagery. The closest you can get to composing descriptive text for a visual asset is a figcaption which Medium goes so far as to suffix with “optional”. This is a prime example of letting [sexy minimal] form force [stripped] function.

The Good

Enough with the shaming. How about we celebrate those doing this properly? The following sites exceed compliance, but none of them carry flavor or aesthetic consistency into composing the alternative text. Still, they should be applauded for their prosthelytizing of accessibility and the near perfect descriptions provided.

A11y, of course, does this perfectly. A great example is their rare inclusion of infographics and descriptive text that not only describes but adds more detail to the article, even beyond the caption.

A pie chart graphic from an A11y article alongside its markup showing the alternative text reading percentage values expressed in the chart.

Conveniently enough, Axess Lab has written many pieces on inclusive and accessible design and development, especially a particularly poignant one talking about accessible digital versions of comics. Axess Lab also ensures every graphic used on the site includes a very descriptive ALT tag.

A comic panel from an Axess Lab article with page markup alongside with an ALT value of "Comic with a deamon sitting on the back of a girl who's face down on the floor. Deamon says: "We're accessible!" The girl answers "Horray.""

Tatiana Mac, an art director, does an absolutely brilliant job of describing every graphic inch of her site. Her descriptions are powerfully visual and do a great job of turning text into imaginary visuals. Tatiana goes so far as to provide detailed descriptive text for a page that is entirely visual! That is true dedication to inclusivity. In addition, most of her graphics are vector-based. A+ for Tatiana!

Image from an article by Tatiana Mac with page markup alongside. The ALT text reads "Trio of disable folks, situational, temporary, and permanent illustrated in a flat style in primary colors."

How can we fix this?

Before going into details, I’d like to employ another, final real world example. A pet favorite publisher of mine, Butt magazine, fails to provide descriptive text at all. Now, you might oppose this qualm of mine since most of these images are portrait, the majority of which are half-naked to completely nude men. However, they have an exceptional opportunity to provide some charm to alternative text if they ever get around to building this into their content entry process. They completely lose out on conveying their snarky, naked, and unabashedly gay aesthetic by (1) not having descriptive text at all… anywhere :[ and (2) not using descriptive text to describe, in detail, the many beautiful asses and cocks on display. Beyond that, in many cases, it is the opening up of the interviewees space in such a personal way the creates an entire experience of its own. All lost for those unable to see the images.

The first step to seasoning accessibility with aesthetic is to change how contributors approach this requirement, and ultimately deliver their creative. Whether the individual is an illustrator, photographer, writer, editor, or content entry specialist: the impetus on describing the visual asset should be part of the final piece. For instance, maybe illustrators include descriptive text with the delivery of their asset to the art director. Alternatively, the subject of consistency concerning descriptive text may flex across an entire team, depending on other burdens. The more individuals we include in our readership, the better we serve the public, and sometimes that is an undertaking best suited for a team as opposed to a single role.

Ultimately, whether the submitting author, content manager, or illustrator is composing the alternative text there should be an overarching rule that the voice of the descriptive text should mimic that of its contextual environment: the article itself as well as the brand/style guide standards.

I don’t feel this is as difficult as many might fear. Artists and authors do what we do because we want to share our creations/content with as many people as possible. If we are aware of a group of individuals that want consume our works but are unable, that should be motivation enough to add another small task to our work. After all, what’s the worst that could happen? You sink a little more expense for content creation only to gain a new, greater percentage of readership/consumers? Seems like a win to me.

Disclaimer

They did nothing wrong

If you’re familiar with WCAG 1.1 Perception then you’re probably wishing you could slap me right now. After all, how dare I call out those editorial giants when the documentation specifically states only graphic assets that are “necessary” for user interaction or input require alternative, descriptive text.

This is true. I’m not arguing against that point. Not including alternative text at all should be tantamount to sin, of course, but not aligning that text to brand aesthetic is more of a faux pas than an act against god. However, not giving alternative text (and even captions) the same amount of energy, money, attention, and focus the other recipient elements of aesthetic standards are afforded should be considered a taboo, in my opinion. Let’s make 2020 the year of clarity for all, not just those with perfect, panoptic vision.

Figcaption ≠ ALT

This has been making the rounds, so you can read more on the figure and figcaption elements thanks to Scott O’Hara. The TL;DR of that article is that figcaptions are not substitutes for alternative text. Thank you for providing a caption for the image. You get extra points for using the figcaption element even, but a caption is not a legitimate stand-in for the ALT tag. This goes the same for descriptive filenames. Neither are safe alternatives to alternative text.

An aria for ARIA

So, your image isn’t an actual <img> or <picture> element: now what? There is always a fix in the wild. Always. It may not be pretty, but if you look you shall find. We all love those huge, sexy images that cover the entire screen. We also want them to flex and pull relative to their contents and the viewport. More often than not that means the image needs to be a background asset and you can’t provide a div with background attributes with an ALT tag. You can, however, provide the div that background is set to with an aria-label, which will serve as the value for descriptive text.</picture>

ALT text character limits

There are some misinterpretations and false rumors going around — thanks, Instagram — that “typical” alternative text usually clocks in around 100 characters. I want to scream bullshit since nowhere in any documentation I’ve stumbled on states a limit to characters. [Call me out on this, if you’ve actually found documentation to the contrary.] However, one screen reader tested by Terrill Thompson, JAWS 6.0 (which is many, many versions old at the time of posting this) doesn’t seem to be able to handle more than 125 characters at a time per graphic. According to Terrill, this results in a pause between each 125 character chunk of alternative text for a single graphic. That is downright stupid, but since Freedom Scientific doesn’t mention these specifics anywhere on their support documentation for JAWS this may or may not have been fixed since 6.0.