Problems with accessibility and online content: How to create digital content for impaired vision, hearing and disabilities

As content creators we have a responsibility to serve our audience to the best of our ability.

As online access becomes more ubiquitous across the world, we have a further responsibility to ensure the content we create online is accessible to everyone – to include people in your audience with impaired vision, hearing and temporary and permanent disabilities.

In this week’s guest post, CMA Member Claire Brotherton shares with you 8 reasons why your content may not be as accessible to your audience as you think, and what you can do to solve these problems

Let’s get stuck in…


As content creators, we want our content to reach the widest possible audience. We can publicise it through social media, email marketing and more.

But what if people find our content and then can’t access it?

1 in 5 of us in the UK live with a disability. And the likelihood of being affected increases with age.

The value of the UK disabled pound is estimated at £212bn. A significant sum.

Plus, we can all become temporarily disabled at any point. For example:

  • A broken wrist
  • An ear infection
  • Misplacing your reading glasses
  • Squinting at your phone screen in strong sunlight

What are some of the most common problems we have with accessible content creation  – and what can we do about them?

8 problems with accessibility of online content and how you can solve them

1. Missing or incorrect headings

Astrid is retired from her job as a cook. With advancing age her vision has declined. She now relies on a screen reader to access the Web – a program which reads the pages to her. One of the ways she navigates web pages is by accessing a list of headings on the page. She can then select the section she wants to hear more about.

Astrid looks up an article on 100 household tips to save time and money. Unfortunately she can’t easily find the information she wants because the only heading in the article is the page title.

How could you help Astrid?

Solution 1 – Use headings!

Headings help everyone! It’s much easier for a sighted person to scan down a long post and find the key points if it’s divided up with headings.

For the household tips post, the tips could have been organised by room.

Adding text in bold as a pseudo-heading is not the same. Screen readers don’t read bold text in the same way as headings.

Solution 2 – Use the right heading levels in your articles

Blog posts should begin with a Heading 1 (H1), so don’t add another.

Organise your posts in blocks covering your main points.

The first subheading in a block will be a Heading 2, the next a Heading 3. And so on down to Heading 6, if you get that far,

The next block begins again with a Heading 2.

If the heading level you need to use doesn’t have the right look e.g. it’s too big or small, ask your web designer for help. Don’t mix your heading levels up just to get the right visuals.

Use the HeadingsMap browser extension to check your heading structure.

 

HeadingsMap shows a logical outline heading order for a post

2. No alt text on images or a poor choice of alt text

Dopinder is a call centre worker. He commonly uses his iPad with the VoiceOver screen reader. He visits many blogs but gets frustrated when he finds images that haven’t been properly labelled with alternative text (“alt text”). He feels he doesn’t get the full value from the posts.

Alt text is added to images as a way of imparting the meaning to users who can’t see them. It is usually set on image upload. But often content creators forget to add it or don’t realise its importance.

How could you help Dopinder?

Solution – Check your existing images for alt text

A quick way to check if an image has alt text is to use the Alt Text Tester Chrome extension for desktop.

Once installed, open a web page and tap the icon in the browser bar.

Hover over an image to see what the alt text is.

Eighteenth century sailing ship. Alt Text Tester reveals alt text missingDon’t worry about background images – they can’t have alt text.

Solution 1 – Add appropriate alt text to images

The main problems with alt text are:

  1. It’s not present at all.
  2. It says something unhelpful like “Picture”.
  3. It doesn’t accurately describe the image.
  4. For image links, it doesn’t show the destination of the link.

If you discover any of these issues, you need to add or change the alt text to something meaningful.

Examine this photo. What should the alt text be?

a garden shed painted light grey on a raised platform with window ajar and a wooden bench outside

There’s no correct answer; it’s open to interpretation and depends on context.

You could label it “shed” but that doesn’t tell the user much.

A better alt text might be “a garden shed painted light grey on a raised platform with window ajar and a wooden bench outside”.

If you sold sheds, you might want to mention the the product name, or the type of wood used. But don’t make your alt text overlong. Or deliberately stuff your alt text with irrelevant keywords.

Read my post for more advice on adding alt text.

If you use WordPress, you can install the  WP Accessibility plugin, which enforces adding alt text to all images. If you forget, the plugin reminds you.

If you have a purely decorative image, you can label it as such.

The plugin also flags up any images missing alt text in the Media Library.

Solution 2 – Alt text for Twitter

Did you know that you can also add alt text to images in your tweets? Twitter rolled out the ability to add image descriptions in 2016.

Note that the setting is hidden by default, so you’ll have to enable it before you can use it.

Buffer are working on adding the same functionality to their platform. It’s on their development roadmap.

3. Clear language

Jasmine is a student. She has dyslexia. She has a technical issue with her laptop and finds a blog which she thinks can help. But it’s full of acronyms which aren’t defined and very long sentences. The article doesn’t make sense to her.

How could you help Jasmine?

Solution 1 – Check your written content

Watch for:

  1. Overlong sentences
  2. Too much jargon
  3. Spelling and grammar errors
  4. Long lists that could be put in bullet points

Solution 2 – Simplify your content

Use Hemingway Editor to help write shorter sentences and use simpler words.

Hemingway Editor showing suggestions for improving your writing

4. Badly worded links

Sayid is a maths lecturer. He has a visual impairment and uses the Zoom tool on his Mac to magnify his computer screen. He can only see a small amount of a web page at any one time.

