Welcome back to our accessibility series! In this series, we’re looking at web accessibility at LabXchange. We’ve already covered accessibility in product design, inclusive language, accessibility in web development, and accessible design. This month, we’re delving into alternative text with our writing team.
Alternative text (alt text) is a text description of an image that is read out loud by screen readers. Screen readers are used by blind and visually impaired persons, as well as people with various other disabilities that make it difficult to read visual text, such as dyslexia. Alt text is an essential part of our commitment to making our content accessible and inclusive.
We invited two members of our writing team, Charne Simpson and Lilley Berrington, to tell us more about writing alt text and why it matters. The writing team has also put together a short guide on how to add alt text to your personal or business social media posts.
The importance of alt text lies in giving screen reader users access to the same information and experience as other users who can see images. For example, speaking as a screen reader user, without alt text I would be excluded from benefiting from the level of understanding that an image in a learning asset is meant to provide. This is important, because often images in learning assets convey additional information that is not in the text of the asset.When it comes to other content, such as blogs or social media posts, alt text descriptions make me feel included by allowing me to perceive the aesthetic and style that the creator is trying to convey through their image choices. Some screen reader users like me are interested in knowing what our friends, favorite influencers or celebrities, and other content creators look like, what clothing or accessory choices they make, or what they are doing. When a friend of mine described her and her husband’s wedding photo on Facebook, I was much more immersed and interested in her posts than I otherwise might have been.
Alt text is equity. Well written, descriptive, alt text means that screen reader users can get an equitable online experience.
Alt text should be kept short and to the point as far as possible, without omitting important information. Additionally, when writing alt text, I try to communicate relevant information without using flowery language or giving additional contextual information that is not obvious to users who visually access the image.
It’s important to consider the meaning that the image is communicating. The context is also an important consideration. If the image is part of a fashion blog, for example, the style and color of an outfit should be mentioned. But, if the image is educational, the style and color of a scientist's outfit may be of less importance.
A common myth about alt text is that it must have a 140 character limit. While it is important to keep alt text concise, 140 characters may not be enough to convey all important information. Contrary to myth, the screen reader does not cut off the description at 140 characters, but merely splits it up into multiple graphics with shorter alt text. The screen reader will continue reading the text when scrolling with the down arrow key.
Another myth is that alt text is simply a “nice to have.” Alt text is essential to the inclusion of people with disabilities. Any platform that conforms to the Web Content Accessibility Guidelines (WCAG) must include alt text. Many organizations around the world do conform to these guidelines, and some countries even include compliance to accessibility standards in their legislature relating to the public and/or private sectors.
.png)
It’s a misconception that alt text and image captions are interchangeable. Captions are additional information; alt text is a detailed description of the image. Another misconception is that alt text is exclusively for people who use a screen reader. Alt text can also help with SEO. Without alt text, your images are much less likely to rank on Google Images.
As a screen reader user myself, I have knowledge of what a screen reader user is looking for in an alt text description, and what qualifies as alt text that gives enough, but not too much information. Not being able to see the image I am describing helps me to ask the right questions to gain an understanding of the image. Then, I can convey that understanding through my descriptive skill as a writer and my knowledge of the audience. For a writer who can see the image, the skill of being able to accurately put what they see in an image into clear language is important.
In an educational context, a little bit of learning design knowledge can be really useful when writing alt text. Understanding the learning outcome, and how images help users reach that learning outcome, can inform what to include in the alt text. The skill of writing simply, and including detail without using too many words, can also be very useful for writing succinct alt text that is still meaningful.
One way you can make your online content more accessible and inclusive is by adding alt text to your personal or business social media posts and images. To help you get started, our writers put together this handy basic guide, for how to add alt text to images across various social media platforms.
Try to keep your alt text to just a few sentences maximum. And while you should try not to omit details, focus on the most important aspects of the image. It also helps to keep the purpose of the image in mind, and consider what the image is trying to communicate or convey visually.
Many people include alt text for their Instagram posts in the image caption or as a comment. Instagram also allows you to embed alt text into a post. Simply select “Advanced settings > Write alt text” when uploading a post, and write or paste your alt text in the textbox provided.
Example: Alicia stands looking out of a big window. Her hair is in a ponytail and she’s holding a cup of coffee. She’s wearing yellow pants and a gray tank top. (Image from @CreateHERStock on nappy.co. Alt text sourced internally. Please note that this alt text was written by our team as an example, and is meant fictionally.)
.png)
Similar to Instagram, you can include your alt text in the caption of any image you post to Facebook. Or, you can use Facebook’s built-in alt text feature by tapping the three-dot menu in the top right-hand corner of your image, or tapping and holding on the image, and selecting “Edit alt text.”
Example: Dog sitting on a queen bed with Brooklinen sheets and duvet comforters on it in dusk blue, sienna, and macadamia tan. (Source)
.png)
On Twitter, all you need to do is select “Add description” after you’ve uploaded an image to a tweet. Then, you can write or paste your alt text into the textbox provided.
Example: A starfield is speckled across the image. They range from small, faint points of light to larger, closer, brighter and more fully resolved stars with eight-point diffraction spikes. The upper-right portion of the image has wispy, translucent, cloud-like streaks rising from the nebula. (Source)
To add alt text to an image on LinkedIn, click “Add description” at the top-right of your image and write or paste your alt text. Example: A cartoon illustration of a business person giving a presentation to a small group of people. The people in the audience look interested and engaged. (Image by storyset on Freepik. Alt text sourced internally)
For some more examples of well-written alt text for images posted to social media, visit disability activist Jen Campbell’s Instagram page. Or check out this great article from Hootsuite.
Subscribe to our newsletter for future blog posts, in which we’ll profile more of the teams working behind the scenes of the Racial Diversity, Equity and Inclusion in Science Education project.
.svg)
.svg)
