When we post to Facebook, we need to consider several things to ensure the posts are accessible to everyone:
- Ensure sufficient contrast
- Add alternative text to images
- Caption video content
- Do not rely on color alone to convey information
- Avoid flashing content
- Avoid endlessly moving content, whenever possible
Detailed instructions for doing each of these is below.
Ensure Sufficient Contrast
When we talk about contrast we usually mean how much difference there is between text or other page content and the background. In short, how well does the content stand out. For example, light gray text on a white background is hard to read. When people age or have a visual impairment, high contrast makes reading and understanding content much easier. Standards require at least a 4.5:1 color contrast ratio and some recommend a 7:1 color contrast ratio. While it is a bit of an oversimplification, you can think of this as the content color being 4.5 or 7 times brighter or darker than the background color. Black text on a white background or white text on a black background is a 21:1 color contrast ratio.
When you create a post that has an image with text overtop of it or you customize the color of the text and background, make sure it has high contrast. My favorite tool for checking this is Colour Contrast Analyzer from the Paciello Group. It lets you use an eyedropper to sample the text/content color and the background color or you can enter in the color codes. It will tell you the color contrast ratio and let you play with the colors.
Add Alternative Text to Images
Individuals who are blind or who have trouble processing visual information, typically use a screen reader. This is an application that reads the contents of the webpage to them. These tools can recognize an image but can’t tell the user anything about it. It is your job when you create content to tell the screen reader what is important in the image. In Facebook posts, that may be a short description like “small cat stuck in cardboard box” but it is often the text that you have posted within an image.
If you are advertising events and your organization using posts created by tools like Canva, which lay text over a background image, over 2 million potential viewers can’t read it. This is easy to fix.
Step 1: Select Edit Photo
Step 2: Select Alt text from the menu on the left
Step 3: Override the generated alt text
Facebook attempts to generate alternative text for images in posts. As you can see from this one, where the alt text is the word “text” it often fails. To create your own alternative text, you should click the Override generated alt text button.
Step 4: Enter New Alternative Text
Enter new alternative text. There is a lot of text on this image but almost all of it is important. You can break it apart so that you have some text in your main post and then only include the text that is not there in the image alt text. I’ve chosen to include all of the text on the image:
“Accessible Escape Room. Attending CSUN? Will you be near Anaheim, VA March 9-13? Would you like to try an accessible escape room? Sign up at accessibleescaperoom.org. Times: Tuesday March 10th 8-5, Friday March 13th 8-11, Wed-Thurs Evenings by Request Only.”
You may get a warning that alt text is usually less 100 characters long. While that is a great rule of thumb and you want to be concise, it is more important to include the key information.
Step 5: Save the Image
Caption video content
If you are posting video content, caption it beforehand and consider providing a link to a transcript. Assuming you are posting a YouTube video, you can use the Creator Studio in YouTube to caption your video before posting. Most video creation software will also allow you to add captions in some form.
Do not rely on color alone to convey information
Look at your posts and ask yourself, is color used to give information? For example, a dot that is red when there is an issue or blue when there is not or a pie chart with a colored legend.
If the answer is yes, imagine the content in grayscale (or print preview the content in grayscale). Does it still make sense? If not, add labels or make other adjustments so it works.
Avoid flashing content
Flashing content can cause migraines and seizures. Flashing is any quick switch from high contrast to low contrast that happens more than 3 times second but is slow enough to still be visible (3-50 flashes per second).
Just don’t do this. Please.
Avoid endlessly moving content, whenever possible
Another challenge is moving content that can’t be paused or stopped. For some individuals this is highly distracting and can even negate all other visible information. Think strongly before including animated gifs that endlessly loop in your posts.