Everything You Need to Know About Inclusive Design for Social Media

http://bit.ly/2TG0cF0

Everything You Need to Know About Inclusive Design for Social Media

http://bit.ly/2Fhyr2b

Inclusive design principles have taken priority on the web. Google even ranks accessible web pages higher in its results.

That’s good, because if there’s one thing the Internet does, it connects a large and endlessly diverse array of people, from barf bag collectors to accessibility advocates.

And while social media accessibility isn’t technically required under Web Content and Accessibility Guideline’s 2.1 compliance standards, it isn’t any less important.

While not all social media platforms have accessible interfaces, there’s nothing stopping social media marketers from creating accessible content and becoming advocates for inclusive social media. After all, you want as many people as possible to be able to enjoy your social presence, right?

Bonus: Get 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 methods aim to deliver an amazing user experience to as many people as possible. In practice, that means shifting away from one-size-fits-all solutions for the “average user.”

Instead, inclusive design accounts for a range of diversity—including ability, language, gender, age, and other factors—by creating a variety of ways for people to engage.

The best inclusive design solutions start with edge cases (those with the most extreme or rare needs) as a basis for innovation. At Microsoft Design, this approach translates into their motto: “Solve for one, extend to many.”

MS design wisdom: “Solve for one, extend to many” and “Constraints are a beautiful thing” https://t.co/wTs7RosPVJ #accessibility #NDEAM pic.twitter.com/larJVvQeac

— MS Office Insiders (@OfficeInsider) October 8, 2017

Closed captions are a prime example of this in practice. Not only do captions assist people with hearing impairments, they also help language learners, and enhance viewing in low or no-sound environments.

Why accessibility matters for social media

A social media strategy without inclusive design considerations will miss out on connecting with a large audience.

A recent survey of Facebook users in 50 countries found that more than 30 percent of people report difficulty with at least one of the following: seeing, hearing, speaking, organizing thoughts, walking, or grasping with their hands.

Worse still, non-inclusive content and experiences will push people away. And it’s not always easy to pinpoint when that’s happening. Excluded web visitors often don’t complain: 71 percent will just leave.

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 social media marketer or manager.

11 inclusive design tips for social media managers

1. Make text as readable as possible

Accessible copy is simple copy, and simple copy is effective copy.

Clear and direct text helps a variety of readers, including those using assistive technology like screen readers and those still learning the language you are posting in.

Here are some inclusive design tips for text:

• Don’t overuse caps. Full-caps can be difficult to read and misinterpreted by screen readers.
• Use camel case for multi-word hashtags. This makes hashtags more legible, more compatible with screen readers, and also prevents gaffs like #Susanalbumparty.
• Avoid saying “click here.” Use descriptive call-to-actions like: Sign up, Try it for free, or subscribe.
• Put hashtags and mentions at the end. Punctuation marks are read aloud by screen readers, so hashtags or @ mentions can disrupt copy.
• Limit emoji use. Emoji also get read aloud by assistive tech. That means people will hear things like “loudly crying face” or “face with closed eyes and stuck out tongue.”
• Use an adequate font size. Make sure font is legible, especially if used in images or places that aren’t modifiable.
• Limit line length. Lines that are too long can interfere with readability and retention.
• Use True Text when possible. What’s True Text? Think of the difference between a blog post and a scanned PDF. True Text is easier to enlarge and translate. And it’s more compatible with screen readers or other assistive technologies.

2. Provide descriptive captions for images

Descriptive captions and “alternative text” (also known as “alt text”) helps people visualize images. According to WebAIM, a nonprofit with Center for Persons with Disabilities, missing or ineffective alt text is the most problematic aspect of web accessibility.

Only Twitter and Facebook provide specific fields for you to add alt-text for images. On other sites, make sure to include descriptive captions for your images and videos.

Tips for writing descriptive alt-text:

• Convey the content and functionality of the image. 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’s relevant.
• 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.
• Read it out loud. Alt text is often read by screen readers, so read copy aloud to hear how it sounds.
• Learn from the best. WebAIM offers tips and good examples, Phase2 provides a number of scenarios, and copywriter Ashley Bischoff offers provides a number of tips.

I’m a blind twitter user. There are a lot of us out there. Increase your ability to reach us and help us interact with your pictures, it’s really simple and makes a huge difference to our twitter experiance allowing us to see your images our way. Thanks for the description ???? pic.twitter.com/hCsjoFdmev

— Rob Long (@_Red_Long) January 3, 2018

This is how captioning works and why it’s important. Would really appreciate people spreading the word and creating a more accessible twitter for blind users. Thanks ???? pic.twitter.com/LMntCuEOqy

— Rob Long (@_Red_Long) January 3, 2018

Tweet: Don't worry TO, It's going to get better soon!!
Unhelpful description: Toronto weather forecast
Helpful description: Forecast for Toronto temperatures, showing -18 Celsius today improving to -1 Celsius by Tuesday. pic.twitter.com/wr51uIXp1F

— Robot Hugs (@RobotHugsComic) January 5, 2018

3. Include captions in videos

