Facebook: Accessible Images and Posts

Accessible Posts

Even in posts that contain no video or images, there are things you can do to improve the accessibility of your posts.

  • Don’t overuse hashtags and emoticons. If you do use hashtags, use camel case. Camel case means that you capitalize the first letter of each word. For example: #ExploreAccess instead of #exploreaccess
  • Choose background colors wisely. On text posts, Facebook offers several colorful and decorative backgrounds. Make sure to choose a dark solid color. The backgrounds with lots of detail and those with gradient may make your posts difficult to read.
    Screen shot of post text field showing background colors beneath it
  • Do not share posts using only the Stories feature. The Stories feature is not accessible. If you post something in “your story” make sure to also share it in your feed.

Adding Alt Text to Your Images

Facebook has a feature that auto-generates a description of images, but it is, of course, limited by what object recognition technology can recognize about the image. The information that is auto-generated is typically very vague and sometimes inaccurate.For example, the automatically generated text for the following photo is “1 person”.
A young man at a chalkboard looks over his shoulder  toward an older man who appears about to hit him with a book

To provide accurate descriptions, you can add your own descriptions or for images that were uploaded previously, edit the automatic descriptions.

Upload your photo by either selecting the Photos/Videos button or dragging and dropping into the post window.
Facebook post window with photos/videos button selected

Scroll over the thumbnail of your image and select the paint brush to Edit Photo.
Edit photo selected

Select the Alt Text option to the left of the image.
Alt text option selected

Write the description of the image in the text box to the left of the image.
Alt description of image - A computer keyboard with the return key labeled with the universal symbol for access and the word accessibility

Select the Save button at the bottom right of the window.
Save button selected

Add the text that you want to add to your post and post the image.
Post with image thumbnail and text for post added

Your photo or meme now has a description that can be accessed by screen reader users.

Alt Text for Your Existing Images

You probably have images that were already on your page, before it was possible to add alt text. As you are able or as you re-share those, you will want to add alt text descriptions.

To do so, select the photo that you’d like to describe.
Photo of Little Rock skyline from UA Partners FB page is selected

Select the Options link at the bottom right of the photo.
Small pointing finger icon hovers over options link

From the menu that appears, select Change Alt Text.
The small finger pointing icon hovers over Change Alt Text on the menu

The Change Alt Text box will appear. It shows the automatically generated alt text. Select the Override generated alt text button.
Small pointing finger icon hovers over override generated alt text button in change alt text box

This will open a text field where you can type your own description.
An empty text box is present below the generated text. The generated text reads sky, cloud, bridge, outdoor, water and nature.

Type the description of your photo and then select Save.
Box now has alt text that reads Little Rock skyline at sunset, pink, purple and orange clouds reflect in Arkansas river

Your new alt text is now accessible to those using a screen reader to access your page.

Describing Images from Other Sources

Part of the power of social media is in sharing things from others in your network. Unfortunately, not everyone will take the time to make the images they post accessible. If you are sharing an image posted by someone else, you cannot add alt text to the image itself. The only option is to add a description in the post or comments. Below are some options for managing this.

A Photo Posted by Someone Else

When sharing an image posted by someone else, you first want to determine if it does or does not have an accurate description. You can use a variety of tools to check this. We recommend two tools you can use to quickly check if memes and images on Facebook have alt text.

  • For Safari users: Install the A11y Tools Extension by Paul Adams. It allows you to right click on the page and see the alt text for any images there. You can also access the dropdown menu in your browser toolbar.
  • For PC users: we recommend the Google Chrome extension called Alt Text Tester. To use this tool, you simply hover over the image to check the alt text.

If it does not already have a description, you can select share and then and add a description in the post or add “Description in comments” and add a description of the image in the first comment. Below is an example.
Screenshot of sharing a meme on facebook with this description in the post: Meme description: Blue and orange text on white background. Disability doesn't make you exceptional but questioning what you think you know about it does. Stella Young, Activist, Comedian, Journalist  hashtag Disability Is Diversity hashtag Access Is A Civil Right  Logo of Arkansas Affiliate Southwest Center

An Article with a Link Preview Image

When you paste a link to an article on your page, there is often an image that appears along with the link. There is not a way to add hidden alt text for these images. To make those accessible, add text that says “Link preview description:” followed by the description of the image. Here is an example.
A link to an article called The Disabled List is shared to UA Partners for Inclusive Communities page. The image is described as "Link Preview: A stylishly dressed woman using a walker hails a cab on a city street.

In some cases you may determine that the link preview is purely decorative and not add a description at all.

Color Contrast and Text Visibility

For an image or meme to be accessible, visibility of the text in the image is also important. Make sure the background color and foreground colors provide good contrast.

If you overlay text on an image, make sure that there is good contrast behind all of the text. This sample shows how the visibility of the text can be compromised by a busy background where colors vary.
Autumn forest with creek running through it and quote overlaid that reads Autumn is a second spring when every leaf is a flower Albert Camus

A good practice is to put a box behind the text to provide more contrast. By making the box slightly transparent both your text and the image are visible.
Same scene as previous with box dropped behind quote

Using light text on a light background or dark text on a dark background also compromises visibility and access. This example shows how difficult it can be to see the text when contrast is poor.
Very light teal box with white letters that say design is powerful

In this image, the text is much more visible and our message is accessible to more people.
Background is darker teal with white letters that say design is powerful

Design is indeed powerful! By being intentional with your design, you are using that power to provide access.

<< Back to Social Media Intro              Next: Facebook Videos >>

This tutorial has been developed through a cooperative agreement with Arkansas iCAN through a project focused on Increasing Digital Access in Arkansas.