Sayid wants to order a CD from Amazon. He’s prompted to read their privacy notice. When he does, he sees a lot of “Click here” links. He finds this frustrating and off-putting and decides not to order after all.

How could you help Sayid?

Solution – Make link destinations clear

“Click here” links are no good to blind or partially sighted people, They can’t tell where the link goes if they can’t read the surrounding words.

“Click here” also makes no sense for:

  • Mobile users, who don’t use a mouse.
  • Search engines, which can’t tell what the link is about. (This could affect your page ranking!)

Try not to use the URL as your link text if you can help it.

Imagine when you write link text that the user hasn’t read any of the rest of the page. Would they know what to expect from the link text alone?

See UX Movement’s advice on creating better links.

5. Rubbish typography

Valda is a dog trainer. She is short-sighted and wears glasses. She is also prone to migraines. She’s keen on keeping up with the latest political developments.

Her friend told her to visit the Drudge Report website for politics news. Valda found it so difficult to read she didn’t revisit.

How could you help?

Solution 1 – Choose legible fonts

Some website building software allow you to go a bit nuts with fonts.

The language of Shakespeare is hard enough to understand without presenting it like this!the opening speech of Shakespeare’s Twelfth Night in 12px Indie Flower fontWhat do you need to avoid for body text legibility?

Solution 2 – Use italics and bold sparingly

Italic text can be harder for some people to read. A Spanish study showed that italics impaired reading for people with dyslexia.

The same goes for too much text in bold.

Solution 3 – Don’t overuse uppercase text

Too much uppercase text reduces readability. Leave capitalization for headings or abbreviations.

Solution 4 – Keep the line length moderate

This is more of a design issue, but 50-60 characters is said to be the optimal length for readability.  On desktop, don’t have the text span the full width of the screen.

Avoid justified text in your written articles. The words can “swim” for people with dyslexia.

6. Woeful colour contrast

Alex is a call centre worker. He has incomplete achromatopsia, a rare form of colour blindness. To Alex, most colours look grey.

He uses his smartphone to visit a tech site for information on a new phone release. He can’t tell the difference between the links and the grey article text because the colours look too similar.

Dark blue which most people see

Dark grey which Alex sees

Solution 1 – Avoid low colour contrast

Remember the fashion for light grey text on a white background? I loathed it. I still do.

The recommendation for colour contrast is a 4.5:1 between foreground and background.

You can check colour contrast with a number of tools. I like the WAVE tool by WebAIM. It shows contrast problems, and indicates how you could improve the contrast by lightening or darkening the colours.

WAVE tool shows a contrast ratio of 2.85:1 between grey foreground and white background

Solution 2 – Don’t rely on colour alone to convey information

Low contrast between links and body text is one reason why it is recommended to underline links. It makes the link unambiguous.

If you create a chart, use another method in addition to colour to label the sections.

7. Podcasts minus transcripts

Min-jun is a business consultant who is deaf. He would love to get top marketing tips from the Single Grain Marketing School podcast, but there is no transcript available. So he has to miss out.

How could you help Min-jun?

Solution – Provide transcripts

Transcripts work for both audio and video. You can go down the DIY transcript route or outsource their creation. Outsourcing can cost as little as $1/minute.

I appreciate when transcripts are provided. If I don’t have the time to watch or listen to content I can scan down a transcript and get the overall meaning.

Transcripts also benefit your SEO. This American Life added transcripts to their podcast and noticed afterwards:

  • Better user engagement
  • New inbound traffic
  • More inbound links

8. Video captions

Belinda is the CEO of an investment company. She is hard of hearing and opts to watch TV with subtitles on by default. She is a real history buff.

Her daughter tells her about a local historian’s talk on YouTube and urges her to watch. Unfortunately the auto-captioning on the video is terrible and Belinda can’t make any sense of it.

How could you help Belinda?

Solution – Caption your videos

YouTube’s auto-captioning is well intentioned but just not reliable.

Look what happened to Col’s video with automatic captions.

Raster graphics became rasta graphics!

rasta graphics vs vector graphics

For YouTube, start with auto-captioning. Download the caption file, edit the captions and re-upload it.

Or if you have a transcript, upload it and adjust the timings as necessary.

Read:

Captioning can benefit:

  • People who speak different languages
  • People in noisy environments
  • People in quiet places who don’t have headphones to hand

Did you know that 85% of Facebook videos are watched without sound?

Worth remembering!

Your turn

I’d love to hear your thoughts on this topic too:

  • What steps do you take to make your content more accessible?
  • What accessibility fails have you seen online?
  • What can actions can you take right now to improve the accessibility of your content?

Please share your experiences below and feel free to ask if you have any questions.

Related Content:


About Claire Brotherton

Profile Photograph of Claire BrothertonClaire Brotherton is a freelance web developer and accessibility advocate based in Edinburgh, Scotland. Her ideal clients are businesses, nonprofits and entrepreneurs passionate about access and inclusion.

She loves learning and blogs regularly on her site A Bright Clear Web.

Did you enjoy this article?

If so, you'll probably enjoy these popular articles too...

How does ‘Big 5’ content marketing lead to sales?

Read More...

Content Marketing ROI: How to measure the return of content marketing

Read More...

15 things I'm fed up teaching you about how to improve your blog

Read More...

About Vicky Gunn

Beach addict and crazy spaniel mum (thanks to Millie), I love helping others create memories. Founder of Millie's Lifestyle and avid blogger - life would be boring doing just one thing. Wouldn't it?!?!?