Have you ever tried to use the internet using only a keyboard, or with a screen reader? If you have, you’ll know it’s rarely a smooth experience.
But this is the reality for screen reader users. We face these digital barriers every day.
The accessibility of a website is always the first thing I notice. It’s hard not to, particularly as I rely on assistive technology to do everything online. And when a website is accessible, I’m more likely to visit it again in the future.
Consider the range of people using your website
Very few people have perfect hearing, eyesight, mobility, reading skills and computer literacy.
Prioritising accessibility is the best way to make sure you cater to as many of your users’ needs as possible. Whether they are disabled or not.
It’s important to consider the broad range of users who will interact with your website. Not everyone will be using a mouse to navigate it. Some will be using a keyboard instead. Others may require information in different formats.
There are almost two million people living with sight loss in the UK. And 360,000 of us are registered blind or partially sighted. But not all screen reader users have a visual impairment. People with learning difficulties and dyslexia may use a screen reader to help them understand the web page content.
And there are many different types of assistive technology a person can use to navigate a website. Understanding that there’s no such thing as the ‘perfect user’ will help you build websites that work better for everybody.
Learn how screen readers work and use them
A screen reader is a piece of software that uses technology to convert text to speech. They allow people who blind or visually impaired, like me, to use computers and mobile phones. Screen readers read everything that is on the device screen out loud in synthesised speech.
Screen reader users tend to navigate websites using the keyboard or touch gestures on mobile. Some of the most popular screen readers include:
- Jaws and NVDA on Windows
- VoiceOver on Mac, iPad and iPhone
- Talkback on Android
Nearly all mobile phones, computers and tablets have text-to-speech functionality built-in. VoiceOver is native to Apple products, Narrator to Windows and Talkback on Android devices.
Other software offers both magnification and screen reader functionality. This is typically used by people who are visually impaired. Examples include ZoomText and SuperNova, for those that need a combination of speech and magnification.
It’s always worth having at least one screen reader set up on your computer to test your website during development. The more comfortable you get using a screen reader, the easier it will be to spot issues in the code.
When testing your websites with a screen reader, make sure you lower the brightness on your screen or turn your monitor off completely. This can stop you missing mistakes and errors.
Get to know common screen reader accessibility issues
As someone that uses screen readers on different devices every day, it’s often the same issues I come across time and time again.
Some of the most common accessibility issues I regularly encounter include:
- unlabelled links and buttons
- inaccessible web forms
- no heading structure (H1s, H2s, H3s)
As a screen reader user, I need websites to be optimised for keyboard-only navigation. Often, I’m unable to navigate using headings and other elements on the page. Simply because the developer has not considered keyboard-only users.
Read the 5 most annoying website features I face as a blind person every single day.
Use semantic HTML wherever possible
Using semantic HTML is the best way to mark out the elements on the page to a screen reader user. A semantic element describes its meaning to both the browser and developer. For example, <button> <header> <footer> <table>.
Using the correct HTML elements for their intended purpose means screen reader users can better navigate your web page.
While there are ways to make CSS and JavaScript coded elements accessible, HTML does a lot of the work for you. It makes keyboard navigation a lot easier as the user can tab between headings, buttons, forms and tables.
Headings and subheadings make it much easier for screen reader users to navigate the website. When these elements are coded correctly, they help signpost the screen reader user to the information they need.
Why HTML is a good basis for accessibility (Moz)
Realise the benefits of accessibility
And building websites to accessibility standards is not just the right thing to do. There are many other benefits to designing accessible apps and websites.
Accessible websites are better for everyone
Designing for screen reader accessibility improves your website for all users. Elements like a logical heading structure can help sighted users to skim read to find the information they need. Link text which describes the destination to the user is more helpful than ‘click here’ or ‘read more.’
These are just a few examples of how accessibility can improve the user experience for everyone. Whether they are disabled or not.
Accessibility is good for SEO
Many accessibility practices can improve your search engine optimisation (SEO) strategy. Using semantic HTML and having a proper heading structure and link text all help Google understand and index your website.
Accessible websites reach more people
By considering accessibility, you increase the size of the audience who can use your website. This gives you the opportunity for more website traffic and conversions.
Making your website accessible means fewer people are excluded from using your business, product or service.
Designing accessible websites improves your skills as a developer
Shockingly, 98% of the most visited websites in the world do not meet accessibility standards. According to the WebAIM Million accessibility analysis of the top 1,000,000 home pages.
As disheartening as this is, it means web developers who champion accessibility have an opportunity to stand out.
Even today, having skills in accessibility offers web developers a competitive edge.
Accessibility is good for your brand
As a screen reader user, I always revisit websites that are accessible and avoid those that are not.
Ultimately, building accessible websites shows that you care about disabled people. Who, as a group, often feel forgotten and left behind. But when a website goes that extra mile to consider accessibility, we feel included and valued.
These changes may appear small on the front end. But they can make a huge difference to the end-user. They may be the difference between them being able to use your website independently or not.
More resources on screen reader accessibility
An introduction to screen readers (AbilityNet)
I used the web for a day using a screen reader (Smashing magazine)
Related services
