Social Media Accessibility

Why make Social Media accessible?

Social Media is a useful tool for both instruction and promotion. It is changing how people interact with one another, gather information, and changing how business and governments share information and deliver services.

Social Media platforms such as Facebook, Twitter, and YouTube may not be fully accessible on their own. Anyone using a screen reader often has difficulty navigating social media due to lack of headers, no keyboard shortcuts, alternate text for images not added by posters, poor colour contrast, and videos with no closed captioning.

Before using social media as a teaching tool, consider that some students with disabilities will not be able to effectively use it. There are tips and methods that improve accessibility for users but since social media platforms evolve constantly, these tips and methods can change frequently. If you are aware of a different tip to enhance the accessibility of social media, please connect with the Accessibility Hub.

Facebook is a popular social networking tool that allows users to create a personal profile, add other users as friends, exchange messages, and share information and media.

Accessibility Issues

  • Timeline layout does provide a logical reading order of top-to-bottom but can be difficult and confusing to navigate.
  • CAPTCHA during the sign-up process. Although there is an audio alternative but many users have reported that this does not work very well depending on which device or web browser is being used.
  • Facebook will change its layout frequently which makes remembering navigation difficult.

To its credit, Facebook has done a lot of work to improve accessibility of its sites and profiles. Facebook encourages feedback and has provided a page of information to improve accessibility.

Adding Automatic Alternate text to Images

Automatic alternative (alt) text is a feature that uses object recognition technology to create a description of a photo for the blind and vision-loss community. The description provided by automatic text can be edited in certain circumstances.

Tips to Improve Facebook Accessibility

General Account Information

  • Ensure your website address is listed in the “About” section of your Timeline/Page in order to provide an easy point of entry to more information.
  • Include other ways to contact your organization, such as your department number with an extension, an online “Contact Us” form, or general contact email address for more information.

Photos, Video, and Audio

  • Provide a caption for any photo you post. On your Facebook page:
  • When creating a new album, add captions to your photos by going to the edit input field associated with a photo. Enter caption text. Repeat this step for all photos in the album.
  • When uploading a single photo, type a caption in the text field that will be used as a caption for the photo.
  • If the photo/video/audio is on your website you can provide a link back to the webpage that hosts a copy of the photo, video, or audio with full caption/transcript.
  • After posting the photo, video, or audio, immediately post a comment that directs users to the full caption or the full transcript.
  • If you have a YouTube channel, upload your video to your channel and make sure you enable closed-captions (you’ll want to upload your own transcript to make sure the captions are accurate). Then post a link to your YouTube video as your status update, rather than uploading the video into Facebook. This will ensure that visitors will be taken to your accessible version on YouTube.

Status Updates

Many Queen’s departments use acronyms. When only the acronym is used for the department name it can be confusing to screen readers. It is always best to use the full department name followed by the acronym in parentheses. For example: Health, Counselling, and Disability Services (HCDS). A screen reader will read the full name and the acronym so the user can associate the sound of the acronym with the department.

Other Tips

For some, using the mobile version of Facebook is a more accessible alternative. It is more basic in function and layout and uses html code making navigation easier.

There are also many apps for Facebook that can yield a more accessible experience. An example is the Facely HD app for Apple devices (iPhone, iPad, and iPod Touch) and works well with the VoiceOver screen reader built-in to Mac iOS.

Instagram users take photos of what they are doing and post them or send them to friends. Users are also able to take very short videos and post them. The visual content makes this platform fairly inaccessible for those with visual disabilities. There are few options to make posts more accessible, which are listed below

Automatic alternative text uses object recognition technology to generate a description of photos that work with screen readers, so you can hear a list of items that photos may contain. This feature can be found in the Feed, Explore, and Profile sections.

Instagram is also introducing custom alternative text. Custom alternative text allows you to add your own description when you are uploading a photo to ensure screen reader accessibility.

How to add Instagram Alternative Text

  1. To see and edit alt text for a photo before you post it on Instagram:
  2. Start by taking a photo or uploading an existing photo to Instagram.
  3. Choose a filter and edit the image, then tap Next.
  4. Tap Advanced Settings at the bottom of the screen.
  5. Tap Alt Text.
  6. Write your alt text in the box and tap Done.

To change the alt text of a photo after you've already posted it on Instagram:

  1. Go to the photo and tap
  2. Tap Add Alt Text in the bottom right.
  3. Write the alt text in the box and tap Done.

Snapchat is a newer form of social media, which involves sharing photos and videos. It connects people as well as business and shows current events. What sets Snapchat apart is Videos and photos can only be viewed once before it is deleted.

While Snapchat has limited accessibility, there are things you can do to promote accessibility in your posts.

  • Use the largest possible for everyday chats and ensure that the text is legible against any background image. The default text is a smaller white font with a black line behind the text. This smaller text may be hard to read for people with low vision. The larger text option is located in the top right corner of screen after you type out your caption. The button is shaped like a “T” for text. There is also an option to change the color of your text appears in the top right corner of the screen after you type your text. (This option is only available for the larger text format option.)
  • Plan your snap stories ahead of time, so they make sense.
  • Use good lighting for photos and videos.
  • Upload your snap story videos to YouTube where you can caption the video. Then link to your YouTube video.

Twitter is a popular social networking tool that allows users to send a short text-based message up to 280 characters long known as a ‘tweet’. These tweets are then published online to a profile page and can be publicly viewed. Twitter users can post their own tweets, follow the tweets of other profiles they follow or contribute to a wider online discussion based on a particular topic or event.

Accessibility Issues

  • No accessibility hotlink which lists the accessibility features of the site.
  • Registration is done with a CAPTCHA system; audio option available however the link for it is small.
  • Text resizing is locked.

Adding Alternate text or Descriptive Text to Images

When you Tweet photos using the Twitter app for iOS or Android, or on twitter.com, you have the option to compose a description of the images so the content is accessible to people who are visually impaired.

  Making images accessible

Tips to improve Twitter Accessibility

General Account Information

  • In the “Bio” section of your profile, include other ways to contact your organization, such as your department number with an extension, an online “Contact Us” form, or general contact email address for more information.
  • Ensure you have good colour contrast between the background, avatar, and bio information.

Photos, Video, and Audio

Put the following prefixes before tweets that have photos, videos, or audio. This allows people using screen readers to know what to expect before it’s read out loud. The uppercase formats are for further clarity to sighted users.

  • Photos: [PIC]
  • Videos: [VIDEO]
  • Audio: [AUDIO]

If your website has a full closed captioned video or transcript posted online, include a link back to the page.

Make your tweet serve as a descriptive caption so it has context for the item and then link back to your website if necessary.

Composing Tweets

  • Place any hashtags or @mentions at the end of the tweet. This allows a screen reader to voice the main content of the tweet more clearly in the beginning, and saving the service-specific speak for the end (the parts that sound confusing).
  • Avoid using unfamiliar acronyms or “text-speak” that would sound strange if read by a screen reader. If space allows, try to spell out the acronyms or use full words to better convey the information.
  • Use "CamelCase" for multiple words for hashtags; that is, capitalize the first letters of compound words (e.g. use #QueensUniversity not #queensuniversity).
  • If your phone has built-in text-to-speech (VoiceOver for iPhone) or a text-to-speech app, try listening to your tweet prior to distribution so you know how your message would be conveyed to a person who is blind.

Displaying Tweets in a Widget

If your Twitter Feed is displayed on a website through a widget try using the Twitter API or Embedded Timelines feature to display your tweets on your website.

  Embedding a Tweet on your website or blog

Other Tips

For some, using the mobile version of Twitter is a more accessible alternative. It is more basic in function and layout and makes navigation easier.

There are also many apps for Twitter that can yield a more accessible experience. Plume for Android devices and Easy Chirp: an accessible alternative to Twitter. Easy Chirp operates in a similar way to the main Twitter website but provides a more consistent layout, good keyboard navigation, better support for assistive technologies such as screen readers. It also allows users to add alternate text and long descriptions to images.

YouTube

YouTube is a popular video sharing website. It contains a variety of user-generated videos. YouTube also has a range of professionally created content including clips from television shows and commercials, movie clips and music videos. Users who visit the YouTube website can view these videos, but only people who have registered accounts may upload videos online.

Accessibility Issues

  • Registration is done with a CAPTCHA system and may be difficult to use with persons who are blind or low vision.
  • Lack of keyboard controls for the interface of the video player
  • Lack of closed captioning or described video.
  • If the closed captions are not supplied by the account owner, YouTube’s provides machine-generated captions automatically and may be inaccurate.

Tips to improve YouTube Accessibility

When using a Screen Reader

YouTube offers several versions of its embeddable player, including an HTML 5 version and a Flash version. The HTML 5 player is fully accessible but the Flash version is not so screen readers may have difficulty using the player interface due to lack of keyboard shortcuts. A way around this to use an alternate viewing portal that has accessible player controls.

YouTube also provides instructions on Using YouTube with a screen reader.

Creating Closed Captions

As mentioned, YouTube can create machine-generated captions automatically. However, the resulting captions may be inaccurate depending on several factors such as audio quality, background noise, or number of speakers. You will find you will either have to:

1. Edit the automated captions

Using YouTube’s caption editor you can correct and clean-up your captions.

  • Correct misspellings and remove “like” and “umms”.
  • Correct the pacing by shifting words to the next or preceding caption to ensure complete phrases never bridge two captions (i.e. nouns and verbs are connected to their modifiers, and prepositional phrases are not separated)
  • Delete blank time segments. It’s best to select the timer on your full-sentence caption and increase the time to run for the duration of the full sentence. The idea is to steal time from pauses to fit in the full text, in situations where it’s difficult to get all the words in… but not to go as far as to replace pauses that are part of “the story”.

See more:

2. Create your own

The basic steps in captioning YouTube video are:

  1. Get a transcript
  2. Editing/Synchronize the transcript with the video
  3. Upload the caption file.

See more:

3. Out-source

For example:

Adding Descriptive Transcripts to YouTube

  1. On the YouTube video page, go to the video’s transcript by selecting the “Transcript” icon and copy and paste it to a new website page or a text file (e.g. Word);
  2. Remove/delete the timecodes. Alternatively, you may download the .srt file from YouTube’s caption editor, and remove the timecodes using the free software Aegisub for Windows, OS X, or UNIX;
  3. Search and replace any extra hard-returns and replace all line endings with single spaces;
  4. Insert any descriptive text. This can be copy/pasted from scripts if available. E.g.  “The woman quietly enters the room and turns on the light”;
  5. ​Insert the resulting text into a separate web page on your website. Create a “Transcript” link below the embedded video that links to that web page.  Alternatively, if you have room or a short video, you may copy the transcript text and put it below the video (e.g. Health Canada: Reducing Radon in Your Home).