How & When to Use Alternative Text (Alt Text) To Make Your Content Accessible

Table of сontents
Copied!

Alternative text, or alt text, is one simple way professionals and individuals alike can make their online and social content more accessible. Alt text is especially helpful to provide equity to individuals with disabilities but comes with additional benefits. For one, it can boost your content’s discoverability. 
 
This guide will walk you through what alt text is, why it’s essential and how to use it. Plus, we included pro tips provided to us by Kristin Knudson, an accessibility specialist. 

What is Alternative Text (Alt Text)?

Alt text offers a text description of an image displayed. When you add alt text to your content, you can convey the meaning of images to those who are blind or have vision loss.  

Alt text serves several important purposes: 

  • Accessibility: People using screen readers rely on alt text to understand what is being depicted in images on site pages and digital documents. 
  • Fallback: If something goes wrong with the page, and the images don’t load, all users see the alt text instead and can get a sense of what was meant to be there. 
  • Discoverability & SEO: Search engines like Google can use alt text to identify the purpose of your posts and boost the ranking of your content accordingly. 
sigmund-4MoIpDcSlr4-unsplash (3)

How to Add Alt Text on Social

Adding alt text on Instagram, Facebook and LinkedIn can be done quickly. Here are instructions and a helpful video to get you started.

 

How to Add Alt Text on Instagram

1.Open the Instagram app. Select and edit your photo, but don’t post it yet. 

2.Use the forward arrow located at the top-right corner of the screen to navigate to the next page.  

3.Look to the bottom of the screen and select “Advanced Settings.” 

4.Under “Advanced Settings,” choose “Write Alt Text,” located under the “Accessibility” heading. 

5.Write your Instagram alt text. 

6.Once you completed writing your alt text, select “Done” or click on the check mark. 

Now you can post your image as you normally would. 

How to add Alt Text on Facebook

1.Create a new post and select a visual. 

2.Click on “Edit” 

3.Select “Alternative Text” 

4.Write your description of the image.

How to add Alt Text on LinkedIn

1.Upload an image. 

2.Select “ALT” on mobile or “ALT” on mobile, or “Alt.text” on a desktop. 

3.Write your description of the image 

4.Select “Done” on mobile, or “Save” on desktop. 

Best Practices: Using Alt Text Correctly 

Simply adding alt text that you think should suffice isn’t always helpful enough. There are different considerations for what to include in alt text and various ways to write it to best help the individuals who rely on it.  

Here are some best practices to follow: 

Avoid Redundancies for Better User Experience

Screen readers will identify your images as images. It’s unnecessary to write, “an image of… ” as part of the alt text, as it would read twice: “an image of an image of a dog.” 

Consider Whether to Write Aesthetic Alt Text  

If an image is purely for visual appeal, marking it as “decorative” will allow a screen reader to bypass it. This is often the best approach as it avoids giving unnecessary information or slowing down the screen reader user’s scan of the document.  

“People like to have pages look pretty,” said Kristin Knudson, an accessibility specialist who works to remediate inaccessible documents. “There might be a picture of a dog just because there’s a picture of a dog, and if the dog doesn’t really mean anything to the story or the text, it’s a decorative dog.” 

However, there could be scenarios where it would help your SEO efforts or serve some minimal contextual purpose. In such cases, a short, simple description is enough.  

For instance, if you added the image below to a blog just for the look, you could mark it “decorative” or offer alt text that reads “a corgi dog sitting in front of a white backdrop.” There’s no need to point out anything more about the picture. 

fatty-corgi-wHgkrmuMFOY-unsplash

Include Details When Drafting ‘Educational Image’ Alt Text 

If your image serves an educational purpose, it needs to have a more detailed description. For example, a site trying to explain to readers which snakes are poisonous based on the colors and orientations of their stripes needs to have very detailed alt text with it to provide equity to those who cannot see it.  

If you’re using an image of a snake to add an aesthetic image on your page, alt text that reads “a snake with red, black and white stripes on rocky ground” is acceptable. However, it would not be adequate in the context of the educational comparison. Here, a better version of the alt text for the below image could be “a snake with stripes that repeat in a pattern of red, black, white, black, red, indicating it is a false coral snake rather than its venomous lookalike species,” provides more useful context. 

snake-2379192_1280

Consider Charts and Graphs Differently

Charts and graphs also need detailed descriptions that include the context. Additionally, if the graph includes text that is part of an image it likely won’t be accessible to those using screen readers. The alt text should, therefore, cover the text shown on the chart in its description. For the graph below, the description should inform a screen reader user of all of the relevant text and statistics.  

The appropriate alt text may read, “a bar graph that says, ‘Captions support the many social viewers who watch without sound,’ at the top. The shortest bar is to the right and indicates that ‘40% of Instagram users view without sound. The second bar is taller and shows that 80% of LinkedIn users view without sound. The third bar is the tallest and indicates that 85% of Facebook viewers view without sound.” 

Social media_chart

Don’t Rely on AI Alone to Write Alt Text

AI is a powerful tool that can improve accessibility in many cases. However, when it comes to alt text, AI will often neglect to take the context into account. 

“There are a lot of programs, Microsoft Word is one of them, that will try to figure out what a picture is and put the alternative text in automatically,” said Knudson. “But then you get 60 alternative texts that say, ’graphical computer interface,’ which is neither helpful nor meaningful to anyone except the computer.” 

It’s important that someone who understands the purpose of the image writes the alt text. There are endless ways to describe a single image. The best ones will depend on the purpose of the image in the context of the content.  

mariia-shalabaieva-fluoEjpdj60-unsplash

Handling Descriptions of Images with Links  

If an image also contains a link, your alt text needs to describe the image’s content and the link’s destination. For instance, imagine a post discussing Alexander Hamilton that includes the image below of a ten-dollar bill, which links to the Alexander Hamilton biography page.    

In that case, the alt text might say, “Alexander Hamilton on the ten-dollar bill. Read more about him at biography.com.” This way, the alt text covers both the image description and informs the reader about where the link will take them. 

ryan-quintal-x35W6et_ZlA-unsplash

Alt Text is Just One Part of Accessibility

When it comes to accessibility, there are many considerations. Alt text is one small, but meaningful aspect of overall online access and inclusivity. It’s important to identify other potential barriers to content — from videos with inaccurate captions or lacking audio description to inadequate color contrast and countless others. 

 

By following these practices and making your digital content more accessible, you contribute to a more inclusive online experience for all users, improve your SEO and reach greater audiences. For more information about accessibility, explore Verbit’s accessibility hub.