Alternativa texts are used for two purposes<ol><li>If an image failed to load, you should add a text to tell user what this image was supposed to be.</li><li>For whose that use screen-readers or one of various types of text-to-speach services, they wanna your text descibes the image</li></ol>

The importance of alt text

You want to focus on describing the physical aspects of the picture and speak in plain language. Resist the urge to be ornate or overly effusive with your descriptions.

Avoid flowery language

<figure><img alt="Swirling paint in shades of purple that looks like stone marble." src="https://miro.medium.com/max/500/1*q3rftUnXXNksYaPSrO1ekg" width="785" height="442"></figure>A question that I frequently get when I talk about accessibility for social media is, “How do I write good alternative text for the pictures I post?”If you’re not familiar with alternative text—more commonly known as alt text—it’s the written copy that describes the content of an image in a digital space and plays a significant role in making the online world more inclusive.<h1 data-selectable-paragraph="">The importance of alt text</h1>The purpose of alt text is two-fold; if an image on a webpage fails to load, the alt text will indicate what the missing image was supposed to be. It’s also vital for anyone who uses a <a href="https://www.afb.org/blindness-and-low-vision/using-technology/assistive-technology-products/screen-readers" rel="noopener ugc nofollow" dir="ltr">screen reader</a> or text-to-speech technology to consume digital content because the alt text is meant to accurately describe the photo out loud to the user.While adding alt text to images on websites is mostly considered a common best practice at this point, social media is only just starting to catch up.Most of the popular platforms like <a href="https://www.facebook.com/help/214124458607871" rel="noopener ugc nofollow" dir="ltr">Facebook</a>, <a href="https://help.twitter.com/en/using-twitter/picture-descriptions" rel="noopener ugc nofollow" dir="ltr">Twitter</a>, <a href="https://help.instagram.com/503708446705527" rel="noopener ugc nofollow" dir="ltr">Instagram</a>, and <a href="https://www.linkedin.com/help/linkedin/answer/109799/adding-alternative-text-to-images-for-accessibility?lang=en" rel="noopener ugc nofollow" dir="ltr">LinkedIn</a> have had the ability to add alt text for at least a couple of years now, but it’s not something that is often stressed by social media professionals as a best practice or even the channels themselves. In fact, Twitter users previously had to flip a switch if they wanted to add alt text to their photos, something that the platform recently <a href="https://www.socialmediatoday.com/news/twitters-making-it-easier-to-add-alt-text-descriptions-to-uploaded-images/578731/" rel="noopener ugc nofollow" dir="ltr">changed in May 2020</a>.Thankfully, more people have begun to realize how important alt text actually is along with other accessibility best practices for social media.<h1 data-selectable-paragraph="">Words bring the picture to life</h1>If you’ve never written alt text before, it can certainly feel a little daunting, especially when you know that whatever you write could have a direct impact on a user’s online experience.Admittedly, even I still stress over the alt text I write because I do not have a serious vision disability and, therefore, do not personally rely on it to navigate digital spaces. My knowledge of alt text is based entirely on my experience as a marketer and the research and testing I have done using my own social media.When it comes to crafting effective image descriptions, these are some of the tips that I keep in mind.<UL><LI>Avoid flowery language. You want to focus on describing the physical aspects of the picture and speak in plain language. Resist the urge to be ornate or overly effusive with your descriptions.</LI><LI>Keep your alt text relatively short. Facebook will politely suggest 100 characters or less for your alt text while LinkedIn actually cuts you off after 120 characters. Instagram and Twitter are less strict with their limits. However, most screen readers break up alt text after 125 characters (including spaces).</LI><LI>Exclude “picture of” or “image of”. It’s already assumed that your alt text will be for a photo or image, and a screen reader will more than likely say “image of” before or after reading your alt text. Don’t waste your characters on redundant work.</LI><LI>Avoid posting images with flattened text. If you’re posting a text-heavy graphic or flyer on social, you’re going to need to add alt text for all of the flattened copy. In this case, it’s better to link to a webpage or somewhere that has the text in a readable format. If you drag your cursor over the text on an image and it doesn’t highlight the individual words or characters, it’s not readable, which means that it’s really not actionable either.</LI><LI>It’s okay to use proper nouns and names. If a well-known person, place, or thing is in your image, go ahead and name it/them. When Senator Elizabeth Warren was running for president, her social media team always used her title and name in alt text for the images that featured her because it just made sense. The social media was for her and about her campaign.</LI><LI>Don’t feel like you need to describe everything. If something in the image is significant to understanding the whole picture or post, describe it. If it’s not, skip it and save your characters for the important stuff.</LI></UL><figure><img alt="A black cat with green eyes is seen outside through a group of palm tree fronds and trunks." src="https://miro.medium.com/max/500/1*DL2cgxZvwkJ5VwMUpjM-Cw" width="785" height="1099"><figcaption dir="auto">For this image, I chose to write the alt text, “A black cat with green eyes is seen outside through a group of palm tree fronds and trunks.” Everything highlighted in red (added in Photoshop) is information that I felt did not add to the overall description of the image. The whole description is less than 100 characters long.</figcaption></figure><UL><LI>You can include “extra” identifiers for people. If the race, gender, ethnicity, or another identifier for a person is relevant to the overall context of the image, feel free to add it. It also helps, in this instance, to think of your content as a whole. Is that identifier contextually important?</LI><LI>Avoid acronyms if possible. It’s better to type out the full name or title of a person, place, organization, or initiative because screen readers don’t always read acronyms correctly. Lesser-known acronyms also don’t add a lot of context to an image. If you do use an acronym in your alt text, type out the full name or title first, or you can also place dashes in between each letter so that the screen reader says it right (L-O-L instead of LOL).</LI><LI>Add your keywords for improved SEO. This piece of advice is really more for images on websites than social media, but it’s a good tip to keep in mind just in case search engines do ever evolve to pick up alt text on social media images, too. To my knowledge, they currently do not. However, keywords in alt text on Instagram posts supposedly do affect search results within the app. Just make sure that you’re prioritizing the accurate description of your image first and foremost.</LI></UL>Most importantly, don’t overthink alt text when you’re writing it. It’s likely that whatever you write will be a more accurate representation of your image than whatever description a platform’s AI system composes.Any effort to add alt text to your pictures on social media is better than the alternative of not doing it at all.Please keep in mind that this article on alt text was written by someone who does not have a serious vision disability and does not need alt text to navigate digital spaces. It is meant to be a guide for anyone looking to get better at writing alt text and is not definitive or exhaustive.If you’re interested in more tips on accessibility for social media, check out my other <a href="https://medium.com/@alexaheinrich" rel="noopener" dir="ltr">articles on Medium</a> or my recent <a href="https://sproutsocial.com/insights/social-media-accessibility/" rel="noopener ugc nofollow" dir="ltr">work on Sprout Social</a>.<figure><img alt="" src="https://miro.medium.com/max/500/0*ysqOKRix1ma" width="94" height="40"><figcaption class="ms mt gc ga gb mu mv bf b bg bh dx" data-selectable-paragraph="" dir="ltr">The UX Collective donates US$1 for each article published in our platform. This story contributed to <a href="https://www.bayareablackdesigners.com/" class="ek mc" rel="noopener ugc nofollow" dir="ltr">Bay Area Black Designers</a>: a professional development community for Black people who are digital designers and researchers in the San Francisco Bay Area. By joining together in community, members share inspiration, connection, peer mentorship, professional development, resources, feedback, support, and resilience. Silence against systemic racism is not an option. Build the design community you believe in.</figcaption></figure>

In the golden era of accessibility it becomes necessary to realize that no one consumes the digital content in one way.

A question that I frequently get when I talk about accessibility for social media is, “How do I write good alternative text for the pictures I post?” If you’re not familiar with alternative text—more…

A question that I frequently get when I talk about accessibility for social media is, “How do I write good alternative text for the pictures I post?”

If you’re not familiar with alternative text—more commonly known as alt text —it’s the written copy that describes the content of an image in a digital space and plays a significant role in making the online world more inclusive.

The purpose of alt text is two-fold; if an image on a webpage fails to load, the alt text will indicate what the missing image was supposed to be. It’s also vital for anyone who uses a <a href="https://www.afb.org/blindness-and-low-vision/using-technology/assistive-technology-products/screen-readers">screen reader </a>or text-to-speech technology to consume digital content because the alt text is meant to accurately describe the photo out loud to the user.

While adding alt text to images on websites is mostly considered a common best practice at this point, social media is only just starting to catch up.

Most of the popular platforms like <a href="https://www.facebook.com/help/214124458607871">Facebook </a>, <a href="https://help.twitter.com/en/using-twitter/picture-descriptions">Twitter </a>, <a href="https://help.instagram.com/503708446705527">Instagram </a>, and <a href="https://www.linkedin.com/help/linkedin/answer/109799/adding-alternative-text-to-images-for-accessibility?lang=en">LinkedIn </a> have had the ability to add alt text for at least a couple of years now, but it’s not something that is often stressed by social media professionals as a best practice or even the channels themselves. In fact, Twitter users previously had to flip a switch if they wanted to add alt text to their photos, something that the platform recently <a href="https://www.socialmediatoday.com/news/twitters-making-it-easier-to-add-alt-text-descriptions-to-uploaded-images/578731/">changed in May 2020 </a>.

