Accessible Content Guide – How To Make Your Online Content Accessible: Instagram, Twitter, Facebook, YouTube, Pinterest & TikTok

With more than 1 billion disabled people in the world, digital inclusion is incredibly important. When creating content we need to and we should be ensuring that it is accessible for all. The great news is that there are simple steps that you can do to make the content you are creating much more accessible for all. So let’s look at ways to do that on various platforms.

Accessible Social Media Content

Sadly, social media companies have been behind the mark when it comes to adding the necessary means to enhance content in the ways needed. Thankfully, we have been seeing change over the last few years but there is a long way to go. We can now, easily add alt text to images, auto caption IGTV on Instagram and on videos on Youtube and Facebook. I believe Instagram is in the beta testing stages of auto-captioning for stories currently also (Horray!).

The steps are similar across all platforms, there are just different ways to apply them. So let’s get into it!

What Is Alt Text?

Alt text is the written text that will appear if an image fails to load on a site. More importantly, it is the text that screen readers, which are assistive text-to-speech devices, read. These devices enable users who are blind, visually impaired or have experienced vision loss to consume content on the internet. Thus, ensuring that the alt text is filled out on any images you upload, across all platforms, makes your content accessible for all.

Of course, any addition to the alt text will enhance your SEO (Search Engine Optimization) but let’s remember that it’s there for a reason, to help those with visual impairment. So when thinking about what to write as your alt text, consider how this will be read by screen readers first, then add in the text you wish to be considered for SEO too. Your content should be user first always.

What Are Auto Captions & Closed Captions?

Auto Caption is available for video uploads on different platforms. This enables your video content to have subtitles. Captions allow people who are deaf or who have hearing loss, various hearing impairments to access your content. They also allow everyone to view videos with sound off.

Closed Captions are subtitles with the additional information of any sounds that are present. For example “A door slams, birds are tweeting, crunching sounds”.

Image Description

Image description is often written in the caption of a social media or blog post, sometimes in the comments. It can be labelled as the following:

Image Description, Image ID, ID.

Its purpose is to give a description of the image. Be as descriptive as possible here.

Make Content Readable With High Contrast Font

Choose fonts that are easy to read. Wavy fonts may look pretty but they can be difficult to make out.

Apply fonts in contrast colours to the background. Colours that blend together can be difficult to make out.

Choose bold instead of italics. As you can see, using a whole paragraph of italics to highlight something can make it difficult to read, using bold to emphasise is more helpful.

Be mindful of using gifs (GIFS are short, animated picture, without sound) and stickers that flash too much. This can cause discomfort, tremors and seizures in people with various photosensitivity disabilities.

Hashtags

Capitalise the first letter of each word in hashtags, for example:

#AccessibleContent

#accessiblecontent

Screen readers are able to read the tag when the words have their first letter capitalised, otherwise it attempts to read it as one word.

Doing this also makes the tag easier for people with various visual disabilities.

Content Warning CW, Trigger Warning TW

CW: Content Warning, TW: Trigger Warning.

If any of your content contains anything of a sensitive nature, that anyone may find triggering, ensure that it is headed with either CW or TW and a brief explanation of the type of content contained. This enables viewers to scroll past if it is of an upsetting nature to them or if it may trigger symptoms or distress.

Here’s some extra points by @disabilitytogether

"Online Accessibility Issues you don't think about." Text in black on top of a white box. The box sits on a purple background. — Image ID: 1: Online Accessibility Issues you don’t think about.” Text in black on top of a white box. The box sits on a purple background. 2: Red background with a white inner box and black text. Heading “Overusing Emojis”. “Overusing emojis or placing them in between words in inaccessible for many disabled people. Blind and visually impaired people that use a screen reader listen to the description of each emoji each time it is used. In addition, reading around numerous emojis in between words can be difficult.” 3: Orange background with a white box in the centre and black text on top. Heading: Overusing Emojis”. The following is an example of how inaccessible it can be for disabled people, especially screen reader users. Only using limited emojis at the end of sentences can help disabled people understand your content.”

Red background with a white inner box and black text. Heading "Overusing Emojis". "Overusing emojis or placing them in between words in inaccessible for many disabled people. Blind and visually impaired people that use a screen reader listen to the description of each emoji each time it is used. In addition, reading around numerous emojis in between words can be difficult." — Image ID: 1: Online Accessibility Issues you don’t think about.” Text in black on top of a white box. The box sits on a purple background. 2: Red background with a white inner box and black text. Heading “Overusing Emojis”. “Overusing emojis or placing them in between words in inaccessible for many disabled people. Blind and visually impaired people that use a screen reader listen to the description of each emoji each time it is used. In addition, reading around numerous emojis in between words can be difficult.” 3: Orange background with a white box in the centre and black text on top. Heading: Overusing Emojis”. The following is an example of how inaccessible it can be for disabled people, especially screen reader users. Only using limited emojis at the end of sentences can help disabled people understand your content.”