Closed captions are crucial for viewers with hearing impairments and can enhance the experience for other viewers.

On Facebook, videos with captions increase average view time by 12 percent. People who watch videos with captions are also more likely to remember what they saw.

Facebook and YouTube provide auto-captioning options, whereas Instagram, LinkedIn, Twitter, Pinterest, and Snapchat require that captions be burned in or encoded in advance.

4. Add a descriptive transcript for video

Unlike captions, which are usually a transcript of spoken dialogue, descriptive language denotes the important sights and sounds that are not spoken.

For example, without adding: “A man enters the room and turns off the oven,” a visually impaired viewer may be confused when the new character suddenly says, “You’re going to burn the house down.”

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 so that it fits 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, a descriptive transcript provides descriptions along with dialogue, much like a script.
• Live described video. Facebook Live video hosts should be familiar with descriptive video techniques, taking pauses to describe what’s happening on screen. Accessible Media Inc. has created a guide for describing live.

Hotels.com took descriptive captions and ran with them, picking up a Facebook Gold Award in 2016.

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 instructed by WCAG. For larger text that ratio decreases, but it increases for smaller text.

• 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.

This image from @teenvogue on Instagram passes the contrast test:

View this post on Instagram

Agreed. ❄️

A post shared by Teen Vogue (@teenvogue) on Nov 25, 2018 at 5:24pm PST

6. Don’t rely on color for meaning

Almost one in seven people have some form of vision impairment, ranging from colorblindness to low vision, near vision, or blindness. In fact, Facebook’s color scheme is blue because its founder, Mark Zuckerberg, is red-green colorblind.

Bonus: Get the step-by-step social media strategy guide with pro tips on how to grow your social media presence.

Get the free guide right now!

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.

View this post on Instagram

At the height of a devastating drugs epidemic in the 1990s, authorities estimated that about 100,000 Portuguese, or 1% of the population, were heroin users. But since 2001, when Portugal decriminalised most drug use, the number of addicts has plummeted. Under this law, illegal drugs remain illegal and dealers are prosecuted. But possession for personal use is an administrative offence, not a criminal one. Anyone caught with a 10-day supply or less is ordered to visit the local Commission for Dissuasion of Drug Addiction. Rehabilitation programmes and opiate substitutes, such as methadone, are available to all users who want to quit. The number of problem heroin users has since fallen to about 33,000. The government can claim only partial credit; drug epidemics tend to fizzle. But decriminalisation and treatment helped cut Portugal’s overdose rate to one of the lowest in Europe. As for America, in 2016 it had 63,600 fatal overdoses. In Portugal there were 27. To read more about why harm reduction is the right way to treat drug abuse, search "Chill pill" at economist.com #drugabuse #addiction #Portugal #Europe

A post shared by The Economist (@theeconomist) on Nov 24, 2018 at 6:05am PST

7. Avoid placeholder text for forms

A clear and descriptive form will always have a better completion and conversion rate than a poor form.

Placeholder text is often used instead of labels, but this can pose usability issues. Placeholders save space, but they are often low in contrast. Disappearing placeholders can make forms harder to review and strain people’s short-term memory, which is probably not your goal.

Labels tell people what information is required. They are often read to people who use screen readers, further underscoring their importance.

Keep this in mind when creating LinkedIn Lead Gen or Facebook Instant Forms.

8. Learn about the accessibility features of social media sites

Social media and community managers should be familiar with the accessibility features offered by the sites they use.

Facebook Accessibility Tips

• Facebook’s Navigation Assistant tool assists people who use screen readers or keyboard shortcuts to use Facebook.
• Change alt text for photos by following these steps. Facebook automatically adds machine-generated alternative text to pictures. But the algorithm is no match for custom descriptions.
• Add captions to video. There are two ways to do this on Facebook: Using a SubRip (.srt) file, or by automatically generating them.
• Adjust video caption size and contrast. Everything from background opacity to text color can be edited here.
• If caption settings are enabled, closed captions will automatically be added to Facebook Live videos.
• Stay up-to-date on Facebook’s accessibility features by following the Facebook Accessibility page and @fbaccess on Twitter. Find Facebook’s Help page for accessibility here.
• Submit Feedback for Facebook accessibility if a follower reports difficulty.

Did you know that you can view and override Facebook's automatic alt text on desktop? You can write your own alt text! It even throws a warning that says, "alt text is usually less than 100 characters." Cool feature, @fbaccess, #a11y pic.twitter.com/zDhkGtbUOo

— Eric Wright (@ewaccess) March 12, 2018

Instagram Accessibility Tips

• Instagram does not offer alternative text features for images or videos. Make sure to provide descriptive Instagram captions instead.
• Add captions to your video. Videos must be encoded with captions pre-upload.
• Use camel-case for hashtags to make them more readable.

Twitter Accessibility Tips

