What does your website sound like?

For most designers, developers, and clients alike, the focus is too often placed on the aesthetic.

The questions normally asked are:

• Is the design on brand?
• Do I like the design?
• Does the look-and-feel reflect the brand personality?
• I don’t like blue. Can you find a different colour?

However, have you ever considered the other ways your website or app is consumed? It is highly likely that you have users that browse a website using a screen reader.

For a user who has total or partial sight loss, the way your website looks is less important.

They care about the way your website sounds. But have you invested any time into listening to your website? Has your website developer spent time testing your website using a screen reader?

If you don’t know the answer to that last question then you are in trouble.

Let me reveal a truth: unless your website design brief explicitly stated it was a deliverable, it is highly unlikely they have. This then leads to the question: who is responsible for testing your website for compatibility with assistive technologies?

Understanding how your website sounds is just as important to your brand as the design itself.

Imagine if your image simply says image0000001.jpg or productshot-nov24.jpg. How are you going to sell these products with that description? 

What you meant to say is:

• 'Natural, cream-coloured, organic wool Aran-style sweater, hand-woven with 100% Merino wool.'
• 'iPhone 16, back exterior, teal colour, dual-camera system in top left corner, centred Apple logo, front exterior, all-screen design, front camera, thin black display border.'

How can I test my website without a screen reader?

Let’s be honest, you are probably nervous about using a screen reader and certainly don’t want to install it on your computer.

Well, if you have an Apple product, then the screen reader is already built-in. You will need to install a third-party screen reader on Windows. However, learning to use it can be overwhelming. There is a simpler solution.

You can consider installing a Chrome extension that emulates a screen reader. Our favourite is Silktide Accessibility Checker, which provides an easy way to listen to your website.

Check out our video to learn how to use it and get an insight into what your website sounds like.

Please be aware that this is an emulation tool, and the experience will be different when using a dedicated screen reader like VoiceOver, NVDA, or JAWS. That’s why it is important to involve an experienced accessibility specialist, like me.

The secret user group

It is easy to think the only people who will listen to your website are going to have a visual impairment. Well, I believe there are other user types that may prefer to listen to your website. In fact, there are two:

1. Me
2. A person with neurodiversity

I find it really difficult to read long-form content. My attention begins to wander and I cannot concentrate. This is not dissimilar to someone with a diagnosis of neurodiversity.

If the content is really long, I will use a little-known (and brilliant) feature of Google Chrome: Reading Mode.

OMG, it is so good. The speech synthesis is absolutely brilliant. You can choose between voices (US, UK etc.) and adjust the speed until it suits your preference.

If you don’t have the patience to watch a video, then here is how you can enable Google Chrome’s Reading Mode:

1. Click the three stacked dots located in the top right corner of the browser window.
2. Select the More Tools... menu.
3. Then select the Reading Mode option. This will split the browser window showing your web page in the left pane and the Reading Mode in the right pane.
4. Click the Play icon to initiate the speech.

Why listening improves your writing

I find I get a much clearer understanding of whether my content feels on-brand when I listen to it and love using Google Chrome's Reading Mode to check my content after I’ve written it. I tend to notice issues far easier than if I read and re-read my content a million times.

Give it a go, you won’t be disappointed!

Developer notes

Google Chrome's Reading Mode does not strictly rely on the <main> tag to function, but the <main> tag is one of the most important signals it uses to identify the main content of a page. By WCAG standards and general best practices, the <main> element must contain the page's dominant content, excluding headers, footers, and sidebars. If present, Reading Mode will heavily favour the content within this tag.

It also uses other semantic tags for context:

• <article>: Often used to identify a distinct piece of content within the main area.
• <section>: Used to group related content.

Invoking Google Chrome's Reading Mode using the <main> tag is another great example of the importance of using semantic HTML tags.

Don’t ignore your users

I am sure you do not intentionally exclude users. In fact, I hope after reading this article you will do everything you can to alter your own approach to content publishing, and, perhaps, speak to your developers.

Of course (shameless plug), if your developers are struggling with screen reader testing and accessibility standards, then we can help. Kindera loves to help train teams, large or small.

Remember: whatever you do, do something to improve digital accessibility. Doing nothing is not cool!