Accessible Content guide. Yellow background, with white centre and black text. Heading "Captioning background music". Text body"When posting videos it is important to caption background audio in addition to dialogue. Background music without lyrics can be written in brackets with a description of the sound. Such as [techno music]. Music with lyrics can include the brackets and description before writing the lyrics. — Image ID: 1: Yellow background, with white centre and black text. Heading “Captioning background music”. Text body”When posting videos it is important to caption background audio in addition to dialogue. Background music without lyrics can be written in brackets with a description of the sound. Such as [techno music]. Music with lyrics can include brackets and description before writing the lyrics. 2: Pink background with a middle section which is white with black text: “Creating accessible content doesn’t end with captions and image descriptions. The Following slides detail spree important accessibility problems that aren’t often discussed.” 3: A square with a blue background, a white rectangle centre with black text reads” Disable people belong. Make your content accessible” There is a yellow rectangle at the bottom right with save, share, comment and like symbols.

Accessible Content Guide. Pink background with a middle section which is white with black text: "Creating accessible content doesn't end with captions and image descriptions. The Following slides detail spree important accessibility problems that aren't often discussed." — Image ID: 1: Yellow background, with white centre and black text. Heading “Captioning background music”. Text body”When posting videos it is important to caption background audio in addition to dialogue. Background music without lyrics can be written in brackets with a description of the sound. Such as [techno music]. Music with lyrics can include brackets and description before writing the lyrics. 2: Pink background with a middle section which is white with black text: “Creating accessible content doesn’t end with captions and image descriptions. The Following slides detail spree important accessibility problems that aren’t often discussed.” 3: A square with a blue background, a white rectangle centre with black text reads” Disable people belong. Make your content accessible” There is a yellow rectangle at the bottom right with save, share, comment and like symbols.

Instagram Accessible Content

Making your Instagram content more accessible is very easy and not time-consuming at all! OK, unless it comes to stories, but that is a major bug bear of mine-I’ve been desperate for them to launch auto-captioning for an age!

Here are the simple steps to make your content inclusive and available for all, and who doesn’t want that?!

Instagram Post

To add alt text in an instagram post:

Add your image as usual. At the bottom of the page click ‘advanced settings‘.
On the next page select ‘alt text’. Fill out the alt text section and select ‘done’, returning to your post.

Example screenshot of an instagram post to add alt text. — Steps 1-3 shown visually.
Image ID: 1: Example screenshot of an Instagram post to add alt text. At the bottom of the image is the area to select the advanced setting for this option. 2: Example screenshot of how to add alt text on Instagram. The image shows the advanced settings, at the very bottom is ‘accessibility and the option to ‘write alt text’. 3: Example screenshot of how to add alt text on Instagram.

Example screenshot of how to add alt text on instagram. — Steps 1-3 shown visually.
Image ID: 1: Example screenshot of an Instagram post to add alt text. At the bottom of the image is the area to select the advanced setting for this option. 2: Example screenshot of how to add alt text on Instagram. The image shows the advanced settings, at the very bottom is ‘accessibility and the option to ‘write alt text’. 3: Example screenshot of how to add alt text on Instagram.

Image Description

An image Description can be added manually anywhere in your caption. If you choose to add it in your comments, say ‘Image ID in comments’ in your caption so users are aware.

IGTV

Instagram allows users to enable auto-generated captions. It takes a quick moment to switch this feature on.

Go to settings then account. Next select captions and select the toggle to turn on ‘Auto-Generated Captions‘.

2. Now when you upload your IGTV, just ensure, in advanced settings that ‘auto-generated captions’ is turned on‘ before you press post.

Stories

The best way to make stories accessible at present is to manually caption them. When doing this, remember the tips from above.

Choose fonts that are easy to read.
Apply fonts in contrast colours to the background.
Choose bold overusing italics.
Be mindful of using gifs and stickers that flash too much.

Animated text isn’t inclusive as it can be difficult for people with visual impairments to read.

It’s also worth noting that many people view stories, like Tiktok videos, on silent, so captioning your content really does make it a more welcoming experience for all.

Instagram is thankfully testing captions on their stories at present. It began in March (2021) and is not available readily yet (hopefully soon). I got very excited when I noticed someone local to me using it, here is what the option looks like so we’re all aware to look out for it and add it to our stories as soon as it’s available to us!

Screenshot of instagram stories with the gif page open showing the cc captions option available — Captions on instagram stories!
Image ID: Screenshot of Instagram stories with the gif page open showing the cc captions option available. The background is a dark grey, there are various ‘stickers’ shown including locations, hashtag, donation, music, poll.

