How to make websites accessible to blind and visually impaired users

Accessible websites enable people who are blind or vision impaired to independently complete tasks or obtain information online. If a website is accessible and offers the information or service needed, a blind or vision impaired visitor may stop to browse, book and buy. If a website is inaccessible, the user simply moves on. No matter how interested we are in a brand or a topic, nobody can be expected to spend time trying to fathom a website with hidden information, cluttered layouts, illegible text and mysterious buttons. After all, there’s another bank, news outlet, supermarket, golfing blog, dentist or  whatever one might need, with a more accessible website, just a few clicks away.  In this blog post we will look at why your business should take web accessibility seriously and how to make a website accessible for users who are blind or visually impaired.

Why should businesses proritise accessibility?

A website that is not accessible does several things.

  • It could be breaking the law. In each country, there are guidelines, laws and regulations around web accessibility. These need to be complied with, to avoid penalties. Globally, each jurisdiction has their own guidelines but many incorporate the  Web Content Accessibility Guidelines (WCAG) as a standard, so it’s a good idea to bear these in mind when building an accessible website.
  • It excludes a large proportion of the population. The World Health Organisation estimates that at least 2.2 billion people worldwide have a visual impairment. It doesn’t make sense for any business to turn their backs on this huge pool of potential customers and the revenue they could represent.
  • It suggests a brand doesn’t care. Modern consumers are discerning and are attracted to brands whose values reflect their own. Brands who demonstrate they believe in principles such as sustainability, fair employment practices and inclusivity are likely to be more successful in today’s competitive market.

So an accessible website not only ensures the compliance box is checked, it also increases readership and reaches more potential customers. Most importantly though, it conveys the message that your organization believes in inclusion and the benefits of establishing your brand in this way, extends far beyond the financials.

What web accessibility means to visually impaired users?

An accessible website means someone who is blind or visually impaired can easily locate and understand the information they need and find their way around. They can also interact with ease, completing forms, purchasing items, posting comments and participating in discussions and events. Designers should be aware that people who are blind or visually impaired all experience vision differently and therefore experience the use of websites differently. Some may see very little or nothing at all and they may use a screen reader and keyboard navigation instead of a mouse and monitor. Others with a different form or level of visual impairment may see differently, perhaps they are colourblind or have a smaller visual field. People with different vision, use different accessibility tools such as magnifiers or high contrast colour options. The fact that visual impairment and blindness is such a varied spectrum means the accessibility requirements of two people who are both visually impaired may be very different. Even if their requirements are similar, their preferences and knowledge might also be different. An accessible website needs tto take these differences into account and welcome as many people as possible.

How to make a website accessible for blind and visually impaired users?

  1. Choose clean layouts. Keep your interface simple and uncluttered. Less is more when it comes information on a page. It not only makes the information easier to decipher for those who are visually impaired, but it’s actually easier for anyone who visits your website.
  2. Make text meaningful and easy to read. Choose a legible font and allow users to easily adjust the font size with increase and decrease buttons or a slider. Content should be easy to understand and for online retailers, product descriptions must be detailed and accurate. You might also check how your pages look in Reader View and other reading apps as many people use these tools to improve readability.
  • Choose colours carefully. Avoid using colour schemes that don’t provide enough contrast for people with low vision to distinguish between, such as light grey and white or purple and black. They may be pretty, but you might not get your message across. Add a high contrast mode button for users who find it easier to see white text on a dark background or yellow text on a blue background. Also, don’t rely on colour for action buttons. People who are colour blind may find it confusing and difficult to decide what a button does. Stick to clear text on action buttons if possible.
  • Avoid pop up ads and videos that play automatically. These are not only annoying for everyone, but it can be difficult, and time consuming for a visually impaired user to find the source or exit button.
  • Make CAPTCHAs accessible. CAPTCHAs usually ask users to retype a word that’s displayed as an image or to click the squares on a grid that contain a picture of an item or theme, like ‘traffic’ or ‘stop signs’. Neither of these options are compatible with a screen reader and are not accessible to someone with a visual impairment. These CAPTCHAs effectively shut out anyone who can’t see the images. The words ‘I’m not a robot’ can indicate the end of the road for someone who is visually impaired and a  particular website. As CAPTCHA’s usually feature before an interaction like submitting a contact form or payment, this is particularly important. Consider alternative CAPTCHAs that have an audible option or are screen reader compatible.
  • Make images accessible. Add ALT text, a screen reader friendly description, to images, so visually impaired users don’t miss out on the information, humour or emotion that images on a page add to the user’s experience.
  • Make buttons and other non-text elements accessible. Just like with images, screen readers cannot read images of text or icons. A button with an image of the word ‘next’ must also have ALT text of the word ‘next’. Icons such as arrows on a button should have corresponding ALT text of the word ‘back’ or ‘next’. Ideally, try to stick to text on buttons rather than images or images of text.
  • Consider Keyboard navigation. Many people who are blind and visually impaired either don’t use a mouse or prefer to use keyboard navigation as they find it quicker and easier. Make sure your website is keyboard accessible.
  • Use descriptive link text. Avoid using non-descriptive text for links such as ‘click here’. Screen reader users often bring up a list of links on a page so users can easily locate and select the one they want. A list of  links with vague link text is impossible to navigate efficiently once it is removed from its context. Imagine a list of ten links all called ‘click here’… you get the idea.
  • Make forms accessible. There are several ways to do this.  The tabbing order should be intuitive and should include all fields that need to be completed, so nothing is missed. Labels should be descriptive as visually impaired users may not benefit from the visual context of the overall form. For example, without being able to see the credit card icons above a field, a person may not realise ‘Name’ is the first field of the payment section, so ‘Name (as it appears on card) is helpful. Also, consider sticking to a single column form. This is easier to navigate for users with a restricted visual field and all users are less likely to miss things out.

Conclusion

The above list of things you can do to make a website more accessible to someone who is blind or visually impaired is by no means exhaustive. It’s intended as a solid starting point and to encourage you to think about your website from another person’s point of view. Whether you are a growing business or an online community, accessibility should be a priority when building your website. It not only allows you to reach more people, it also conveys the message that inclusivity is at the heart of what you do.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Blog at WordPress.com.

Up ↑

%d bloggers like this: