Why you should test your content with a screen reader
Imagine you want to renew your passport, buy groceries online, or download a podcast. These tasks vary in complexity for people who can see, but imagine doing any of them if you have limited or no vision.
Screen readers are how many blind or partially-sighted people navigate the internet. They’re robot guides that read out what the user cannot see. The American Foundation for the Blind describes them as, ‘the interface between the computer’s operating system, its applications, and the user’.
I volunteered to help with screen reader testing for the UK Government service I work on. This, as it turns out, is not a quick or easy process. It takes a while to learn the keyboard shortcuts that instruct the screen reader. But after a while, I became more adept at sorting information on the page by buttons, links or form fields.
Content designers don’t often get involved in the more technical aspects of this, but it taught me a huge amount. Of course, there’s no substitute for testing with people who use this technology every day. But it’s well worth doing. Here’s why…
Screen reader accessible content is better for everyone
If you can structure your content with a screen reader user in mind, it’ll be better for sighted people too.
If you’re using a screen reader, you might command it to read all the content on the page. But, like the rest of us, you usually get impatient and skim content for something you can interact with — something that will help you complete your goal. So a button or link that only makes sense if you’ve read the surrounding content is annoying for everyone.
Imagine skipping to the first button on a page and your robot guide says, ‘Click here, button’. No context, no clue about what the button will do. A frustrating experience at best. But if it reads — ‘Start application, button’, or ‘Download episode, button’, you know you’re in the right place. It’s the difference between completing your task and abandoning it.
Sighted users also scan for the tell-tale underlined or coloured links that will take them where they need to go. Screen reader users do much the same. Take this fictional example with dummy links from an article about sandwiches:
‘Let’s talk about sandwiches. These portable meals were supposedly invented by John Montagu, 4th Earl of Sandwich. Click here to find out more about the history of the sandwich. If you like sandwiches, you can also click here to see our sandwich menu or follow this link to find out more about the ingredients we use.’
The link text is meaningless and it requires extra brain power to read around the links to see where they point to. If you told a screen reader to read out all the links on the page, you wouldn’t be able to tell a sandwich from a sardine.
Subheadings for all
If your content isn’t broken up with subheadings, the dense blocks of text can be overwhelming. Sighted users will find their skimming instincts frustrated, but blind people will find it impossible to sort the useful from the useless.
Coded html headings impose structure and help define a hierarchy of information. This sandwich menu showing heading levels in html code, allows a screen reader to list all the headings on the page.
The user can then select the options they’re interested in without hearing everything. H1 is the title, H2s group different sandwich categories, and H3s are the individual sandwiches nested under the H2s.
Being accessible makes business sense
Making those buttons and links accessible to everyone is good for the bottom line. The charity SCOPE says ‘Seven in ten disabled customers say they will click away from a website that they find difficult to use. In 2019, this click-away pound was an estimated 17.1 billion.’
In the UK alone, there are over 2 million people living with some kind of sight loss. And with an ageing population, this number will only increase.
If your website is accessible, users will repay you with trust, loyalty and sales.
Screen reader accessible content is findable content
Screen reader friendly content improves a website’s search rankings. This happens because search engines like Google now take usability into account. If your website is accessible, it’s probably easy to use, too.
There are also direct ways in which screen reader friendly websites can do better in search results. Alt or alternative text is a written description of an image that screen readers read aloud. It also gives information to search engine crawlers when they index and rank images. To find alt text, right click an image, ‘inspect’ and look for ‘img alt’ in the code. If your alt text is a random file name, rather than a short description of the image, you’re losing out on search juice.
The alt text for this image reads, img alt=”Birdseye view of a cardboard box full of red and green chilli peppers”.
It’s worth noting that alt text should always be different to any caption you add to the image. Otherwise a screen reader will read out the same thing twice — another poor user experience.
Inaccessible websites are illegal
Having an inaccessible website can result in legal action. The Equality Act of 2010 covers the private sector, while most public sector bodies are subject to stricter regulations made law in 2018.
To date, there have been few cases that have made it to court, at least in the UK. But some companies have paid out settlements to disabled website users threatening action. In 2021, the Student Loans Company paid £5,000 to a blind student because she was unable to fill in a loan form, the York Press reported.
Screen reader testing makes you a better content designer
As a content designer, hearing your content read aloud by a robot is a sobering exercise. Every superfluous word droned back at you has you reaching for the backspace key. There’s no place for jargon-filled, flowery prose when it’s read by a machine. And if you want people to remember something, brevity and precision are crucial. If you’re a content designer, you’ll know that already. But there’s nothing like hearing your content to focus the mind.
Design content. Don’t write it
Before testing with a screen reader, I had a decent understanding of writing for the web. I knew how people tend to follow an F-shaped pattern as they scan a page. I understood that most people skim content, reading as little as 20% of words on a screen. I’d be sure to front-load sentences with the most important information first, etc, etc. But I didn’t know that thousands of people rely on technology that only works with the right content.
So if, for example, your website uses icons to convey meaning, spare a thought for those who can’t see them. Use a screen reader, and you’ll find your elegant magnifying glass search icon is invisible to many people. In this case, you’ll need to provide some visually hidden text in the code that a screen reader will read out.
Screen readers are an incredible tool, but they’re only as good as the content we use them to make sense of.
Designing with empathy
Empathy has been a big thing in design for while, and it’s easy to say we try to understand our users’ needs. But if you want to get much closer to people’s feelings and frustrations, a screen reader is a great place to start.
I’ve only begun to learn about assistive technology and how to design for its users. If you’re interested, start with one of the free screen readers and have a play — try VoiceOver on a Mac or NVDA for a PC.
While we can’t experience life the way a blind person might, we can at least learn about the tools they use. That’s the first step to designing more accessible websites.
Accessibility resources
Don’t forget that accessibility isn’t just about designing content for blind or partially sighted users. We should be building websites that are accessible to people with other needs, too. It can be a complex and challenging field, but these resources are a great place to start…
- Web Content Accessibility Guidelines — the widely accepted standard for online accessibility.
- How to write good image alt text from Craig Abbott. The former Head of Accessibility at the Department for Work and Pensions has a great blog.
- How to write good link text from the GOV.UK team.
- How to perform an accessibility audit from Siteimprove.
- Evidence-based readability guidelines from Content Design London.
- A good all-round guide to website accessibility from HubSpot.