A tap on the stickers icon will bring down the menu. Captions is showing as the first option on the left, second row. Click the option and your chatty stories are more inclusive!

There is an external app that you can record and add subtitles with:

Clipomatic is one I have used. Here is an example. It is pretty straight forward to use.

Clipomatic! Video ID: An example video of Amy using the Clipomatic app. She is wearing navy pjs, has no makeup on and is wearing her glasses. She is looking at the phone camera as she speaks and the app is captioning what she says.

You can record directly into the app.

Next you can select the text you have spoken and edit it if you need to make any changes.

Auto captioning app cliptomatic: Screenshot of cliptomatic in text edit mode. The screen is in dark mode so is a mixture of blacks and greys. The text reads "Hello here is an example of using the app Clipomatic." — Auto captioning app Clipomatic Image ID: Screenshot of clipomatic in text edit mode. The screen is in dark mode so is a mixture of blacks and greys. The text reads “Hello here is an example of using the app Clipomatic.”

Then press save and upload to your instagram from there.

Find more information on Clipomatic via this link: Clipomatic

Sadly I haven’t found anything for reels or guides yet (although if everyone makes their posts accessible using the above advice then guides will automatically become more accessible) but as soon as more options become available I will update this post!

Here’s a link to a free colour contrast guide checker!

Facebook Accesible Content

Here are the simple steps to make your Facebook content accessible. Again accessible content includes adding alt text, image descriptions and auto-captioning videos.

Alt text on Facebook:

Choose your image to upload.

2. Click on the 3 dots on the top left hand corner.

3. Select ‘edit alt text’

4. Fill out alt text, select ‘done’

Accessible Facebook: Screenshot of editing a Facebook post. Amy is uploading an image to Facebook as an example. She has her hair blown dry, is wearing a bright red lip and looks quite put together for once. She definitely looks better than she feels. Her top is black with white polka dots. The image shows the icons to select to add alt text to your image, as well as various other Facebook icons. — Steps 1-4 shown visually. Image ID: 1: Screenshot of editing a Facebook post. Amy is uploading an image to Facebook as an example. She has her hair blown dry, is wearing a bright red lip and looks quite put together for once. She definitely looks better than she feels. Her top is black with white polka dots. The image shows the icons to select to add alt text to your image, as well as various other Facebook icons. 2: A screen shot of adding or changing the alt text on a Facebook post. In the foreground you see the options to select in order to add the alt text, in the background the the image the user is editing. 3: A screen shot of adding or changing the alt text on a Facebook post.

Steps 1-4 shown visually. Image ID: 1: Screenshot of editing a Facebook post. Amy is uploading an image to Facebook as an example. She has her hair blown dry, is wearing a bright red lip and looks quite put together for once. She definitely looks better than she feels. Her top is black with white polka dots. The image shows the icons to select to add alt text to your image, as well as various other Facebook icons. 2: A screen shot of adding or changing the alt text on a Facebook post. In the foreground you see the options to select in order to add the alt text, in the background the the image the user is editing. 3: A screen shot of adding or changing the alt text on a Facebook post.

Caption Photos And add Image Description

Ensure that images are captioned with details of what’s going on. This of course leads to adding the Image Description. Which simply gives a description of what the image represents.

Facebook Auto Captions

On Computer:

Click the arrow in the top right of Facebook.
Select Settings & Privacy, then click Settings.
Scroll down and click Videos in the left column.
Click Off next to Always Show Captions.
Select On to turn on captions for Facebook videos, when available.

Your caption settings will only apply to videos you watch on a computer.

Phone:

Go to your device’s home screen.
Tap Settings.
Tap Accessibility, then tap Subtitles & Captioning.
Tap next to Closed Captions + SDH to turn on captions for videos, when available.

Facebook Lives

In April 2020, Facebook added automatic captioning to all Facebook Live videos. This means that captions appear on all videos when the sound is muted.

Facebook Stories

Like instagram, at present it is best to caption your stories!

A cartoon drawing of a phone is to the left of the share with a pale pink background. In the centre of the phone is an example of a social media story. To the right of the phone are three speech bubbled one above each other. One word is in each bubble. "caption, your, stories." — Caption your stories! Image by @acosyreadersdesigns Image ID: A cartoon drawing of a phone is to the left of the share with a pale pink background. In the centre of the phone is an example of a social media story. To the right of the phone are three speech bubbled one above each other. One word is in each bubble. “caption, your, stories.”

Youtube Accessible Content

Lets look at how to make Youtube content as accessible as possible!

Autogenerated Closed Captions

After you’ve uploaded your video, from the public page, ‘click edit’.

From the dashboard, click ‘other features’.

2. Next select the language, for me this would be ‘English Automatic’.

