Inclusive Social Media Design: Suggestions for Creating Accessible Channels
Inclusive design seems to be the domain of UX designers and web developers. But social media marketers can practice too.
Several social platforms recently made accessibility updates. Automatic captions are available on Facebook Live and Instagram IGTV. Following the inaccessible rollout of voice tweets, Twitter set up two accessibility teams and plans to roll out automated subtitles by early 2021. Alt-image description fields are now available on all three platforms as well as LinkedIn.
Marketers should feel it is their responsibility to stay informed of these updates. According to the 2.1 compliance standards of the Web Content and Accessibility Guideline, accessibility for social media is technically not required. But it shouldn't have to be. Inclusive social media marketing is simply good social media marketing.
Bonus: Read the step-by-step guide to social media strategy with professional tips on how to increase your social media presence.
What is Inclusive Design?
Inclusive design aims to give as many people as possible the best possible user experience.
In practice, this is a departure from the unified approach, which is about so-called "average users". Inclusive design instead creates a multitude of users by removing barriers and giving people a multitude of ways to get involved.
There is no such thing as normal. #inclusion #inclusive #design @MicrosoftDesign pic.twitter.com/xXW468mE5X
– katholmes (@katholmes) March 6, 2017
Inclusive design begins with identifying the rarest or most extreme needs, also known as edge cases or voltage drops. Depending on the context, edge cases can include differences in skills, age, gender, language, and other factors. In contrast, universal design aims to serve a wide variety of people and situations.
@meyerweb The term is indicative: Edge cases define the limits of what / whom you are interested in.
– Evan Henſleigh (@futuraprime) March 25, 2015
Now that you've identified the edge cases, the next step is to design a solution. Microsoft's integrative design principles provide a good framework:
- Recognize exclusion
- Release for one, expand to many and
- Learn from diversity.
Inclusive design very often benefits everyone.
Video captioning is a prime example. The main use case for closed captioning is to assist people with hearing impairments. But they also help language learners and viewers to watch with the sound turned off. Data from Facebook shows that branded content developed for Sound-Off was rated with 48% more relevance and 38% more brand interest.
Why social media accessibility is important
Inclusive design increases access. A social media strategy that takes inclusive design into account does the same thing. Without accessibility, you are missing out on connecting with your potential audience.
At least a billion people – 15% of the world's population – have some form of disability. This number increases significantly when temporary and situational disabilities are taken into account. Not inclusive content and experiences push people away. And it is not always easy to pinpoint when this will happen. Often excluded web visitors don't complain: 71% just leave.
A 2018 survey of Facebook users in 50 countries found that more than 30% of people have difficulty with at least one of the following problems: seeing, hearing, speaking, organizing thoughts, walking or grasping with their hands.
To make social media accessible, you need to recognize exclusion, learn from your followers, and present information as clearly as possible. And at the end of the day, that's just a good marketer.
In addition, almost everyone likes to see inclusivity in advertising. According to a recent survey by Google, 64% of users took an action after viewing an ad that they considered inclusive.
9 including design tips for social media managers
1. Make text accessible
Writing with clarity makes text more accessible and understandable. And that benefits everyone. As simple as that.
Before you click Publish, think about how assistive tools like screen readers will read your copy. What about people learning English as a second language? Or people with learning difficulties or limited familiarity with the topic?
Here are some included design tips for text:
- Write in plain language: Avoid jargon, slang, or technical terms unless they are appropriate. Do not worry. You can do this without affecting the brand voice
- Don't use caps too often. Full caps can be difficult to read and misinterpreted by screen readers.
- Use Camel Case for multi-word hashtags. Capitalize the first letter of each word to make hashtags easier to read and to avoid gaffs with screen readers.
blacklivesmatter is pronounced something like "black live (the verb) smatter" by the screen reader software.
BlackLivesMatter is announced as expected: "Black Lives Matter" #SocialMedia #Accessibility
– Jon Gibbins (@dotjay) July 9, 2020
- Put hashtags and mentions at the end. Punctuation marks are read by screen readers. Note how hashtags or @mentions can interfere with copying.
- Avoid saying "click here". Use descriptive prompts such as: sign up, try for free, or subscribe.
- Limit the use of emoji. Emoji and emoticons (i.e. _ (ツ) _ / ¯) are read aloud by assistive tech. That means people hear things like "face crying loudly" or "pile of feces". Before using one, see how it translates into text.
- Use an appropriate font size. Make sure the text is legible, especially if it is used on pictures or areas that cannot be changed.
- Avoid special characters. VoiceOver and other aids not only impair readability, they also read special formatting very differently.
You 𝘵𝘩𝘪𝘯𝘬 it's to 𝘄𝗿𝗶𝘁𝗲 your tweets and username 𝖙𝖍𝖎𝖘 𝖜𝖆𝖞. But do you have assist to what it assist with assistive technologies like? pic.twitter.com/CywCf1b3Lm
– Kent C. Dodds @ (@kentcdodds) January 9, 2019
- Limit line length. Lines that are too long can affect readability and retention.
- Use inclusive language. Avoid inconsistent language, stick to gender-neutral pronouns and terms, share different voices and emoji, and evaluate the text on assumptions with limited viewpoints.
2. Provide descriptive captions
Descriptive captions and alternate text (also known as alternate text) allow people to visualize images when they cannot see them. According to WebAIM, a non-profit organization with a center for people with disabilities, missing or ineffective alt text is the most problematic aspect of accessibility on the Internet.
Several social media platforms use object recognition technology to automatically provide alternate text. Obviously there are limits to its reliability. It's always better to add a custom description if you can.
Facebook, Twitter, Instagram, and LinkedIn have special fields where you can add alt text for images and GIFs (you can also add alt text with Hootsuite). If you can't add alt text, add descriptive labels.
If you are bored of seeing me, ask people to describe their photos. Just imagine how bored I am:
1. Write the same thing over and over again.
2. Scroll through this app and wonder what is so funny / disturbing / important about this photo.
– Holly Scott-Gardner (@CatchTheseWords) September 25, 2020
Tips for writing descriptive alt text:
- Get the message across: there is a big gap between "picture of a chart" and "a bar chart shows that forest fires have increased year over year, peaking at 100 this year."
- Skip "Image Of" or "Photo Of". The Royal National Institute of Blind People says that most screen readers prefer if you don't.
- Mention the color if it is important to understand the picture.
- Share humor. Descriptive text doesn't have to be overly formal and should try its best to express what's funny.
- Transcribe text. If the picture has a copy that is central to its meaning, make sure you include it in the description.
- Learn from the best: WebAIM has tips and various examples, and the presentation by Copywriter Ashley Bischoff is very helpful.
- Don't forget GIFs. Twitter recently made alt text an option for GIFs. If the platform doesn't support alt text, add a description of the action.
You don't generally need to say "picture of" or "photo of". Just describe what the picture is conveying – what is to keep the user from seeing it. Some examples:
– Robot Hugs (@RobotHugsComic) January 5, 2018
3. Add video titles
Subtitles are vital for the hearing impaired viewer. They also improve the viewing experience for people watching in their non-native language or for viewers in sound-off environments. Even children learning to read benefit from captions.
😳😳😳😂 thanks @AOC !!!!!!
I learned so much from you because of your captions. Thank you for being inclusive for 466 million Deaf! https://t.co/792GZFpYtR
– Nyle DiMarco (@NyleDiMarco) March 28, 2019
Internal testing at Facebook found that video ads with subtitles showed an average of 12% longer display time. Captions also help with retrieval. Several studies have shown that people who watch videos with subtitles are more likely to remember the content.
Facebook: Automatically generate subtitles, write them yourself or upload a SubRip (.srt) file. Automatic captions are also available for Facebook Live and Workplace Live.
YouTube: Automatically generate, transcribe, or upload a supported file for subtitles. Errors can be corrected with the label editor. Automatic subtitles are available in English for YouTube Live. Community closed captions, which allowed accounts to get closed captions and translations through crowdsource, have been discontinued.
Instagram: Automatic subtitles are now available for IGTV Live and IGTV. Otherwise, video titles need to be burned in or encoded in advance. Add captions with custom text to your Instagram stories, as well as TikTok and Snapchat videos. Cliptomatic helps with this.
Twitter: Upload a .srt file with your video. Twitter is also working to have video and audio automatically subtitled by early 2021.
LinkedIn: Upload a .srt file with your video.
If no alternative text fields are available, add a description to your label. This is how they are usually formatted: Image description: (description of the image)
PS: Hootsuite allows you to upload subtitle files alongside your social videos to Compose so that you can publish videos with subtitles easily.
Aside from captioning, there are a few other ways to create highly regarded silent videos for social media.
4. Add video descriptions
Unlike subtitles, which are usually a transcript of spoken dialogue, descriptive language identifies the major sights and sounds that are not spoken. Imagine how the cue card scene in Love actually encounters a blind viewer. Or check out the scene at the Fight Club where Edward Norton's character beats himself up.
I urge you to enjoy a television program with audio description. Immerse yourself in the world of audio and experience a TV program or movie from the perspective of #SightLoss that you never know you might get a lot from. @sibbymeade @guidedogs @seandilleyNEWS @TPTgeneral pic.twitter.com/oMSjE7nduv
– Martin Ralfe – Guide dogs (@MartinRalfe_GDs) September 14, 2020
There are several ways to provide descriptions:
- Descriptive audio. Described video is the annotated description of all the major non-verbal elements in your video. This track is written and recorded to fit in the gaps between key audio elements. On social media, the described video is usually "burned in" and cannot be deactivated.
- Descriptive transcript. These transcripts are sometimes referred to as the alternative media protocol and, in addition to the dialog, contain descriptions, similar to a script.
- Video described live. Live video hosts should be familiar with descriptive video techniques and should pause to describe what is happening on the screen. Accessible Media Inc. has a best practice guide.
5. Use a color contrast of at least 4.5: 1
For people who are color blind or have even switched to grayscale to ward off the dopamine delivered by red notifications, color contrast is important.
The ideal contrast between a text color and its background should be at least 4.5 to 1, as recommended by the WCAG. This ratio decreases with larger text, but with smaller text. The variations may seem subtle – but they make a huge difference to different viewers.
- Avoid green and red or blue and yellow combinations as these are difficult to read.
- It can be difficult to read text on pictures. Use a solid background or an opaque overlay.
- With graphs and charts, consider the use of patterns to differentiate data.
Source: Facebook Design
6. Don't rely on color to convey meaning
Globally, at least 2.2 billion people have some form of visual impairment, including color blindness, low vision, near vision, and blindness. In fact, Facebook's color scheme is blue because its founder Mark Zuckerberg is red-green color-blind.
Color can also mean different things to different cultures. For example, red may indicate a downward trend on the US financial charts, but red is positive in China.
- Visualize links. Add an underline or hover animation to indicate that hyperlinked text is clickable. The Nielsen Norman Group has helpful guidelines for visualizing links.
- Use symbols. Use symbols or patterns in graphics or infographics as alternatives or in addition to color. Or add clarifying labels.
7. Stay informed about accessibility
Some platforms have official accessibility accounts. If you're a social media manager or marketer, follow these accounts to keep up to date. Know what options are available so you can help members of your community if they need your help.
Follow disability rights advocates like Alice Wong, The Black Disability Collective, for perspective and understanding. Join in on social media conversations using hashtags # a11y #DisabilitySolidarity and others you find.
8. Promote positive inclusion
Benefit isn't the only measure of inclusion. Representation is also important.
Do you need evidence? Look at the Scully Effect. Not only did the female viewers of The X Files view Agent Scully as a positive role model, they also appreciated and studied STEM after watching the show.
After the premiere of Black Panther, Twitter exploded with tweets from #WhatBlackPantherMeansToMe.
I would really love a thread of black children in Black Panther costumes to remember and celebrate #ChadwickBoseman remember
– derecka (@dereckapurnell) August 29, 2020
It's a fundamental marketing principle that brands create content that engages their audience. But too often brands over-represent young, white, straight, capable men with cis-sex in their pictures.
In 2019, male characters were more numerous than female characters in ads at a rate of two to one.
People with disabilities make up only 2.2% of the characters in 2019 ads.
Also consider the role assignment and presentation. Do women always do the cleaning? Is Romance Always Straight? Before posting any picture on social media, make sure it is not promoting racist, sexist, alterist, homophobic, or other stereotypes.
Your feed should be as diverse as the people in your audience – or the people you want to join your audience. Functional diversity through your images, partnerships and cooperation. And when you do, be ready to provide assistance. That means you have to show up when the trolls do.
Read our guide to real social media activism.
9. Greet and welcome feedback
It is rare that everything goes right the first time. This is why it is important to be open to feedback and have mistakes when you make them.
We're sorry to test unsupported voice tweets for people with visual impairment, deafness, or hearing loss. It was a failure to introduce this experiment without this support.
Accessibility shouldn't be an afterthought. (1/3) https://t.co/9GRWaHU6fR
– Twitter support (@TwitterSupport) June 19, 2020
Enable safe and positive dialogue with your community. Include contact information, a feedback form, or a prompt that lets your audience know where to share their thoughts. Kara Gates, Senior Interaction Designer at Google, says, "If you want to change the world, you have to involve it."
Plan to test and review frequently. Use tools like Color Oracle to simulate color blindness. Read alt text aloud – or better yet, use a screen reader or other assistive technology to test your content. A full list of helpful tools can be found below.
Social media accessibility tools
WAVE browser extensions
The web accessibility assessment extensions can be used in Chrome and Firefox to check your website and its content for accessibility.
Ensure the readability of your copy with Hemmingway Editor. Aim for Grade 8 and lower to meet WCAG standards. The Readability Test Tool is another option.
Microsoft Accessibility Checker
Microsoft has a built-in accessibility tool that is available in Outlook, Excel, and Word. The Microsoft Inclusive Design Manual also provides videos and downloadable brochures on inclusive design topics.
Thread Reader App
This twitter bot is rolling threads on the platform so that people can read them more easily. To prompt the app, just highlight it and write "unroll" in response to the thread in question.
Image Alt Text and Alt Text Reader
Tag @ImageAltText or @Get_AltText in response to a tweet with an image to trigger these Twitter bots. If available, reply with the alternative text.
Automatically add subtitles to your Instagram stories, TikTok videos and snapshots with Cliptomatic.
If you're using a Mac, the Contrast app is a WCAG-compliant contrast checker. A nice feature of this app is that designers can check their contrast values when choosing colors. The developers of this app even provide a guide that simplifies the WCAG standards.
The Contrast Check allows you to drag and drop a specific image for a contrast check. This is a good thing to do before uploading any assets to social media.
Use the free color blindness simulator to make sure you're not just using color to convey information. The open source tool is available for Windows, Mac and Linux.
Use Color Safe if you need help finding a color palette that provides sufficient contrast and meets WCAG guidelines.
Check text on wallpaper a11y
This text over image accessibility tool allows you to determine how readable text is based on color contrast. Use Facebook's image text checking tool to see if your image has too much text.
YouDescribe from the Smith-Kettlewell Eye Research Institute enables volunteers to create descriptive audio for YouTube videos. Just copy and paste a YouTube URL into the search box. First click on Create / Edit Descriptions.
67 percent collection
As part of the # SeeThe67 percent campaign, Refinery29 has partnered with Getty Images to offer images featuring oversized women. See also the No Apologies Collection, a continuation of the collaboration. Dove has also partnered with Getty to break down beauty stereotypes with the Show Us collection.
The Gender Spectrum Collection
Vice encourages the media to go "beyond the binary" with this photo collection.
The Disabled Collection
Global Accessibility Awareness Day, Getty Images, Verizon Media, and the National Disability Leadership Alliance (NDLA) work together to refute disabilities with this catalog. The Brewers Collective also created catalogs with Unsplash and Pexels.
The Disrupt Aging Collection
Access 1,400+ images fighting against age-related prejudice in this collection, created by AARP and Getty.
Aegisub is a free, open source tool for creating and editing subtitles. You can also use this tool to create transcripts for videos.
Track your brand names on social media and the web with Mentionolytics. This tool is a great way to view and answer questions and feedback whether or not they have already been mentioned.
Web Content Accessibility Guidelines (WCAG) 2.1
These recommendations set the industry standards for accessible web and social media experiences.
Vox product accessibility guidelines
These guidelines provide an interactive checklist for designers, editors, engineers, and more.
Manage all of your social media channels with Hootsuite from one dashboard. Easily schedule and publish all of your inclusive social media posts, connect with your followers and track the success of your efforts. Try it for free today.