universal-design-center

Social Media Accessibility

Various social media platforms

Social media has revolutionized the way we communicate over the past decade and has established a dominant presence online. As technology continues to advance social media becomes a more crucial communication tool for our everyday activities. People can connect with their family members on Facebook or reach out to hiring recruiters on LinkedIn. The more people use social media to connect, the bigger of importance accessibility in social media becomes.

 Video Presentation in Panopto

 Video presentation in Panopto

 Presentation Slides

Accessibility Presentation

Social Media Accessibility Presentation (pdf) PDF icon

Best Practices for Social Media Accessibility List (pdf) PDF icon

 Video Tutorials


Video Credit: National Center on Accessible Educational Materials - Best Practices for Accessible Social Media (total length 1:02:02 mins)

Best Practices for Accessible Social Media Segmented Videos

In this page you will find a summary of accessibility features, best practices, and resources for the popular social media sites: Facebook, Twitter, Instagram, LinkedIn, and YouTube. 

Facebook

Facebook is committed to designing a great experience for all users regardless of different abilities. Facebook's Accessibility Help Page outlines all of the efforts Facebook is making to help users with disabilities get the most out of Facebook. In addition, the Accessibility of Facebook Page-HACK provides information on current advancements and accessibility fixes in the making.

Alternative Text 

There are two methods to add Alternative (Alt) text to images on Facebook:

  1. By manually adding custom alternative text to images
  2. By using Facebook's automatic alternative text feature
  • Custom Alternative Text: A step-by-step guide to creating manual alt text can be found in Facebook's how do I edit the alternative text for a photo page?
  • Automatic Alternative Text: Facebook automatic alternative text uses object recognition to determine a description of the photo. The alternative text helps people who cannot see the images understand what the image is and what information it is portraying.

Image Courtesy of Facebook

Captioning

Uploading Videos

Users have two options to embed captions on Facebook:

  1. By uploading a SubRip Subtitle (SRT) file 
  2. By editing the video after uploading and manually adding the captions.
  • SubRip Subtitle (SRT) files use the file’s subtitles and timings to match them with the video on the screen. Content creators must ensure that the file is properly formatted and labeled for the captions to correctly appear on screen visit Common SRT Formatting Issues.
  • Users can upload a video on YouTube and add captions, a less technical route. 

Facebook live 

Facebook Live videos can also be captioned. The videos can be automatically captioned or you can connect a third-party application that captions your videos in real-time. Visit Facebook: Closed captions how-to guide for more information.

Keyboard Accessibility

Facebook has a set of keyboard shortcuts that let users post comments, post new statuses, like/unlike stories, and share posts. For more information visit Facebook keyboard shortcuts.

Navigating Facebook with a Screen Reader or a Keyboard

Facebook has a navigation assistant menu bar for screen reader and keyboard users to help them navigate through Facebook. The menu bar has three menus: Section of this Page, Other Pages on Facebook, and Accessibility Help.

  • Sections of this Page announces the different landmarks on the page such as navigation or main content (your Facebook timeline).
  • Other pages on Facebook includes pages on Facebook such as profile, notifications, and settings.  
  • Accessibility Help links to Facebook’s accessibility features, tools, and resources.

Facebook Accessibility Best Practices

  • Include descriptive alternative text on your images, especially for images of text.
  • Avoid having videos be caption-based with no audio. Videos that have no audio and have captions edited on the video are inaccessible to the vision loss community.
  • All videos must be captioned. Consider creating an alternate version of the video that is audio described.
  • Facebook Stories don’t have an alternative text feature, we recommend providing an alternative to viewers.
  • Videos on Facebook Stories cannot be captioned, we recommend providing an alternative to viewers.
  • Provide definitions for acronyms such as Universal Design Center (UDC) this will help people associate the definition with the abbreviation.
  • Video settings can be changed to prevent videos from playing automatically.
  • To avoid inaccessible CAPTCHAs sign up for Facebook through their desktop site instead of their mobile app.
  • Consider adding your phone number to your account for a faster login process.
  • Add content or trigger warnings to your post if it contains graphics or sensitive topics.

Resources

Twitter

Twitter is dedicated to making its website as inclusive as possible and make their feature device independent. Improving the Accessibility of Twitter and the Twitter Accessibility Page (@TwitterA11y) provide information on twitters path to accessibility and improvements.  

Alternative Text 

Adding alternative text on Twitter images is a two-part process, the first part enables alternative text on your Twitter account and the second part shows how to add alt text. It is important to note that you cannot add alternative text to GIF files, we recommend describing the gif within the tweet.

Part 1

    1. Navigate to your profile and select settings and privacy.
    2. Select accessibility
    3. Select “compose image description” checkbox.
    4. Save changes