Thankfully, more people have begun to realize how important alt text actually is along with other accessibility best practices for social media.

If you’ve never written alt text before, it can certainly feel a little daunting, especially when you know that whatever you write could have a direct impact on a user’s online experience.

Admittedly, even I still stress over the alt text I write because I do not have a serious vision disability and, therefore, do not personally rely on it to navigate digital spaces. My knowledge of alt text is based entirely on my experience as a marketer and the research and testing I have done using my own social media.

When it comes to crafting effective image descriptions, these are some of the tips that I keep in mind.

<ul><li>Avoid flowery language. You want to focus on describing the physical aspects of the picture and speak in plain language. Resist the urge to be ornate or overly effusive with your descriptions. </li><li>Keep your alt text relatively short. Facebook will politely suggest 100 characters or less for your alt text while LinkedIn actually cuts you off after 120 characters. Instagram and Twitter are less strict with their limits. However, most screen readers break up alt text after 125 characters (including spaces). </li><li>Exclude “picture of” or “image of”. It’s already assumed that your alt text will be for a photo or image, and a screen reader will more than likely say “image of” before or after reading your alt text. Don’t waste your characters on redundant work. </li><li>Avoid posting images with flattened text. If you’re posting a text-heavy graphic or flyer on social, you’re going to need to add alt text for all of the flattened copy. In this case, it’s better to link to a webpage or somewhere that has the text in a readable format. If you drag your cursor over the text on an image and it doesn’t highlight the individual words or characters, it’s not readable, which means that it’s really not actionable either. </li><li>It’s okay to use proper nouns and names. If a well-known person, place, or thing is in your image, go ahead and name it/them. When Senator Elizabeth Warren was running for president, her social media team always used her title and name in alt text for the images that featured her because it just made sense. The social media was for her and about her campaign. </li><li>Don’t feel like you need to describe everything. If something in the image is significant to understanding the whole picture or post, describe it. If it’s not, skip it and save your characters for the important stuff. </li> </ul>

<ul><li>You can include “extra” identifiers for people. If the race, gender, ethnicity, or another identifier for a person is relevant to the overall context of the image, feel free to add it. It also helps, in this instance, to think of your content as a whole. Is that identifier contextually important? </li><li>Avoid acronyms if possible. It’s better to type out the full name or title of a person, place, organization, or initiative because screen readers don’t always read acronyms correctly. Lesser-known acronyms also don’t add a lot of context to an image. If you do use an acronym in your alt text, type out the full name or title first, or you can also place dashes in between each letter so that the screen reader says it right (L-O-L instead of LOL). </li><li>Add your keywords for improved SEO. This piece of advice is really more for images on websites than social media, but it’s a good tip to keep in mind just in case search engines do ever evolve to pick up alt text on social media images, too. To my knowledge, they currently do not. However, keywords in alt text on Instagram posts supposedly do affect search results within the app. Just make sure that you’re prioritizing the accurate description of your image first and foremost. </li> </ul>

Most importantly, don’t overthink alt text when you’re writing it. It’s likely that whatever you write will be a more accurate representation of your image than whatever description a platform’s AI system composes.

Please keep in mind that this article on alt text was written by someone who does not have a serious vision disability and does not need alt text to navigate digital spaces. It is meant to be a guide for anyone looking to get better at writing alt text and is not definitive or exhaustive.

If you’re interested in more tips on accessibility for social media, check out my other <a href="https://medium.com/@alexaheinrich">articles on Medium </a> or my recent <a href="https://sproutsocial.com/insights/social-media-accessibility/">work on Sprout Social </a>.

The art of Alt Text

The importance of alt text

Avoid flowery language

CURATED BY

CURATOR'S NOTE

More like this