Alt text is a written description of an image posted online. Alt text can also be added to images embedded in digital documents (PDFs, Word documents, Google docs, presentations, etc).
Alt Text as Poetry
Alt text has multiple uses, but we are focused on its role as an essential part of web accessibility.
Alt text allows visual content to be accessible to people who are blind, low vision, or have certain cognitive disabilities.
Blind people typically use software called a screen reader to access digital displays. The screen reader goes through the text on the screen and outputs it to a synthetic voice or refreshable braille display. On a website, a screen reader might readout options in the navigation bar, followed by the title, the first paragraph, the second paragraph, etc. When a screen reader encounters an image, it’s unable to “read” it. So instead, it looks for the alt text — a description of the image embedded in the code — and reads it out. This is how alt text functions as a non-visual alternative to an image.
Screen readers can’t read graphics or photos, so provide a caption or comment repeating any important text within an image online. Even when images have no text content, you should provide screen-reader users with as much information as everyone else by conveying the image through text.
It is helpful to keep a “bank” of pre-written image descriptions and alt text for images, elements of images and backgrounds the campaign uses often. You can just copy and paste instead of re-writing it every time.
The A-Z of Effective, Inclusive Campaigns
Good alt text means that screen reader users get the same ‘meaning’ from the page as a fully sighted user.
Writing great alt text: Emotion matters – JakeArchibald.com
The relevant parts of an image aren’t limited to the cold hard facts. Images can make you feel a particular way, and that’s something that should be made available to a screen reader user.
“Emotion matters” really changed how I think about writing alt text. Léonie wrote a longer article on the idea, which I recommend reading.
So just what is a decorative image? It seems to me that one person’s eye candy is another person’s emotional link to a website.
A good alt text can conjure up wonderfully stimulating mental images. A friendly smile is the same in print, photo or wax crayon. Whether you listen to an image or see it, the emotional response is the key factor, so why should we recommend that these emotion rich images should be given a null alt text and hidden from screen reader users?
Perhaps it’s time we introduced another group of images: Emotion rich images and encouraged the practice of providing descriptive alt texts for them. If people don’t want to listen to the alt text, they won’t. If people don’t want to pause and look at the image, they won’t. In either case, it’s good to have the choice.
Text descriptions and emotion rich images – Tink – Léonie Watson
So much emotion is lost with conventional alt text wisdom.
- “One person’s eye candy is another person’s emotional link.“
- “It’s time we introduced another group of images: Emotion rich images and encouraged the practice of providing descriptive alt texts for them.”
That’s a welcome reframing of decorative images that we’ll apply to our website.
Alt text reads:
Two women of color, and power, claiming space in the middle of a street. At left, Aubrie, dark braid cascading down her white jacket to her long pleated skirt, her hands folded elegantly and her expression neutral as she gazes from her black throne of a power wheelchair. At right, Haben, looking like the showstopping model she is in her Levi’s denim jacket and flowing patterned dress, her Seeing Eye dog’s leash draped like a designer bracelet on her wrist, voluminous hair framing her face as dappled sunlight illuminates her brilliant smile. (Description written by Aubrie.)
Haben Girma👩🏿🦯 on Twitter
Alt text is an essential part of web accessibility.
Alt Text as Poetry
It is often disregarded or understood through the lens of compliance, as an unwelcome burden to be met with minimum effort.
How can we instead approach alt text thoughtfully and creatively?
- Alt Text as Poetry
- Accessibility: Image Alt text best practices – Siteimprove Help Center
- An alt Decision Tree | Web Accessibility Initiative (WAI) | W3C
- How to Write Alt Text and Image Descriptions for Instagram – Perkins School for the Blind
- We Need Your Help: Specifying Race and Gender in Image Descriptions
- Instagram Alt Text: How to Use It Correctly (Complete Tutorial)
- How to Add Alt-Text in Facebook – Accessibility for Online Teaching and Learning
- 10 Things to Know About Twitter’s Alternative Text for Images – Lireo Designs