If I were to click “Add new subtitles or CC” button at this point, I believe YouTube would go ahead with automatic transcription. However, there is further option to edit any miscorrections there may be (and if like me you have an accent that these clever little algorithms don’t always quite get right, this is handy! I’m from the northeast of England by the way!) So don’t press that just yet!

3. Click, edit.

Now you can make any amendments necessary to both the subtitles and any sounds that you may need to add for closed captions (closed captions are both the dialogue and sounds in the videos; this may be birds tweeting, darks barking, a doorbell ringing etc.)

4. Once finished, click ‘Publish’

5. Next ‘Share’ and ‘Embed’.

Twitter

Making content accessible on Twitter is nice and quick and I love their later updates in Fleets!

Alt Text

To add alt text on Twitter:

Press tweet icon and choose image.
Tap +Alt on image.
Add concise but accurate description.
Click done.

Accessibility Twitter A screenshot of editing a twitter post, showing the steps of how to add alt text. The user has their device on 'dark mode' so the background is a dark blue, the text a light blue. — Steps 1-4 shown visually. ID: 1: A screenshot of editing a Twitter post, showing the steps of how to add alt text. The user has their device on ‘dark mode’ so the background is a dark blue, the text a light blue. 2: In this image you can clearly see the uploaded image and Twitters ALT icon. The user has their device on ‘dark mode’ so the background is a dark blue, the text a light blue. 3: A twitter notification reads “add descriptions” and explains the use of alt text. The user has their device on ‘dark mode’ so the background is a dark blue, the text a light blue. 4: At the top it states “write alt text” in a white font. the option to do so is underneath the users image. The user has their device on ‘dark mode’ so the background is a dark blue, the text a light blue.

Fleets

Twitter Fleets are fleeting stories that are available for 24hrs. You can share any kind of content from photos to videos.

Twitter has made it more accessible by enabling users to add alt text to the content they share in the same way you would an image or video in a regular tweet! So whatever you post remember to add that alt!

TikTok

As I mentioned earlier, flashing lights (gifs and stickers) can cause distress for many people with visual disabilities. This has been something tech companies have definitely been slow on the mark with in terms of providing warnings and such. I for one know the severe impact this can have on people’s lives and let me tell you, folks, it’s not nice at all.

Thankfully, TikTok stepped up to the mark in January with the announcement of ‘photosensitive video feature’ which allows users to remove videos that contain photosensitive content. Well done TikTok. This is people’s health and safety after all.

As a user, you are now given the option to ‘Skip all’ photosensitive content’ should you come across it and the image/content is covered until you choose otherwise.

TikTok have also announced auto-captioning is coming soon too! Yay!

Captioning

In TikTok, many users view videos with the sound off, so captioning your videos is great for the community as a whole. To caption your video:

Film your video then select the text icon at the bottom of the screen.
Add the text to the part of the video needed.
Click the text and select ‘edit duration’. Now you can adjust the toggle at the bottom of the screen to set when the text will appear and disappear.
Do this for all relevant areas.

Text To Speech

TikTok has a great feature where the app will dictate the text you write. Simply create your text as above, then click on the text and select the ‘text to speech’ option once you have filmed your video. The text will now be read aloud.

Voiceover

To add a VoiceOver to your video simply select the microphone symbol on the right-hand side of your screen. Press and hold the red button.

Pinterest has been working hard to improve accessibility, here’s how to make sure your content is as accessible as possible.

Alt Text

Click ‘create pin’.
A text box will open which allows you to select your image. On a computer, you can then select ‘alt text’ here and fill that in. On your phone, simply press to add the photo and then click ‘alt text’ at the bottom.

Remember to write a detailed image description in the caption also.

Image Size

For Pinterest the larger the image the better. Pinterest image ratio is 2:3. Try to make sure your image is of good quality and not blurred so that it is easy to be viewed.

Linked Website

Pinterest allows you to link a website to the image that you post. When doing this consider if the website you are linking is accessible?

The Internet Is For All

The world needs to become more accessible and inclusive, both in the real world and the digital world. Implementing these simple steps can make a great impact on how others can interact with your content and your website. Surely that’s the goal for everyone.

While that should be everyone’s main focus, of course making your platforms more accessible means an increase in traffic and a better chance of ranking higher with Google’s SEO.

There is quite literally no negative outcome from taking these steps.

Just a heck of a lot of good for a heck of a lot of people.

I’m always here to listen and learn further and grow myself. So please, if there’s anything more I can add or improve on myself please let me know! I’m looking at a new theme for my website to improve it and researching how to create an audio cast where I can provide audio versions of my blog content, so look out for that!

You can also print any of my blog content. To enable this function on your website I recommend a simple plugin. I use Print, PDF & Email by PrintFriendly.

There’s the comments below, my contact form and any of my DM’s on my social media.

Thanks so much for reading!

You can find me on social media here: