Inclusive Design for Social Media: Ideas for Creating Accessible Channels
Inclusive design may seem like the domain of UX designers and web developers. But social media marketers can practice it, too.
Several social platforms have made recent accessibility updates. Automatic captioning is available on Facebook Live and Instagram IGTV. After the inaccessible introduction of voice Tweets, Twitter established two accessibility teams and plans to roll out automated captions by early 2021. Alt-image description fields are now available across all three platforms, as well as LinkedIn.
Marketers should view staying informed about these updates as a responsibility. Social media accessibility isn’t technically required under Web Content and Accessibility Guideline’s 2.1 compliance standards. But it shouldn’t need to be. Inclusive social media marketing is just good social media marketing.
Bonus: Read the step-by-step social media strategy guide with pro tips on how to grow your social media presence.
What is inclusive design?
Inclusive design aims to provide the best user experience for as many people as possible.
In practice, it’s a shift away from the one-size-fits-all approach that centers around so-called “average users.” Instead, inclusive design creates for a diverse range of users by addressing barriers and providing a variety of ways for people to engage.
There’s no such thing as normal. #inclusion #inclusive #design @MicrosoftDesign pic.twitter.com/xXW468mE5X
— katholmes (@katholmes) March 6, 2017
Inclusive design starts by identifying the most rare or extreme needs, otherwise known as edge cases or stress cases. Depending on the context, edge cases can include differences in ability, age, gender, language, and other factors. By contrast, universal design aims to serve the broadest range of people and situations.
@meyerweb The term is telling: edge cases define the boundaries of what/who you care about.
— Evan Henſleigh (@futuraprime) March 25, 2015
After pinpointing edge cases, the next step is to design a solution. Microsoft’s inclusive design principles provide a good framework:
- Recognize exclusion
- Solve for one, extend to many, and
- Learn from diversity.
Very often, inclusive design benefits everyone.
Closed captions on videos are a prime example. The primary use case for captions is to assist people with hearing impairments. But they also help language learners and viewers watching with sound off. Data from Facebook shows that branded content designed for sound off was rated as having 48% more relevance, 38% more brand interest.
Why accessibility matters for social media
Inclusive design increases access. A social media strategy that considers inclusive design does the same. Without accessibility, you miss out on connecting with your full potential audience.
At least one billion people—15% of the world’s population—experience some form of disability. That figure increases significantly when it accounts for temporary and situational disabilities. Non-inclusive content and experiences push people away. And it’s not always easy to pinpoint when that happens. Excluded web visitors often don’t complain: 71% just leave.
A 2018 survey of Facebook users in 50 countries found that more than 30% of people report difficulty with at least one of the following: seeing, hearing, speaking, organizing thoughts, walking, or grasping with their hands.
Keeping social media accessible means recognizing exclusion, learning from your followers, and presenting information in the clearest ways possible. And at the end of the day, that’s just being a good marketer.
Plus, just about everyone likes to see inclusivity in advertising. According to a recent survey by Google, 64% of people took an action after watching an ad they considered inclusive.
9 inclusive design tips for social media managers
1. Make text accessible
Writing with clarity makes text more accessible and understandable. And that benefits everyone. It’s as simple as that.
Before you hit publish, consider how assistive tools like screen readers will read your copy. What about people who are learning English as a second language? Or those with learning disabilities or limited familiarity with the subject matter?
Here are some inclusive design tips for text:
- Write in plain language: Avoid jargon, slang, or technical terms unless they are appropriate. Don’t worry. You can do this without compromising brand voice
- Don’t overuse caps. 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 more legible and prevent screen reader gaffs.
blacklivesmatter is pronounced by screen reader software something like “black live (the verb) smatter”
BlackLivesMatter is announced as you might expect: “black lives matter”#SocialMedia #Accessibility
— Jon Gibbins (@dotjay) July 9, 2020
- Put hashtags and mentions at the end. Punctuation marks are read aloud by screen readers. Be mindful of how hashtags or @ mentions can disrupt copy.
- Avoid saying “click here.” Use descriptive call-to-actions like: Sign up, Try it for free, or subscribe.
- Limit emoji use. Emoji and emoticons (i.e. ¯_(ツ)_/¯ ) are read aloud by assistive tech. That means people will hear things like “loudly crying face” or “pile of poo.” Before using one, look up how it translates to text.
- Use an adequate font size. Make sure text is legible, especially when used in images or areas that aren’t modifiable.
- Avoid special characters. In addition to reduced legibility, VoiceOver and other assistive tools read special formatting very differently.
You 𝘵𝘩𝘪𝘯𝘬 it’s 𝒸𝓊𝓉ℯ to 𝘄𝗿𝗶𝘁𝗲 your tweets and usernames 𝖙𝖍𝖎𝖘 𝖜𝖆𝖞. But have you 𝙡𝙞𝙨𝙩𝙚𝙣𝙚𝙙 to what it 𝘴𝘰𝘶𝘯𝘥𝘴 𝘭𝘪𝘬𝘦 with assistive technologies like 𝓥𝓸𝓲𝓬𝓮𝓞𝓿𝓮𝓻? pic.twitter.com/CywCf1b3Lm
— Kent C. Dodds 🚀 (@kentcdodds) January 9, 2019
- Limit line length. Lines that are too long can interfere with readability and retention.
- Use inclusive language. Avoid ableist language, stick with gender-neutral pronouns and terms, share diverse voices and emoji, and evaluate text for assumptions of limited points of view.
2. Provide descriptive image captions
Descriptive captions and alternative text (also known as alt text) allow people to visualize images when they can’t see them. According to WebAIM, a nonprofit with Center for Persons with Disabilities, missing or ineffective alt text is the most problematic aspect of web accessibility.
Several social media platforms use object recognition technology to provide automatic alternative text. Obviously, there are limits to its reliability. It’s always better to add a custom description when you can.
Facebook, Twitter, Instagram, and LinkedIn provide specific fields for you to add alt-text for images and GIFs (you can also add alt text with Hootsuite). When it’s not possible to add alt-text, include descriptive captions.
If you’re bored of seeing me ask people to describe their photos imagine how bored I am of:
1. writing the same thing over and over again.
2. Scrolling through this app and wondering what is so funny/upsetting/important about that photo.
— Holly Scott-Gardner (@CatchTheseWords) September 25, 2020
Tips for writing descriptive alt-text:
- Convey the content: There’s a huge gap between “Image of a chart,” and something like, “A bar chart illustrates that there has been a year-over-year increase in forest fires, peaking at 100 this year.”
- Skip saying “image of” or “photograph of.” The Royal National Institute of Blind People says most screen readers prefer you don’t.
- Mention color if it is important to understanding the image.
- Share humor. Descriptive text doesn’t have to be overly formal and should do its best to express what’s funny.
- Transcribe text. If the image has copy that is central to its meaning, make sure you include it in the description.
- Learn from the best: WebAIM offers tips and several examples, and copywriter Ashley Bischoff’s presentation is very helpful.
- Don’t forget GIFs. Twitter recently made alt-text an option for GIFs. If the platform does not support alt-text, include a description in the action.
you generally don’t have to say ‘image of’ or ‘photograph of’. Just describe what the image is conveying – what the user is intended to get out of seeing it. Some examples:
— Robot Hugs (@RobotHugsComic) January 5, 2018
3. Include video captions
Closed captions are crucial for viewers with hearing impairments. They also enhance the viewing experience for people watching in their non-native language, or viewers in sound-off environments. Captions even benefit children learning to read.
😳😳😳😂 thank you @AOC!!!!!!
I’ve learnt so much from you because of your captions. Thank you for being inclusive for 466 million deaf people! https://t.co/792GZFpYtR
— Nyle DiMarco (@NyleDiMarco) March 28, 2019
Internal tests at Facebook found that video ads that include captions see a 12% increase in view time on average. Captions help with recall, too. Multiple studies have shown that people who watch videos with captions are more likely to remember the content.
Facebook: Auto-generate captions, write them yourself, or upload a SubRip (.srt) file. Automatic closed captioning is also available for Facebook Live and Workplace Live.
YouTube: Auto-generate captions, transcribe them, or upload a supported file. Errors can be corrected with the caption editor. Automatic captions are available in English for YouTube Live. Community captions, which allowed accounts to crowdsource captions and translations, has been discontinued.
Instagram: Automatic closed captioning is now available for IGTV Live and IGTV. Otherwise video captions must be burned in or encoded in advance. Add captions to your Instagram Stories, and TikTok and Snapchat videos, with custom text. Cliptomatic helps with this.
Twitter: Upload an .srt file with your video. Twitter is also working to add automated captions to video and audio by early 2021.
LinkedIn: Upload an .srt file with your video.
When alt-text fields are not available, include a description in your caption. Here’s how they are typically formatted: image description: (description of image).
PS: Hootsuite lets you upload subtitle files alongside your social videos in Compose, so that you can easily publish videos with closed captioning.
Besides closed captioning, here are some more things you can do to create highly watchable silent videos for social media.
4. Add video descriptions
Unlike captions, which are usually a transcript of spoken dialogue, descriptive language denotes the important sights and sounds that are not spoken. Imagine how the cue card scene in Love Actually comes across to a blind viewer. Or watching the scene in Fight Club where Edward Norton’s character beats himself up.
I challenge you to enjoy a TV programme using audio description. Immerse yourself in the world of audio and experience a TV programme or film from the #SightLoss perspective you never know you might get a lot from it. @sibbymeade @guidedogs @seandilleyNEWS @TPTgeneral pic.twitter.com/oMSjE7nduv
— Martin Ralfe – Guide Dogs (@MartinRalfe_GDs) September 14, 2020
There are a few ways to provide descriptions:
- Descriptive audio. Described video is the narrated description of any important non-verbal elements in your video. This track is written and recorded to fit within the gaps between important audio elements. On social media, described video is typically “baked in” and cannot be turned off.
- Descriptive transcript. Sometimes referred to as a media alternative transcript, these transcripts provide descriptions alongside dialogue, much like a script.
- Live described video. Live video hosts should be familiar with descriptive video techniques, taking pauses to describe what’s happening on screen. Accessible Media Inc. has a good best practices guide.
5. Use a color contrast of at least 4.5:1
For people who are colorblind, or even those who’ve 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 WCAG. For larger text that ratio decreases, but it increases for smaller text. The variations may seem subtle—but they make a big difference for different viewers.
- Avoid green and red or blue and yellow combinations, as they’re difficult to read.
- Text can be difficult to read on images, so consider using a solid background or opaque overlay.
- On graphs and charts, consider also using patterns to differentiate data.
Source: Facebook Design
6. Don’t rely on color to convey meaning
At least 2.2 billion people globally have some form of vision impairment, including colorblindness, low vision, near vision, and blindness. In fact, Facebook’s color scheme is blue because its founder, Mark Zuckerberg, is red-green colorblind.
Color can also mean different things for different cultures. For instance, red may signify a downward trend on US financial charts, but in China red is positive.
- Visualize links. Add an underline or a hover animation to convey that hyperlinked text is clickable. Nielsen Norman Group has helpful guidelines for visualizing links.
- Use symbols. In graphs or infographics, use symbols or patterns as an alternative or addition to color. Or, add clarifying labels.
7. Stay informed about accessibility tools
Some platforms run official accounts devoted to accessibility. If you’re a social media manager or marketer, be sure to follow these accounts to stay informed. Know what options are available so you can assist members of your community should they need your help.
Follow disability rights advocates such as Alice Wong, The Black Disability Collective, for perspective and understanding. Join conversations on social media with the hashtags #a11y #DisabilitySolidarity, and others that you find.
8. Promote positive inclusion
Utility is not the only measure of inclusion. Representation matters, too.
Need proof? Consider The Scully Effect. Not only did female viewers of The X Files look to Agent Scully as a positive role model, they were more likely to value and study STEM after watching the show.
After the Black Panther premiere, Twitter exploded with #WhatBlackPantherMeansToMe tweets.
I would really love a thread of Black kids in Black Panther costumes, as a way to remember and celebrate #ChadwickBoseman 💔
— derecka (@dereckapurnell) August 29, 2020
It’s a basic marketing principle that brands should create content that speaks to their audience. But too often brands overrepresent young, white, straight, able-bodied, cis-gender men in their imagery.
In 2019, male characters outnumbered female characters in ads at a rate of two-to-one.
People with disabilities make up only 2.2% of characters in 2019 ads.
Consider role assignment and portrayal as well. Are women always doing the cleaning? Is romance always heterosexual? Before posting any image to social media, make sure it is not promoting racist, sexist, ageist, homophobic, or other stereotypes.
Your feed should be as diverse as the people in your audience—or the people you’d like to join your audience. Feature diversity through your visuals, partnerships, and collaborations. And when you do, be prepared to provide support. That means you need to show up when the trolls do.
Read our guide to genuine social media activism.
9. Welcome and embrace feedback
It’s rare to get everything right on the first try. That’s why it’s important to be open to feedback and to own mistakes when you make them.
We’re sorry about testing voice Tweets without support for people who are visually impaired, deaf, or hard of hearing. It was a miss to introduce this experiment without this support.
Accessibility should not be an afterthought. (1/3) https://t.co/9GRWaHU6fR
— Twitter Support (@TwitterSupport) June 19, 2020
Facilitate a safe and positive dialogue with your community. Provide contact details, a feedback form, or a prompt that tells your audience where they can share their thoughts. As Google’s senior interaction designer Kara Gates says, “If you want to change the world you have to include it.”
Plan to test and iterate often. Take advantage of tools like Color Oracle to simulate color blindness. Read alt-text aloud – or better yet, use a screen reader or other types of assistive technology to test your content. A full list of helpful tools is included below.
Social media accessibility tools
WAVE Browser extensions
The Web Accessibility Evaluation extensions can be used on Chrome and Firefox to assess your website and its content for accessibility.
Ensure the readability of your copy with Hemmingway Editor. Aim for Grade 8 and lower to comply with WCAG standards. The Readability Test Tool is another option.
Microsoft Accessibility Checker
Microsoft has a built-in accessibility tool available in Outlook, Excel, and Word. Microsoft Inclusive Design Manual also offers videos and downloadable booklets on inclusive design topics.
Thread Reader App
This Twitter bot unrolls threads on the platform so that people can read them more easily. To prompt the app, simply tag it and write “unroll” in reply to the thread in question.
Image Alt Text and Alt Text Reader
Tag @ImageAltText or @Get_AltText in reply to a tweet with an image to trigger these Twitter bots. If available, they’ll respond with the alt text.
Add captions automatically to your Instagram Stories, TikTok videos and Snaps with Cliptomatic.
If you use a Mac, Contrast app is a WCAG-compliant contrast checker. A nice feature about this app is that it allows designers to check their contrast scores as they select colors. The creators of this app even provide a guide that simplifies WCAG standards.
Contrast Checker lets you drag and drop a specific image for a contrast check, which is a good thing to do before uploading assets to social media.
To ensure that you aren’t using color alone to relay information, use the free color blindness simulator. The open-source tool is available for Windows, Mac, and Linux.
Use Color Safe if you need help finding a color palette that offers enough contrast and adheres to WCAG Guidelines.
Text on background image a11y check
This text-over-image accessibility tool helps you determine how legible text is based on color contrast. Use Facebook’s Image Text Check tool to determine if you have too much text on your image.
YouDescribe, by the Smith-Kettlewell Eye Research Institute allows volunteers to create descriptive audio for YouTube videos. Simply copy and paste a YouTube url into the search field and click Create/Edit Descriptions to get started.
67 Percent Collection
As a part of its #SeeThe67 percent campaign, Refinery29 teamed up with Getty Images to offer images featuring plus-sized women. See also the No Apologies Collection, a continuation of the collaboration. Dove also partnered with Getty to break down beauty stereotypes with the Show Us collection.
The Gender Spectrum Collection
Vice encourages media to go “beyond the binary” with this stock photo collection.
The Disability Collection
Global Accessibility Awareness Day, Getty Images, Verizon Media, and the National Disability Leadership Alliance (NDLA) team up to repicture disability with this catalogue. The Brewers Collective also created catalogues with Unsplash and Pexels.
The Disrupt Aging Collection
Access more than 1,400 images that combat ageist biases 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 mentions across social media and the web with Mentionolytics. This tool is a good way to show up and respond to questions and feedback, whether you’ve been @-mentioned or not.
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 your social media channels from one dashboard using Hootsuite. Easily schedule and publish all of your inclusively-designed social media posts, engage with your followers, and track the success of your efforts. Try it free today.