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?
#accessibility#a11y#AltText#ImageDescription#mastodon#fediverse#SocialMedia#netiquette
Please boost to get a larger sample size.
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.”
Check out this new #JWST image of the Crab Nebula 🤩
The milky smoke-like glow in the nebula’s center comes from synchrotron radiation, light produced by charged particles, like electrons, moving around magnetic fields at relativistic speeds.Curvy wisps outline the structure of the pulsar’s magnetic field, which sculpts and shapes the nebula. A faint ring of white material encircles the pulsar, a tiny white dot, at the very center.
https://webbtelescope.org/contents/news-releases/2023/news-2023-137
“The Crab Nebula. An oval nebula with complex structure against a black background. On the nebula’s exterior, particularly at the top left and bottom left, lie curtains of glowing red and orange fluffy material. Its interior shell shows large-scale loops of mottled filaments of yellow-white and green, studded with clumps and knots. Translucent thin ribbons of smoky white lie within the remnant’s interior, brightest toward its center. The white material follows different directions throughout, including sometimes sharply curving away from certain regions within the remnant. A faint, wispy ring of white material encircles the very center of the nebula. Around and within the supernova remnant are many points of blue, red, and yellow light.”
Made some quick and dirty #SwiftUI labels based on Smash Bros.
“Screenshot, iOS Simulator
Four labels, in order:
“Failure”, set in all caps in a purple gradient and white drop shadow atop a jagged black outline.
“Robb Joins the Battle!” with a slight 3D angle. “Robb” is set in white and the rest is set slightly smaller with an orange gradient.
“Clear!”, set in all caps with an orange gradient and thin white outline atop a white drop shadow, with another drop shadow in light gray.
“Game!”, set in all caps with a multicolor gradient and an offset stroke drop shadow atop multiple black and white outlines.”
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.””
You can also describe moving images!
I love this video so much: A navigation camera aboard the OSIRIS-REx spacecraft captured footage of its capsule hurtling toward Earth, carrying a trove of asteroid rocks. Those samples are now being analyzed in Texas.
You can see a thin crescent Earth at left!
#NASA#science#exploration
https://blogs.nasa.gov/osiris-rex/tag/sample-return/#:~:text=NASA’s%20OSIRIS%2DREx%20Spacecraft%20Views,returned%20to%20Earth%20on%20Sept
“This black-and-white sequence of OSIRIS-REx’s sample return capsule descent toward Earth comes from TAGCAMS’s NavCam 1 and was taken in the moments after the capsule’s release from the spacecraft on Sept. 24, 2023. The Sun is visible at the top of the frame, and a thin “crescent Earth” can be seen at the left edge of the image. OSIRIS-REx’s NavCams are used for optical navigation of the spacecraft. NavCam images tracked star-fields and landmarks on Bennu to determine the spacecraft’s position during mission operations. This sequence of images has been processed to remove most of the scattered sunlight, bring out more detail of the capsule and release debris cloud, and prevent the Earth crescent from saturating. Credit: NASA/Goddard/University of Arizona/Lockheed Martin”
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.
SWANT.BMF
“A beautiful white swan, swimming gracefully in crystal blue water. It reminds @dogebromomo of college, and of a certain bit of hazing required of the freshmen rushees. You know what? He should mint this, a commemorative NFT. He can picture it now, the swan with a pair of golf clubs underneath crossed like swords on a crest. The guys will love it, absolutely love it.”
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.
More resources
Here’s a few more resources that might help you.
- My experience of images on the web (axesslab.com)
- Image Description Guidelines (diagramcenter.org)
- Write good Alt Text to describe images (harvard.edu)
- Alt Text as Poetry: approaching alt text thoughtfully and creatively (alt-text-as-poetry.net)
- Alt-text.org: a shared library of image captions
I know not everyone has the time or even thinks about describing the images they post on social media, but if you have a moment, read some of these comments:
– https://mastodon.nz/@WirlOfWirls/109448649809755625
– https://mastodon.social/@ontheotherside/110667634226742768
– https://mastodon.social/@alttexthalloffame/111324842340840588A minute of your time can really make someone’s day.
