Alt Text: Making the Internet More Accessible

For many blind and visually impaired individuals, a screen reader is the link between human and the online world. It is the bridge that allows a blind user to access the wealth of information available on the internet. That includes websites, social media, online journals, and so much more. This tool is why alternative text, or alt text, is so important in making the web accessible.

What is a Screen Reader?

A screen reader is something like VoiceOver on iOS and Mac OS, Narrator and NVDA on Windows, TalkBack on Android, and JAWS. It is a piece of software that scans through code and text and reads it aloud to the user. It also provides tools and shortcuts for navigating a computer or device easily without sight. Though, screen readers have come a long way over the past decade, they are not perfect, but there are things we can do to help.

A large part of accessibility issues are on developers for failing to provide accessible formats for forms, labels for buttons and controls, and more, but we as social media users and amateur web designers can do our part to make the world wide web more accessible to those who are blind or visually impaired.

What is Alt Text?

Alt Text is a shortened form of Alternative Text, which is placed on images, videos, and other visual media to provide context and description for those who cannot see that media. It makes images accessible in the same way that captions make video and audio accessible to the deaf community.

How Do We Add Alt Text?

The process for adding alt text is different on every platform and application, but if you know where to look, it only takes an extra minute. Below, I will add some instructions for adding alternative text in your favorite social media apps, WordPress, and HTML codes.

These instructions are intended for those who have vision. I will be working to make a guide for those who use a screen reader as well. Keep an eye or an ear out for that one.

Facebook

Alt text for images uploaded to Facebook must be added after the image is uploaded.

Facebook Website:

1. Once an image is uploaded, click on that image.
2. Find and click on the three dot menu to the right of your name and post text.
3. Click on Change Alt Text.
4. Add your Alt Text to the text box and click Save.

Facebook Mobile App (Android & iOS):

1. Once an image is uploaded, tap that image.
2. Find and tap on the three dot menu in the upper right hand corner.
3. Select the option for Edit Alt Text at the bottom of the menu.
4. Add your Alt Text to the text box and click Save.

Instagram

Mobile App (Android & iOS)

1. In the Instagram app, tap the plus icon at the top of the screen (it has been moved in a recent update from the bottom of the screen).
2. Choose your image(s) and complete any desired edits or add any filters you prefer.
3. After adding your description, you may wish to add a photo description in this area of the post as well.
4. Scroll to the bottom of the page after entering your description and click on Advanced Settings.
5. Find Write Alt Text listed under the section labeled Accessibility.
6. Enter your alt text for each photo you have added to this post.

Twitter

Twitter Website

1. On the Twitter website, tap the + button on the left side of the screen or start typing in the text box at the top labeled “What’s Happening?”
2. Click the image icon and select your image.
3. Click Add Description located under the image preview.
4. Type your image description in the text box and click Save.
5. Finish the text of your Tweet and hit the Tweet button.

Mobile App (Android & iOS)

1. Open the Twitter app and tap the + button to begin a new Tweet. It looks like a quill or feather with a plus sign.
2. Touch the add image button and select your image.
3. The Alt button is superimposed over your selected image in the bottom right corner to the left of the edit button (the edit button looks like a paint brush).
4. After touching the Alt button, the text box appears near the bottom of the screen. Type your text and tap Done.
5. Finish your Tweet text and tap the Tweet button in the top right of your screen.

WordPress

With WordPress, you can add alt text in a few different ways. You can edit the HTML by following the instructions in the next section if you feel comfortable doing so.

Otherwise, you can edit alt text in the Media library after you upload a photo or you can edit alt text as you add a photo to a post or page.

Media Library (Web Browser)

1. Click on the Media button on the left sidebar in your WordPress Dashboard.
2. Select the image you want to add alt text to.
3. Alternative Text is the first text box on the right of your screen. Select it and type your image description.
4. When you finish, your text is automatically saved to the image in your media library.

Media Library (Mobile)

1. In the WordPress mobile app, tap Media at the top or under the Publish menu.
2. Select the image you’d like to add at text to.
3. Find the Alt Text text box under the image preview. It is below Title and Caption.
4. Enter your image description.
5. Once you click outside that text box, your alt text will be saved.

From a Post (Web Browser)

1. While editing your post in the current WordPress editor, press the plus button and select the image block and select your image.
2. Here you can add alt text before you click on Select. Once you click on your image, Alternative Text will be the first text box on the right panel.
3. After selecting your image, click Select.
4. Once the image is placed in your post, click on it and click the settings button on the top right of the screen (it looks like a cog).
5. Once the settings for the image block are open, Alternative text appears under the Image Settings section.
6. Add your image description. Be sure to save or publish your post.

From a Post (Mobile)

1. While editing a post in the WordPress mobile app, tap the plus icon in the bottom to select your image block. Then, select your image and click Done.
2. Once the image is added to your post, a settings cog will appear in the bottom right of the image block.
3. Tap the Settings Cog, and Alt Text can be found at the bottom of the settings list.
4. Click Alt Text and enter your image description.
5. Click outside the settings menu to continue editing your post.

HTML

When working in HTML, adding a small bit of code is a simple way to add alt text to your website images. Below is what an HTML code looks like without an alt text attribute. The img src code is your image source or the location and file name of your image.

<img src="blond_girl.jpg">

Next, you simply add the alt attribute like this:

<img src="blond_girl.jpg" alt="Girl with blond hair">

Adding alt text to an image using HTML code is as simple as that.

Note: If your image is also a link to another page, your alt text tag should also explain where it links to.

A linked image with alt text will resemble this code:

<a href="https://www.yourlink.com">
     <img src="blond_girl.jpg"
 alt="Girl with blond hair">
</a>

There are a lot of things you can do with an img HTML code, but I just wanted to share the most simple explanation for you guys.

You can find some helpful tips for writing “good” alt text in this article.

This post will be updated gradually as I add more social media sites and as apps change. If you have a request or a note about adding alt text, please feel free to contact me via my About page.

Stay curious.