• Make sure you provide appropriate contrast between the background, avatar and bio on your account page.
• Enable image descriptions. Follow these steps to add the ability to describe images for the visually impaired. Now you’re all set to add descriptions to your photos. Descriptions can be 420 characters long. They are also available in TweetDeck.
• Image descriptions can also be composed using VoiceOver.
• Unfortunately, Twitter does not support alt text for GIFs. If you’re using GIFs, consider added a description within your tweet.
• Add captions to video.
• Indicate media type. Add [PIC], [VIDEO], or [AUDIO] in your tweet so people using screen readers know where your link leads.
• Provide summaries of Twitter Chats. If you’re hosting an Ask Me Anything or have a long thread on an important topic, consider providing a detailed recap by email or on your blog.
• Follow @TwitterA11y for updates and queries. Submit a Ticket if you think something can be improved.

YouTube Accessibility Tips

• Provide closed captions and audio descriptions on all videos.
• YouTube provides automatic captioning for livestream and videos on demand. If you use this feature, make sure to read through the captions to ensure accuracy. It’s always better to create custom captions when possible.
• Use YouTube’s caption editor to correct caption errors.
• Include a descriptive transcript. This can be helpful for people with both hearing and visual impairments, such as those who are deaf-blind.

LinkedIn Accessibility Tips

• Use descriptive captions to describe what you are sharing. If it links to media, consider adding [PIC], [VIDEO], [AUDIO], [GIF].
• Make sure captions are burned into LinkedIn native video. Otherwise, link to YouTube video with captions and/or a descriptive transcript.

Pinterest Accessibility Tips

• Include a description of what you are pinning.
• If your Pin links to media, consider adding [PIC], [VIDEO], [AUDIO], [GIF].

Snapchat Accessibility Tips

• Use large text for Snap and Story captions.
• Add captions to video.
• Make sure there is enough contrast between captions and the background.

9. Be thoughtful about representation

Barriers to inclusion are not just physical. If your brand uses photos or illustrations of people, representation should be top of mind.

It’s a basic marketing principle that brands should create content their audience can see themselves in. But too often brands over-represent young, white, straight, able-bodied, cis-gender men in their imagery. Not only does this often miss the mark, it can also marginalize those who don’t fit that description.

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.

Recent findings on representation in media:

• Men get four times as much screen time as women
• Men speak seven times more than women
• 25% of ads feature men only, versus 5% that feature women only
• 18% of ads feature only male voices, versus 3% with only female voices
• Women are 48% more likely to be shown in the kitchen
• Men are 89% more likely to be shown as smart
• Only 2% of ads show intelligent women
• Women are shown in sexually revealing clothing five times more often than men
• 40% of women polled by Unilever say they do not identify with the women they see in advertising. The study also found that almost one-third of women felt advertising depicts women as perceived by men
• Only 2% of images in advertising feature plus-size women, even though they represent 67 percent of all women
• Just 1% of ads surveyed by Unilever show women being funny

10. Plan to test and iterate often

It’s rare to get everything right on the first try. Author Jim Benson said on Twitter: “Software being “done” is like a lawn being “mowed.”” Take the same approach to maintaining an inclusive social media presence.

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.

11. Embrace feedback

As Google’s senior designer Kara Gates says, “If you want to change the world you have to include it.”

If you’re a manager, make it a priority to hire for diversity. Diverse teams are proven to deliver better results.

If your team lacks diversity, seek out other ways to include different perspectives. Listen to your audience and request feedback often. Be open – not defensive – to the feedback you receive. And make sure your contact information is easy for followers to find.

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.

Readability Test Tool

The Readability Test Tool scores the readability level of your copy. Add a link to a URL or test by direct input.

Contrast App

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 guides.

Contrast Checker

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.

Color Oracle

To ensure that you aren’t using color alone to relay information, use the free Color Oracle color blindness simulator. The open-source tool is available for Windows, Mac, and Linux.

Color Safe

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.

Please Caption Bot

Follow @PleaseCaption for friendly reminders to caption your Twitter images.

Dragon Speech Recognition

Use Dragon Speech Recognition to transcribe an audio or video recording. Make sure to review the finished transcript for errors before sharing.

Overstream

Overstream is a free subtitle editor that allows you to create video captions from scratch, or can be used to edit existing YouTube captions.

YouDescribe

YouDescribe, by the Smith-Kettlewell Eye Research Institute allows volunteer describers 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.

Videos can also be paused for extended audio description for when there’s not a long enough natural gap in the soundtrack.

67 Percent Collection

As a part of its #SeeThe67 percent campaign, Refinery29 teamed up with Getty Images to offer images featuring plus-sized women. Photographs available to license can be found here.

Aegisub

Aegisub is a free open-source tool for creating and editing subtitles. You can also use this tool to create transcripts for videos.

Additional social media accessibility resources

• Microsoft Inclusive Design Manual offers videos and downloadable booklets on inclusive design topics.
• GLAAD’s annual Where We Are on TV report offers a pretty good barometer on representation that is likely mirrored in advertising and social media marketing.
• Inclusive Components offers accessible tips for common web interface components.
• Vox Product Accessibility Guidelines provides 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.

Get Started

The post Everything You Need to Know About Inclusive Design for Social Media appeared first on Hootsuite Social Media Management.

Social Media

via Hootsuite Social Media Management http://bit.ly/1LdunxE

January 9, 2019 at 08:32AM