Part 2

    1. Compose tweet
    2. Attach photo
    3. To insert descriptive text, click Add description
    4. Alternative text is limited to 1,000 characters or less.

Keyboard Navigation

Twitter has a set of keyboard shortcuts to navigate through the website. Twitter users can perform various actions such as liking tweets, retweeting or replying. The shortcuts also allow users to navigate their Twitter timeline.

Captioning

Videos on Twitter do not have a feature to add captions on a tweet. However, there are workarounds to ensure video accessibility. Content creators can link to a captioned or audio described videos. Alternatively, users can also edit or encode captions on the video itself. Twitter Media Studio users can upload closed captions to Twitter videos. There are apps that will add open captions to videos while users recording them. Clipomatic and Clips for iOS devices, and AutoCap for Android devices offer live auto-captioning and editing. Content creators working from a desktop/laptop computer, tools like Camtasia and Kapwing allow to “burn” open captions onto video using a caption file. 

Size and Contrast

Twitter offers a “Night Mode” feature that changes the app's interface to a higher text contrast. The new color scheme features a dark navy background with light text making it easier for users to scroll through their feed, especially at night time.

Best Practices

  • Provide links to videos with captioning.
  • Use camel case on hashtags to increase readability (e.g., “SocialMediaAccessibility” oppose to “socialmediaaccessibility”).
  • Make sure that the content you retweet is accessible if you are unsure make a disclaimer to your followers.
  • Add content or trigger warnings to your post if it contains graphic or sensitive topics.

Resources

Instagram

Instagram is making efforts to create a more accessible Instagram platform.  Some Accessibility information can be found in Instagram’s Help Center.

Alternative Text

Similar to Facebook, Instagram uses facial recognition technology to generate alternative text automatically. Users are also able to edit the alt text generated automatically by following the steps listed in the Edit the Alternative Text on an Instagram Photo page.

Captioning

Video Uploads

As of January 2019, Instagram does not have a feature to add captions to videos. As a result, users would need to add captions directly to the video itself. However, there are apps that will add open captions to videos while users recording them. Clipomatic and Clips for iOS devices, and AutoCap for Android devices offer live auto-captioning and editing. Content creators working from a desktop/laptop computer, tools like Camtasia and Kapwing allow to “burn” open captions onto video using a caption file.  Refer to Accounts that Practice Good Captioning on Instagram for more information.

Instagram TV and Live Videos

Instagram recently created a new feature Instagram TV (IGTV) where users can post up to 10 minute long videos, 1 hour for verified accounts. Instagram just releases NEW auto-generated captions for IGTV in 16 languages. Visit New IGTV Captions.

In addition, Instagram Live Videos do not have automatic captioning or a feature to add captions.

Size and Contrast

Ensure that all images on Instagram have a good color contrast, especially images containing text.

The app also has a feature “Instagram Stories” where people can post a story that disappears after 24 hours.

Instagram stories have an edit option where users can add background colors to text. Users can add a solid color and add opacity. Background color for captions will help increase the readability of the text.

Visit Instagram: Editing Photos and Videos to find how to add a background color on an Instagram story.

Instagram story with a caption and a solid background color
Instagram story with a caption and a background color with opacity.

Best Practices

  • Instagram post that contain text should be 1080px x 1080px to ensure readability.
  • Instagram stories should be 1080px by 1920px to ensure readability.
  • Share stories using the “share” button instead of making a screenshot post; this makes it easier for your followers to navigate to the other account. Visit how do I share someone’s story for more information.
  • Include descriptive alternative text on your images, especially for images of text.
  • Links embedded on Instagram captions are not clickable hyperlinks. We recommend adding links under the “Profile” section using “Website.” If you have a business profile or have over 10,000 Instagram followers you can also add a “Swipe-up” link to your Instagram Story.
  • Consider providing alternatives to Instagram Stories because alternative text or captions aren't available for Instagram Stories and can’t be ready by screen readers.
  • Use camel case on hashtags to increase readability (e.g., “SocialMediaAccessibility” oppose to “socialmediaaccessibility”).
  • Add content or trigger warnings to your post if it contains graphics or sensitive topics.

Resources

LinkedIn

LinkedIn aims to provide academic and professional opportunities for its users, which includes making their website and mobile app accessible to people with disabilities (LinkedIn Accessibility Statement).

Alternative Text

LinkedIn users that are creating a post can add alt text of up to 120 characters.

    1. To add alternative text users must navigate to the “add description” button.
"Add Description" button is on the top right corner of the image.
    1. Insert a descriptive alternative text.
Alternative text field

Alternative text is not available for media files that are on the user’s profile sections. When LinkedIn users want to attach media files such as images, videos, or documents - alternative text is not available. To make media files accessible, use the “Description” section to describe the images or documents files. The description should include what information the readers should expect.

