Make Your Website Accessible for the Blind and Visually Impaired

If your vision is good, you probably have never really struggled with browsing through the web. Unfortunately, for people with visual impairments, it is actually quite difficult to navigate through the Internet.

As a shop owner, it can really be worthwhile to make your website accessible for a broader set of customers. Did you know that websites that are also accessible for the blind and visually impaired receive a better ranking in search engines? In this article, we’ll give you tips that will help you improve the accessibility of your website in no time!

Since 2018, the WCAG 2.1 AA guidelines exist. These are the international standards when it comes to web accessibility.

Content of this article:

Elements of your website that you can optimise in order to make it accessible for visually impaired customers (and therefore a broader audience):

Also, keep reading for a free test that will help you figure out which elements of your website you need to improve for more accessibility.

1. Text optimisation

The text format is already something that is pretty easily accessible to blind and partially-sighted people. With the help of certain technologies, digital text can be read aloud so that users know what is written on a web page.

Text structure

Structuring your texts in different paragraphs, for example on your blog, is a nice thing... for sighted people. They can see where a new part starts.

However, for the partially sighted, it may not really make sense to just make the headings bigger. Instead, make sure that headings are labelled as such in the HTML code of your website (again, this is also good for your SEO).

If you choose a heading in the dropdown of your editor, it will automatically be included in your HTML. This will help the software to read the text aloud.

Most website editors allow you to label texts as headlines. This is important for visually impaired users and also benefits yours SEO.

Language set-up

In the HTML code for your website, you can also indicate the language the text in your online shop is written. The reading software for your visually impaired customers will then be able to use the correct language.

If the language on your website is one that is spoken in several countries, it is wise to indicate the country as well. This applies, for example, with English, Spanish, and Portuguese because different pronunciation or spelling rules apply. With British English, for example, you can enter en-GB.

The corresponding HTML code would therefore be:

If you have more than one language on a page, you can indicate this in your HTML as well using the span code. You can learn more here.

Recommended Reading:
Internationalisation: Localise Your Website to Sell Abroad

2. Optimising images

Text can be read out loud. Images and visuals, on the other hand, aren’t as easy to convert into an audio format. How can you ensure that your images (e.g. your product images) can still get noticed and converted by reading software?

You can make images accessible by adding a textual alternative. Think of it as a description of what is in the image. In this case, we’re talking about the “Alt text” (also referred to as “alt tags”). Search engines also use this attribute, so including alt texts will increase your SEO ranking.

Using captions can also simplify the converting process for text-to-speech software. The software will then be able to read the captions of your visuals. Therefore it is important to clearly describe what the images are showing, so that people who cannot see them understand what is being displayed there.

When it comes to your product images, it is also useful to give detailed information about what dimensions, colours, or other visual features are shown. You could give this sort of information in your product description.

Just think about how you would explain the product to someone over the phone. This is basically what you should keep in mind when writing alt texts or captions.

3. Optimising forms

For your e-commerce, forms may be very important.

Email marketing, for example, is probably one of your most important marketing methods for reaching out to both new and repeat customers.

Yet, the customer needs to be able to subscribe to your newsletter. For this he or she needs to fill out a form.

Just like with text, structure is very important when it comes to forms. The labels (instructions) and input fields should be linked together, so that text-to-speech software understands them.

If you expect customers to fill in their data, you should be making this clear in the corresponding input field.

In addition to that, you should make it clear for users when they have filled in invalid data. Explain why it was incorrect.

For this case, it may be helpful not only to put a red line around the section that has been filled out incorrectly, but also to explain why it was wrong. This doesn't just apply to the blind or visually impaired!

Keep in mind that not everyone uses a mouse to navigate online. So make sure your website’s visitors can navigate your forms using their keyboard as well.

To make the forms appropriately accessible, allow users to navigate through it using the tab button on their keyboard. Also, allow them to select radio buttons via corresponding buttons on their keyboard. Add more settings like this if possible!

4. Navigation

Clarify your links

As an internet user, you usually only click on a link when you know where it’s directing you. Therefore, inform your visually impaired customers in your link texts where a respective link is going.

Depending on the software your customers are using, the links are read aloud separately from the normal body of text.

A text saying only "Click here", for example, wouldn’t inform users at all where the link is taking them. Again, a little reminder, these sorts of set-ups will also help search engines and therefore most likely improve your SEO!

Multiple entrances

Not every user navigates through your website in the same way, so we’d advise you to ensure that your web pages can be found in multiple ways. Some visitors like to use a search bar, while others prefer to use the menu.

Be consistent about what your navigation looks like on each page, so your visitors know exactly where everything is. Again, this doesn’t only apply to the blind or visually impaired!

5. Tables & charts

Tables are, of course, quite difficult for the software to read, so it is important that they are structured properly.

A table consists of columns (vertical) and rows (horizontal). The data in a table is related both vertically and horizontally. To clarify these links, you need to use the right HTML code again.

Indicate which cells represent the headings and which represent the data. If indicated explicitly, the HTML code will enable the reading software to read out the information clearly for your customers to understand what is being shown in the table.

You can also provide a caption and/or summary for your table. This is useful so that users can decide if the table is even worth hearing about.

6. Design

Some customers have a visual impairment such as being partially sighted, while others may be colour-blind. For these groups, it doesn’t really help if you want to clarify or highlight elements with colours.

Therefore, you should consider using the text format to stress important elements in your online shop as well.

Be consistent when doing so!

Contrast is also important: make sure that the front and background don’t look too similar in colour. Otherwise visually impaired or colour-blind customers will not be able to read it properly.

This tip also applies to people that have a lot of light on their screen (because they sit near a window, for example) or for those who print out the page in different shades of grey.

Again, be consistent in your approach.

7. Accessible alternative version

shutterstock.com/Wolfilser

Are you afraid that applying all these tips will make your website look completely different or less attractive for customers? What’s the solution if you still want to make your online shop accessible to visually impaired customers?

You might be better off publishing an alternative version of your website with a link in your navigation (and footer).

Put all the information you have on your regular website in the accessible version. Of course, you will always need to keep this one up to date as well!

Tip: Test your website

The Web Accessibility Initiative has compiled a list of (free!) tools to check your website. This allows you to see what elements you can improve in order to expand the accessibility of your website.

Click here to take a look at the list of tools to test your accessibility.

Conclusion

In order to provide blind and partially-sighted users with your service, it is useful to create an accessible website. Besides opening your online shop to a broader audience, there are many SEO benefits as well.

Don’t worry! Applying the changes mentioned in this article is actually way easier than it sounds.

Small adjustments on your part can make all the difference to a future customer. If that person knows that your website is easy for them to browse, they will definitely come back!

Big online shops and competitors still receive complaints about not offering accessibility. Be one step ahead and make your website accessible to visually impaired users.