How to build accessible websites for the visually impaired

Platforms, Website

Quickly looking up something online or placing an order. Most of us do it without giving it another thought, but did you know that almost 2.5 million people in the Netherlands have trouble using websites because they are visually impaired? So it’s very important to also make your website accessible for these people. For municipal and government websites, this is already mandatory, but how do you build an accessible website? We give you some concrete tips, which, by the way, will also improve your SEO.

Understand your target audience

To build an accessible website for the visually impaired, you first need to understand your target audience. So, how do visually impaired people actually navigate a website?

Visually impaired people read websites through a screen reader. This is a software tool that reads the text and elements of a website out loud or displays them in braille on a braille display. Only the element they select is read aloud. It is also important to know that visually impaired people do not use a mouse, but key combinations.

Creating an accessible website

Now that you understand your target audience, it’s time to take a look at your website. We share three concrete tips you can get started with right away.

1. Make sure you have a clear website structure

With this we don’t mean a visual structure, but a clear code structure. As mentioned, visually impaired people navigate through a website with key combinations. So button and text elements must be implemented and labeled correctly. For example, make sure that all headings are given the correct HTML tag, such as H1, H2 and H3.

In addition, forms must have the correct structure. The labels and input fields must be linked together so that the screen reader understands them. Since, visually impaired people use key combinations, it is also important to make sure that the input fields are navigable with the tab key and that you can select radio buttons with the keyboard.

2. Anchor texts and alt texts

Does your website contain internal or outbound links? Make sure to use anchor texts. This makes it easier to read for screen readers. So, use ”Download the case” instead of ”See here”. Often you can also use a link title tag to indicate what the link is about. This is read by screen readers, but also by Google. So that’s two birds with one stone!

This also applies to images. Through the back-end of your website you can add an alt text to visuals. An alt-text tells a visually impaired person and Google what is shown in the image. Especially for e-commerce websites this is a must. Make sure the dimensions of the product, the colors and other relevant product information is described. This gives Google more information about the product being sold, but also gives the users all the information they want to know.

Including your keywords in the alt text will also make your page easier to find in search engines.

These are the most important anchor and alt text entries for a website:

CTA buttons
the logo
form labels
images
hamburger menu images
pdf files

3. Contrast

Which picture can you read best? Right, B. Websites are easier to read, when sufficient contrast is used. This is not only important to make your website accessible to the visually impaired, but also to color blind people (again, killing two birds with one stone).

Blind faith

Sorry for the pun, but do you want to make sure your website is accessible to the visually impaired? Then test your website with the screen reader before you put it live. Put yourself in the user’s shoes and make sure you don’t see the screen and don’t use a mouse. This test will help you identify any accessibility issues and ensure that you launch an accessible website.

That’s it! Three concrete tips to make your website accessible to the visually impaired. Still need help? Get in touch with us!