A guide for business by
BravandELIEZ
back to top

Practical steps to take before posting content

Photo credit: Disabled and Here


The social platforms and accessibility

One of the biggest challenges to social media comms teams is that you don’t have control over the medium. Twitter, Facebook, LinkedIn, and the others all have their accessibility quirks. This guide will show you what you need to know in general terms to make your social media comms posts accessible. You may have to do a little research to check up on specific platforms. Where they are available, we have listed the help pages for each platform in the Social media accessibility help pages section. 

Things are changing and the platforms are slowly prioritising accessibility through their updates. If you follow the steps below, you’ll give everyone the best experience on the web. 


Words

How people read online

People scan the web. They look for clues to see they are in the right place. People check the headings, images, buttons to see what the page is about. If it looks interesting they might read from the top to the bottom, as long as they aren’t distracted. 

Also, people read every word. Especially people with low literacy because

  • they never learned to read well
  • they have a reading disability such as dyslexia 
  • English is their second language 


Reading guidelines

  1. Write clear headings, in sentence case (no capital letter at the start of each word) 
  2. Use ordinary words, short sentences and short paragraphs. 
  3. Write as if you are talking to your reader (they might even be listening to your words)
  4. Use the active voice, not the passive.
  5. Avoid ableist language - words like “crazy”, “dumbing down”, “disAbled”
  6. Capitalise hashtags #CapitaliseWordsInHastags (easy to read) #capitalisewordsinhashtags (hard to read)
  7. Emoticons created from text are hard to read, especially for assistive technology :-( 
  8. Don’t use too many emojis. Assistive technology reads the name of the image. Never put an emoji between each word of a post. 

For example

👏Well👏done👏everyone👏 

is read as: 

“Clapping hands Well clapping hands done clapping hands everyone clapping hands”

  1. Be careful of the meaning of an emoji. 😐 is “intended to show a neutral sentiment but often used to convey mild irritation and concern or a deadpan sense of humor”. People’s mood can easily sway the way they see an emoji. 


Reading list

Readability Guidelines is a collaboratively developed, universal content style guide, based on usability evidence.

Writing election information that everyone can read  

Lydia XZ Brown: Ableism/Language


Tools for words

Hemingway Editor - an online editor to help make your writing clear

Readability Guidelines App - a Google Docs Add-on to help you follow the Readability Guidelines

Write in Ernest - A simple editor for Google Docs to help you write clearly 

📙 Emojipedia — 😃 Home of Emoji Meanings 💁👌🎍😍 - find out how assistive technology will say the emoji


Blogs, newsletters and long form

Blog posts, newsletters, and content pages have all sorts of purposes. But the one thing they have in common is that they meet a user need. Help all your users get what they need by using a good structure and useful words. 

Headings 

Headings give people a sense that they are in the right place. They will scan the headings and subheadings. They should “tell the story” that the user is looking for. 

The Readability Guidelines suggest that you should 

  • Use specific, meaningful headings. 
  • Think about the value of your content, the channel it's on and the audience you're trying to reach
  • Front-load headings
  • Put the words users are looking for at the start of the heading. 
  • Structure your page with headings
  • This lets users find the information they want, and skip parts that are not needed
  • Use sentence case for headings and subheadings
  • Do Not Add A Capital Letter To The Start Of Each Word
  • Capital letters make things more difficult to read
  • Label your headings
  • Good HTML labels help assistive technology users to scan through the page, just as a sighted reader can. 

Paragraphs

  • Don’t give users a wall of text. Paragraphs should be 2 or 3 sentences. 
  • Left align text. Don’t justify text where space is added between words so that both edges of each line are aligned with both margins. It might look nice, but it’s harder for some people to read. 
  • Use sub-headings to help people find what they want quickly. 
  • Use lists, which are easier to scan. They should be numbered if there is a specific sequence. Use dots if the order is not important.  

CTAs and Buttons

CTA (Call to action) and buttons should

  • be specific, and make sense in isolation - so that assistive technology users can understand them
  • start with a verb - so that users know what happens next
  • have 2 to 4 words - so they are quick to understand
  • use sentence case - so they are easy to read

Tools for blogs and content pages

Readability Guidelines - a collaboratively developed, universal content style guide, based on usability evidence

Readability Guidelines App - A Google Docs Add-on to implement Readability Guidelines

Webaim WAVE accessibility tool - to check your content headings, alt text, colour contrast and other accessibility issues

Accessibility Insights for Web extension - from Microsoft

Links

Links (or hyperlinks to give them their full name) are the transport system of the web. They take you from one place to another. How often do you hop on a bus “just to see where it goes”? Links should be clear about their destination. 

Don’t use the full URL

They are hard to understand, and assistive technology will read the whole thing. 

Instead, use a shortened version, which can be understood out of context. By scanning the page you can see where the links go. Assistive technology users can also listen to a list of links on a page, and so a human readable form is helpful. 

Here’s an example of the same link, presented differently. 

Learn about links at Readability Guidelines 

https://readabilityguidelines.co.uk/content-design/links/ 

Make link text meaningful

Don’t use links that say “read more”, “more information” or “click here”. Links need to be understood out of context. 

Avoid mid-sentence links

Links in the middle of the sentence can cause confusion as they break up the flow. Put them at the start or end of the sentence. 

Underline your links

The convention on the web is that links are underlined. In paragraphs this is essential as you need to show links as clearly different to the text. 

Pull quotes

If you want people to read the whole article, don’t interrupt them. 

In print, pull quotes attract the reader’s eye as they flick through a newspaper or magazine. They try to pull the reader to this particular article. But when a user lands on a web page, they see the first part of the page, and they will probably see if there is more to scroll down to. As they scroll and read they will be attracted to the pull quote, and lose the thread of what they are reading. Or they might read the pull quote, only to have it repeated in the next paragraph.


Emojis and emoticons

Take care with emojis 🙂. 

Emojis can easily be misinterpreted by people. Emojipedia.org describes this emoji as “A yellow face with simple, open eyes and a thin, closed smile. Conveys a wide range of positive, happy, and friendly sentiments. Its tone can also be patronizing, passive-aggressive, or ironic, as if saying “This is fine when it’s really not.”


Blaming Screen Readers 🚩×5


Avoid emoticons 

Emoticons are created from text :-(

They can sometimes be read by assistive technology, but not always. Listening to a stream of punctuation does not really give any idea what the meaning is.   For example, the “shrug” emoticon ¯\_(ツ)_/¯

Avoid multiple emojis

👏Well👏done👏everyone👏 

Assistive technology will say “Clapping hands Well clapping hands done clapping hands everyone clapping hands”

Reading for emojis and emoticons

📙 Emojipedia — 😃 Home of Emoji Meanings 💁👌🎍😍 - find out how assistive technology will say the emoji


Colour contrast

Colour contrast is the contrast between the background and foreground. This example starts with black text on a light grey and it’s easy to see the difference. As the background gets darker, it becomes more difficult, and in the end impossible to read the text. 

Colour contrast tools

There are lots of colour / color contrast checkers on the web. Choose one that works for you. 

Colour Contrast Checker 

Contrast Checker 

Color contrast checker 

Accessible Colors | WCAG 2.0 AA and AAA color contrast checker

EightShapes Contrast Grid 


Other vision impairments

Many people have slight to extreme vision problems, such as:

  • General poor eyesight
  • Contrast sensitivity
  • Visual snow, glare, ghosting and cataracts
  • Involuntary movement of the eyes
  • Obstructed or spotty vision

Using filters on images

If you use a filter on an image, mention it in the alt text (see next section on Images) or description so that people with vision impairments can understand what they are looking at. 

Snow filter added for effect

Vision impaired “snow”

Vision impairment tools

Google Chrome NoCoffee Vision Simulator  


Images

Represent disabled people

Often we think of a disabled person as someone in a wheelchair. But there are so many more physical and cognitive disabilities, many of which are hidden. Disabled people are everywhere. So please represent them in your social media communications. Disabled people eat bread, wash the dishes, drive cars, care about the environment, donate to charities, start businesses. 

Ideally, find disabled people who use your product and service and ask them to represent your brand. Just as people. Not as a token. Not as an inspiration. Not as a gesture. Just because “Why not?” 

Image banks

Pexels has a lot of images for free use. There are images of disabled people doing everyday activities. Search for disability, disabled, or something more specific like braille, Down syndrome, or sign language. 

PhotoAbility: Authentic Disability Stock Images When authenticity is important to you and your audience...all our models are real people with disabilities and a portion of each sale is paid directly to them 

NosWhyNot? is an agency and training organisation for people with disabilities, based in Spain, but international. 

Disabled And Here is a photo and interview series celebrating disabled Black, Indigenous, people of color (BIPOC).

Disability Inclusive Stock Photography In an effort to empower business to achieve disability inclusion and equality, we encourage corporations to use this in recruitment material, marketing material, internal and external communications, etc. 

Photosymbols: The Easy Read Photo Library Online photo library and essential tool for people who produce easy read information. 


Alternative text

Alternative text gives an image some words. This means that assistive technology can say what an image is. All images on the web need alt text but sometimes an image is just for decoration, so it will have an empty alt text. 

Most social media platforms allow you to add alt text. See the Social media accessibility help pages section to check how. 


Guidelines for Alt text

  • 100 characters or less
  • Empty or null alt text for decorative images - this means that assistive technology will ignore the image. Note that Twitter, for example, does not automatically give an empty alt text. So assistive technology users will hear “image” but not know what the image is. 
  • Images of text. It's best not to use images of text but if you do make sure that
  • The text is legible. Use a clean font, and good colour contrast. 
  • The alt text is the same as the text in the image. “Keep calm and carry on”
  • Don’t start with “Image of…” or “Picture of…” or “Photo of…” as the assistive technology will announce an image. A user would hear “Image, Image of a wall…”
  • If the text is written close to the image then you could have an empty alt text. 

Colour blind friendly

Color blindness affects about 1 in 12 men (8%) and 1 in 200 women (0.5%).

Make colours different enough that colour blindness doesn’t matter at all. Use colorblind simulations to help with accessible design decisions, such as having more than one identifier of state than just colour. As well as colour you might use

  • shape
  • pattern
  • icons
  • font weight
  • underlines (which on the web always show a link)

Reading on colour blindness

Simulations are perfectly imperfect  

Colblindor – All about Color Blindness  

How to Make Your Mobile App Color Blind Friendly 

Particletree » Be Kind to the Color Blind 

Colour blind tools

Coloring for Colorblindness - Create a palette 

Colorblindly - Chrome extension to show the effects of colour blindness

Color Oracle | Color Oracle - free color blindness simulator for Windows, Mac and Linux

Color Brewer Web tool for guidance in choosing map and chart color schemes

Gifs

Animated gifs can be accessible if they are set to stop after 5 seconds or if users are presented with a way to pause it, if they have alt text and if they do not contain blinking/flashing.

You should also ask yourself if there is another way that the message can be communicated. Would a still image do? If not, think about providing an alternative or some way that users can forgo the animation or switch to an embedded video.

From Are animated gifs okay?

BBC GEL | How to make accessible animated images 

Photosensitive Epilepsy Analysis Tool (PEAT) - Trace Research & Development Center 


Presentations

The most complete advice on making presentations comes from the Readability Guidelines. Here are some points that go beyond the advice for Words and Images above.  

Minimal, clear content and alternative formats will make your presentation more inclusive.

For online presentations, send a copy of the slides before the presentation so that participants can prepare for the talk. This helps people who use assistive technology, and people with cognitive impairments. 

  • Keep text minimal - maximum 7 words per line, and 6 lines per slide
  • Use fewer slides not more slides
  • Vary your presentation style - include an interactive element or workshop activity
  • Use large font sizes - 36 px is a good minimum
  • Speak slowly and clearly
  • Describe visual elements of slides
  • Describe visual elements in the room, and silent reactions from participants (“I can see lots of people nodding”, “Jonny is shaking his head”) 
  • Pause at the start of each slide
  • Use a microphone
  • Repeat questions from the audience
  • Consider providing alternative channels for audience questions

Inclusive Design For Accessible Presentations — Smashing Magazine  


PDFs

PDFs are great for one thing: Printing. 

PDFs are not good because

  • making PDFs accessible is hard
  • they are difficult to read on small screens
  • there are more accessible ways to give information

For the most part, there is no reason to use a PDF. If it’s information that should be available all the time, make a web page. If you need to get information out quickly use Google Docs, and then make a web page. 

Here’s an example of a good use of a PDF. It’s for deaf people to print out and take to their doctor for a COVID-19 Symptom Check

 


Don’t use PDFs

Why GOV.UK content should be published in HTML and not PDF - Government Digital Service 

If you must make a PDF, use a reputable company to make sure it’s accessible. 

PDF accessibility service, PDF tagging, testing and auditing 

If you want to make your own PDF follow Adobe Acrobat PDF Accessibility Overview advice. 


Infographics

Infographics like this one have a couple of problems. They are not robust, which is to say that they do not work across all size screens. They are not accessible to assistive technology. And they contain too much data in a small space. 

Infographics can be useful for people who find visual representations easier to understand. But don’t squeeze in too much, and always provide the information as plain text so that assistive technology can access it. 

The text which was available next to this infographic was very limited. 


Tourism sector and COVID-19 (infographic)

In 2020, world tourist arrivals will fall by 20% to 30% annually as a result of the impact of the coronavirus.

The estimated loss of revenue will be 50% and, in the case of air transport, it will be concentrated in the regions of Europe, Latin America and the Middle East.

Spain is one of the OECD economies in which the tourism sector contributes the most to GDP (12.3%) and employment (13.5%).


Alt text for complex images, table and charts

If you are posting a chart or graphic to make one point, that’s OK. Make the point in text as well. Link to the whole data set at the website or Google Doc. Use a real HTML <table> to display the data so that assistive technology can get the information too. 

Reading about accessibility of tables and charts

Why Accessibility Is at the Heart of Data Visualization 

Accessibility Considerations for Charts, Graphs, and Infographics 

An alt Decision Tree • Images • WAI Web Accessibility Tutorials 


Video

With video, accessibility starts with the script. It’s helpful to imagine that you are writing a radio script. Then, any action will have to be thought about in terms of speech or sounds. This will make creating the transcript very simple. 

Think about the Hitchhiker's Guide to the Galaxy. It started as a radio show, and then a book, then became visual. For each change in media, the message is available to everyone. 

Captions

At the very least video needs captions (subtitles are for foreign languages!) 

Kapwing — Where Content Creation Happens 

Descript | Create podcasts, videos, and transcripts 

Audio description

Ideally, audio description should be added. If there is significant action in the video that is not explained by people speaking, audio description has a narrator saying what’s happening. 

Here’s a great example:

The Interviewer - Captions & Audio Description 

Transcript

Add a transcript of the video, for people who want to 

  • read the content quickly
  • make notes
  • read on a Braille machine

Virtual meetings

Video conferencing, online meetings and virtual workshops are hard. But since 2020, people have been working from home. We have learnt that these ways of working open up the world for disabled people. 

The pandemic has shown that inclusion is possible. Everyone can be “there”, at the meeting, from their own home or workspace. The opportunities for disabled people to take part in society, in work, and social events, are much wider than when the world was designed against them. 

We have a duty to keep those lines of communication open with disabled people. 

Sound

  • Invest in a microphone that will pick up your voice better than your laptop mic. Sound is a better investment than image quality
  • Only one person at a time should be speaking
  • Ask people to turn off video when they are not speaking
  • Make captions available
  • auto captions are better than nothing
  • human live captions are best
  • Employ British Sign Language (BSL)/English Interpreters

Vision

  • Screen share can be a problem because
  • People may be watching on a mobile or tablet
  • Screen share is not accessible to assistive technology
  • Main speakers should describe themselves to the audience
  • Don’t rely on images for information
  • Read or describe everything that is on the slide
  • Consider asking people to turn off screen when not speaking, particularly in large meetings

Cognition

  • Send information before the meeting so that people have a chance to read it through
  • Make it clear at the start of the meeting when and how people can contribute
  • Give people time to reflect and respond
  • Zoom has nonverbal feedback options (Yes, No, Slower, and Faster)
  • Review the outcomes of the meeting to be sure that everyone knows what is next

Chat boxes

  • Don’t put essential information in the chat box, where it might get lost
  • Chat boxes in Zoom can be turned on or off by assistive technology users
  • Some people find chat boxes very helpful
  • In large meetings there might be lots of “chatter” in the chat box, which can be very distracting for anyone. The Q&A could be more productive
  • The host could read out important points from the chat 

Breaks

  • Tell people what time breaks will be and stick to them. Some people have needs around drinks, using the bathroom, taking medications. This allows people to plan around the breaks. 
  • Have frequent breaks. This is better for productivity, as people have time to process what they have just learnt or talked about. 

Captions and Sign language

Captions

Sign Language

If you have a BSL / English interpreter, ask them the best way to set up the meeting. Gallery view tends to work better, and non-signing participants should be encouraged to turn off their screen, if possible.

Jo Wootten on The Limping Chicken gives some great reasons that Zoom is popular

  • Picture and sound quality are both good
  • Can enlarge person signing so it’s easier to see them (less tiring to watch)
  • If it’s a long meeting, have 2 interpreters who can see and support each other 
  • Captions can be personalized – you can make them larger/smaller
  • Captions can be streamed into the meeting OR you can choose to view them on a separate screen  
  • Seems to be more stable than other platforms
  • End to end encryption

Presenting and hosting 

Publicity

Make sure that people know about

  • live or automatic captions, if available
  • BSL interpretation, if available
  • the inclusive nature of the event
  • the code of conduct

Before the event

Share presentation slides and other materials with participants. Giving people time to see the slides helps with overall cognition and access. Make sure what you share is accessible.  

It’s also helpful for people who want to follow the slides on their own screen, rather than looking at the slides through Zoom. 

Hosting

For any external event make sure that there is a host who is controlling the meeting. It’s very difficult to present and at the same time organise the chats, questions, and technical issues. 

Screen backgrounds

Don’t use virtual backgrounds, they can make focussing hard and cause headaches. 

Use a plain background where possible, and try to avoid bright sunlight from windows behind the speaker. 

In-event communications

Allow people to communicate the way they find most comfortable

  • Voice
  • Chat box (for large events, a continuous scrolling chat can be very distracting and off putting. Consider closing the chat. Use Q&A instead)
  • Non verbal feedback 
  • Make it clear that people can be comfortable, with their camera and sound on or off 

Asynchronous communications

Podcast

Sound quality

Sound quality on a podcast is even more important than with video conferencing. Many people have hearing difficulties such as tinnitus, so listening to poor quality sound is very hard.  

Who’s speaking?

Deaf people often struggle to distinguish between voices, so highlight who is speaking, especially if there are more than 2 people talking. 

Transcript

Always post a full transcript of the podcast. This allows everyone to access the information in their own way. It also allows people to quickly find the specific item they are looking for. 

One way to add a transcript anywhere is to make a Google Doc. 

ELIEZ podcast

Inclusive Innovators by UCL 

TRANSCRIPT - Inclusive Innovators - Episode 8 - Dom Hyams 

Podcast tools

Descript | Create podcasts, videos, and transcripts 

SoundCloud - Hear the world's sounds 

Email

Use clear, short subject lines.

 People who use assistive technology want to make sure the email is worth reading. 

Use Headers

Although emails should be short, using headings can help people who use assistive technology to find their way through the content. If you want people to do something, people will want to read through the email and then go back to the section they need. Having to listen to the whole email again is a waste of time. 

Use meaningful link text

See the section on links

Content and Trigger warnings

If your content might be sensitive, add a content warning. This is particularly important where your everyday content is not related to this, and people can be caught out. 

If your organisation works in these areas, it’s OK to assume that readers will understand that you will be talking about this content. 

Trigger warnings are a specific type of content warning that warn audiences of content that may cause intense physiological and psychological symptoms for people with Post Traumatic Stress Disorder (PTSD) and other anxiety disorders.

Format

People can mute certain words in Twitter, for example, so use the full word in the content warning. Do not add an asterix “w*rd”. 

CW // word

TW // word 

List of topics that may need a content or trigger warning. 

Sexual assault

• Abuse

• Child abuse/

pedophilia/incest

• Animal cruelty or animal death

• Self-harm and suicide

• Eating disorders, body hatred, and fat phobia

• Violence

• Pornographic content

• Pregnancy/childbirth

• Miscarriage /

Abortion

• Blood

• Mental illness and ableism

• Racism and racial slurs

• Sexism and misogyny

• Kidnapping and abduction

• Death or dying

• Classism

• Hateful language direct at religious groups (e.g., Islamophobia, anti-Semitism)

• Transphobia and trans misogyny

• Homophobia and heterosexism


Reading list 

A guide to content and trigger warnings - The Mix

An Introduction to Content Warnings and Trigger Warnings – Inclusive Teaching