edit media description box

Images embedded on LinkedIn articles also do not contain an alternative text feature. To make the images accessible in the articles you can use sentence image description or add a caption below the image. Refer to Universal Design Center: Images for more information.

Keyboard Navigation

LinkedIn has developed its navigation menu to make easier for keyboard users to navigate. Currently, there are no keyboard specific commands for LinkedIn.

Semantic Structure

Articles on LinkedIn have different semantic features to increase readability. There are heading levels 1 and 2 which will help categorize different sections of the article. There are also bold and italics to emphasize information.

Semantic Features in the LinkedIn Articles

Links embedded on the articles can have custom link descriptions. Link descriptions help screen reader and keyboard users understand the content the link contains.

 
Link descriptions in LinkedIn

Captioning

To add captions on videos uploaded on LinkedIn, a SubRip Subtitle (SRT) file is required. For more information visit LinkedIn: Adding Captions to Videos. An alternative to SRT files is embedding YouTube videos with captioning.

Best Practices

  • Since there is no alternative text feature on LinkedIn articles or file uploads we encourage users to describe the image within the content of the post.
  • When adding media files, make sure to include the file type in the title (e.g., “Accessibility Training PDF”).

Resources

YouTube

As a subsidiary of Google, YouTube is committed to supporting the development of accessible videos. Refer to the Google Accessibility Statement for more information on YouTube accessibility. 

Captioning

The content on YouTube is primarily based on videos, therefore captioning videos is essential. Captions will help videos reach a wider range of audience and make them accessible to people who are blind, deaf or hard of hearing. In addition, captions also benefit seeing viewers, captions can help the viewer understand when audio is distorted or when the viewer is a non-native speaker.

  • Transcripts are text versions of multimedia files. Transcripts can be used for videos or audio recordings. Transcripts are typically useful for users to download and have access to the text of the media.
  • Closed captioning are captions that can be turned off and on by the user.
  • Open captioning are captions that remain on screen and cannot be turned off.
  • Audio descriptions describe the visuals that are portrayed in the video. Examples of what can be included in an audio description are if the video includes diagrams or charts.

The easiest way to add captions on YouTube videos is:

  1. Navigate to Video Manager
  2. Select the Edit button
  3. Select Subtitles/CC
  4. Select Add new subtitles or CC button
  5. Decide if you want to add or edit subtitles or closed captions

For more ways to add captions on YouTube visit Google: Add Your Own Subtitles and Captions or NCDAE Captioning YouTube Videos.

Live Streams

YouTube is currently testing live captioning for YouTube accounts with over 10,000 subscribers. YouTube uses Live Automatic Speech Recognition (LASR) technology to generate captions for live broadcasts. As of now, automatic captions are only available for iOS and Android devices, and computers.

Best Practices

  • Avoid using YouTube’s automatic captioning feature, sometimes captions may be inaccurate.
  • Upload a captioned and an audio described version for each video.
  • All videos must be captioned.
  • Add content or trigger warnings to your post if it contains graphics or sensitive topics.

Resources

Best Practices for Accessible Social Media

These shared resources credit to National Center on Accessible Educational Materials.

Plain Language

Acronyms and abbreviations are everywhere in education. For less character-sensitive social media, consider spelling out acronyms and abbreviations where possible. It’s also important to avoid jargon and academese. This not only increases the cognitive accessibility of your posts, but creates a more welcoming tone for your followers.

CamelCase Hashtags

CamelCase is the practice of capitalizing the first letters of words in multiple-word hashtags. This not only helps screen readers distinguish the separate words in a hashtag, but also increases legibility for sighted people, as well.

Image Descriptions

Twitter mobile and web applications allow you to add descriptions to your images before you post them. So does Instagram. Facebook and Instagram allow you to edit image descriptions after you post. When you can’t describe using alt text, include the image description in the post itself. Remember, text in images can’t be read by a screen reader!

Captioning & Audio

Make sure the videos you’re linking to are captioned. If you’re creating your own videos, make sure to caption them before posting. It’s super easy! And if you really want to go the extra mile for accessibility, include audio descriptions for your video. Or better yet, when you create your video, make sure there are no elements in the video that require visual-only input. For example, read aloud any text in your video. Planning ahead is always better than retrofitting.

Link Shorteners

Link shortening services not only save you characters in your posts, but they help limit the raw characters a screen-reader has to read aloud. Putting raw URLs at the end of your posts is also good practice.

More Resources

Social media tools and apps change daily. We can’t always keep up with each individual platform, but general accessibility guidance and awareness can help us make our posts (wherever we post) more accessible for our followers.