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).
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.
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:
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.
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 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.
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.
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.
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
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.
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?
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.
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.
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.
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!
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.
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.
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.
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>
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. ∅