How to make your website accessible to people who use screen readers

Usually when we think about digital accessibility it’s in terms of blind people who simply can’t see the screen. These people (and others with problems such as severe dyslexia or poor literacy) will use a screen reader to help with this. But screen readers aren’t human – they can only read the written words on a screen, not pictures, and they can’t tell their user which bits are important and which not unless the way we code the website gives them this information.

Screen reader users are generally used by the people who have the greatest barrier to using a website so website owners and designers must take this seriously and take the right accessibility steps.

Why? Well firstly, it is the right thing to do. For your business or charity and for blind people in our community. Especially if the blind community are amongst your target audience. Secondly, you are leading by example as the UK moves towards bringing in more stringent legislation about accessibility. And thirdly, positive steps in accessibility helps with SEO, reputation, and reviews, all of which boost your profile and bottom line.

So, what steps does a website owner need to take to allow blind people full accessibility to their online information?

Firtstly, your site should be adapted to allow screen reader capability, an excellent tool that allows people who can’t read a website to access the digital world. There are plenty of options for screen readers, but NVDA, JAWS, Narrator, and VoiceOver are the most well-known. A screen reader is effective for visual impairment accessibility because it renders text and graphic content as speech (or braille) output. It’s of huge importance that every section of your website is accessible for screen readers so that the users do not miss any crucial information.

There are many adjustments needed to be made to cater for screen readers, but for the purpose of this blog, I want to concentrate on the top four:

1 – Alt Text
W3C lays out the best use of Alt Text for images and the importance of having a decision tree to ensure the right type of Alt Text is applied
2     – Consistent and hierarchical heading structure
3     –  Meaningful links and buttons (so ‘request a leaflet’ rather than ‘click here’)
4     –  Make forms accessible by using labels for form fields rather than placeholders as placeholders can’t be read by screen readers and by providing descriptive error messages

More details can be found on WCAG’s website.

Also according to Hubspot, 89% of blind people will not revisit a website without these capabilities and with the World Health Organisation quoting over 40 million blind people on the planet, that’s a lot of people to alienate by not doing this right! For how to get it right you can also visit the RNIB website.

An alt Decision Tree