What is alt text?
Alternative text (or alt text, in short) is the text you can use to describe an image when you publish it on your website or social media.
Why is alt text important?
Imagine, for a moment, that your browser stopped showing you images. You would still see them referenced in articles, you’d read conversations about them, people making jokes. What would this experience be like for you? You would certainly feel pretty left out.
This is often the reality for people who are blind or visually impaired. But things are getting better!
Just wanted to thank all in this instance for adding image descriptions. To a totally blind person like me it means a lot to have a picture in my mind of your images, especially the animal pics.
I just want to say for my first post to the #Fediverse that I've already seen more #alttext in the last couple of days than I've literally seen in my entire life. I don't know what it is, but as a blind user it's making me emotional to be able to actually interact with content. Think I'll write an introduction soon.
#accessibility #Mastodon #redditMigration
And mind you, captioning your images doesn’t only help blind people. It can help people understand the context for the image, explain a pop-culture meme, provide a placeholder for a missing image, or image loading over a slow internet connection.
When we all work together, we make the web a better experience for everyone.
Every now and then mastodon.social (and/or my connection) is slow and I only see blurs instead of images. Thanks to everyone adding alternative text to images! Just like with curb ramps, the inclusion of some ends up benefitting other, unexpected ones!
@stefan I'm no visually impaired, but sometimes I need a little help to fully understand social nuances in images. I've found ALTs useful once in a while.
And if that doesn’t convince you, you might soon find yourself left out.
So, what do you do when you see a good post on here with an image that doesn't have a description/alt text?
That’s great! So how do I add alt text to an image?
Many publishing tools on the web, including social media sites, let you add description to images you upload. Here’s just a few examples:
Nice! But how do I know what to write?
Look at the picture you’re uploading, and imagine a friend next to you who can’t see it. How would you describe it to them? What are the important details? Why is it funny? Or sad? Why are you sharing it?
While alt text image descriptions aren’t poems, writing them has felt like practice for writing poetry. I wasn’t expecting that.
I am floored and fascinated by the near-literary quality of many of the descriptions of images that people carefully craft when appending pictures to their posts on Mastodon. Some of them will reveal a detail that had escaped my attention. Others will help me understand a subtle joke I had missed. Others still are true poems. ALT are their own microblogging world that reveals itself as you hover on a picture. And I hover, and hover.
There are many ways you can approach captioning an image. You can get really detailed and descriptive.
Optometrist George Mayerle’s 1907 multicultural eye chart is a fabulous piece of graphic design in its own right. https://circulatingnow.nlm.nih.gov/2023/08/03/mayerles-lithographed-international-test-chart-1907/
“Running through the middle of the chart, the seven vertical panels test for acuity of vision with characters in the Roman alphabet (for English, German, and other European readers) and also in Japanese, Chinese, Russian, and Hebrew. A panel in the center replaces the alphabetic characters with symbols for children and adults who were illiterate or who could not read any of the other writing systems offered.”
Happy International Women's Day! Just a reminder that Margaret Hamilton is a total badass and early innovator in the field of Software Engineering. Her pioneering work in task prioritization allowed the Apollo 11 moon landing to proceed even when the onboard computer became overwhelmed with too many tasks at a critical point in the mission. The software she wrote was flexible enough to ignore low priority tasks so that the computer could focus only on the tasks necessary for landing the LEM safely on the moon. Without her task prioritization routines in place, it's likely that the landing would have had to have been aborted.
“A black and white photo from the 60s showing Margaret Hamilton in the Apollo Command Module. She’s lying on her back as the astronauts would be at launch and flipping a switch on the huge instrument panel above her while smiling for the camera. She’s a young woman with long straight hair and glasses. She’s wearing a long-sleeve dress with a squiggly pattern. She projects the ease and confidence of someone who is having a blast being completely in her element with mastery of her domain.”
Extensive alt text
“A wall painted blue, but the paint is decaying to the point that the top center is bare grey plywood. The crack predominately horizontally and curl in a manner that looks like waves or paperbark peeling. The blue that remains is in two tones, with much of the top a darker tone with the paint border such that it looks like spraypaint. In the lower left, a circular sticker that is also painted light blue wrinkles vertically with its right edge lifting enough to cast a sharp shadow to the right.”
And you can also have some fun with it.
I had a friendly hitchhiker on my windshield today!
“A lovecraftian horror crouches on my windshield next to the spattered remains of its weaker cousins. Mostly white, it’s is adorned with stripes reminiscent of a creature designed by Tim Burton. One may reasonably expect this demon to drag you screaming into hell.”
Do you fear you've being cheated? That your barrel of eels isn't all it seems?
Fret not! In 1483, tired of shady salesmen — especially Dutch & Scottish ones — Parliament decreed that a barrel of eels must be full, & hold 42 lbs. of fish.
PLUS, all the eels must be edible! #eels #medieval #history #eelscam
“Meme. Medieval image of a cooper making a barrel. He is standing in front of one barrel with a wooden mallet and chisel, clearly hard a work. Around him are several other barrel, in various states of readiness. He’s a busy fellow. He is wearing a pink shirt and blue tights, and he doesn’t care about your ideas of gendered colors. He is clean-shaven, with short hair beneath a red cap. He’s wearing an apron, and black shoes. He is almost certainly the best medieval cooper that you’ll see today. Maybe all week. There are holes in the barrel lids, so we shouldn’t discount the possibility that he is smuggling pangolins. People often think that pangolins are the most smuggled animal on earth. They’re not, though. It’s eels. Pangolins aren’t even the most smuggled mammal: that’s humans. Regardless, pangolin smuggling is bad news, & if this cooper is engaged in it we should shun him. Meme text reads: “Eels go in the barrel. Barrel goes in the market. Eels are in the market. Good eels.””
Want more examples? Follow @alttexthalloffame@mastodon.social!
Question for #blind #VisuallyImpaired folks, what kind of image descriptions do you prefer?
What about images posted by an automated account?
This can be a bit tricky. If you have a collection of images, you can just describe each image.
Wild Things by Laura Kay #books #literature #dedication
“For everyone I’ve ever had a crush on. Thanks for all the material.”
And again, you can get creative with your descriptions.
CHIPMUNK.BMF
“A color illustration of an Eastern Chipmunk. Originally named Sciurus striatus by Linnaeus, the chipmunk’s scientific name was later changed to Tamias striatus by Johann Karl Wilhelm Illiger, the same zoologist who introduced the taxonomic order of Proboscidea for elephants and mastodons. To think, Xoel muses, there’s a connection, however tenuous, between chipmunks and mastodons.”
In some cases you might not know exactly what’s in the picture by the time it’s posted. Here’s an example from a project I worked on. This account shares images from online webcams around New York. I described what each webcam typically shows, and added some information about the weather.
Statue of Liberty TorchCam
📷 https://www.earthcam.com/usa/newyork/statueofliberty/?cam=liberty_crown
🗺️ https://www.google.com/maps/search/40.6892,-74.0445 #nyc #webcam #city
“This webcam usually shows a view from the top of the Statue of Liberty, facing downwards. It’s a clear day in New York. It’s 84 °F.”
And here’s another project of mine. Here, I have no idea what each image will look like. You will have to think about the significance of the images in general, why they’re being shared.
Curated anonymously.
“A randomly generated abstract digital painting that consists of one or more lines, straight or curved.”
I hope these examples inspired you, and that you will do your part in making the web more accessible for everyone.
Here’s a few more resources that might help you.
- My experience of images on the web (axesslab.com)
- Write good Alt Text to describe images (harvard.edu)
- alt-text.org: a shared library of image captions