fbpx

Incorporating Accessibility into Web Design

Is your website friendly to users with a disability?

You may have a fast website with the best content but it’s all for nothing if people can’t actually use it. Today, we’re talking about the state of accessibility. Is your website design friendly to users with disabilities?

Explanation of website accessibility

Accessibility is more important than most designers realise. We should see it as a feature of our website. The more accessible your website is, the more usable it will be to everyone. According to the World Health Organisation, 15% of the population has a disability, so implementing accessibility on your website will very likely get you more customers, but aside from that, your website will be more usable if you abide by all the accessibility standards.

If you follow all the best practices in web design, your site will be both accessible and provide better experience for the rest of your customers so it’s just good business practice (and it’s the right thing to do). It will create the best experience for everybody.

Ways that people with disabilities interact with the web

Depending on the disability that somebody has, they may use different sorts of assistive software such as a screen reader. So, if you’re blind for example, you might be using the web through a piece of software that reads to you using synthetic speech. It simply reads to you the contents of the screen (hence why it’s called a screen reader). If you’re partially sighted you might be using a magnifier, so you might be enlarging the size of the font, the size of the text, the size of the whole page, the size of the images, or even the size of video.

There are other software options depending on the disability that you have. If you’re hearing-impaired you might be using captions or software that can listen to what has been said and transcribe that into text. If you have another disability (such as a motor disability) you could use a switch access. This is a device that allows you to move through the interface by flipping a switch, or you could use eye tracking devices that track the movement of your eyes. By moving your eyes you can move a cursor around the screen. So there are lots of different accommodations depending on the particular need.

What should experienced web developers would know about accessibility?

Clearly the web has offered a big opportunity for companies and organisations to show-off their branding. Different websites have different layouts they use, different font sizes, different colours etc. They have different ways of interacting with the user, different menu systems, different ways of navigating, and workflows as a whole. However, if you’re a person with some accessibility challenges it takes much longer for you to get accustomed to the different workflows that are presented by different websites.

Here’s an example:

Let’s say you’re blind and you’re using a screen reader. What you have to do (most likely) is read the web page that you’re interacting with serially from top to bottom to familiarise yourself with it. This takes time. If the conventions are different from side to side it takes you time to go through all the content just to be able to sign up for a newsletter. You might want to order or buy something from that particular company’s website but if the workflow for purchasing an item is different for each website then it’s going to take you much longer to learn that workflow because you don’t have the visual cues that a sighted person might have. The placement of icons, the placement of the different elements, of the different buttons. You don’t get those clues, you have to go and discover them by reading the contents of most of the website.

The same goes if you have a motor disability. If you need to use a hardware device like switch access to go through the contents of the site, having a standardised setup could really help. You could develope a muscle memory (for example pressing a specific number of times you get to a particular feature on most websites, say the top navigation menu).

But right now for most websites, each navigation menu on the top is not at the same location, so you cannot really develop muscle memory with your assistive device. There are of course similar issues with other groups of disabilities so we should look at trying to follow existing conventions.

Forms of Navigation

Not everybody who uses a computer is using a mouse or a touch-screen phone/tablet. They might be using commands that come with an assistive software or hardware. Those commands require that your site is accessible using the keyboard. If your site isn’t then it might be hard for the assistive software or hardware to work with your website. Not sure which standards to use? There are varying accessibility standards. The ‘Web Content Accessibility Guidelines‘ are one of the most prominent. Follow those standards as much as possible and you’ll be helping to ensure that your website will be consistent with established patterns.

The same goes for the keyboard navigation. If you don’t actually test with assistive software you are not going to know the bottlenecks. you won’t know what issues your users are facing. Why not try some of the assistive software yourself. For example, f you have a Chromebook you could easily turn on a screen reader that comes built-in. Just turn that on and the screen reader exposes every command in a menu. It doesn’t require a very steep learning curve. The same goes for every other assistive feature on that platform. You can turn on magnification, colour filtering, on Android you can turn on a feature whereby you could use the volume buttons of your phone to simulate a switch access device, so somebody with a motor impairment that uses a hardware switch device could simulate that using the volume buttons of of your phone.

Descriptive Improvements

When developing a website, developers may be well intentioned and become overly descriptive with labels on elements. They might simply say too much about an element. There is this notion that if you have a disability it means that you don’t have the intellectual ability to understand what everybody else can understand and that’s simply not true. There is no need to go over the top when describing a UI element. Here’s a great example. If there is a button that minimises a video player, you don’t need to say things like “collapses and reduces the video player to a small size and places it at the bottom left side of the screen“. Just say “minimise” and people would understand from the context that it minimises a video player.

Of course, we have to bear in mind that there are disability users with intellectual disabilities or developmental disabilities. It is of course important to cater to those users by using language that could be understood by a 9th grade level. In general it’s best to avoid complex words, but other than that you don’t need to go over and above and try to overcompensate.

Web Usage is Evolving

As web capabilities have evolved over the years, people have started using the web in different ways. So what effects has this had. The development of the web has given people with disabilities a workaround. For many, they have truly been liberated by the proliferation of web applications. Before, if you want to go make a bank transaction you would have to go to a bank and complete some paperwork. If you’re blind, you will need some assistance to help you do that. If you’re deaf the person who is at the bank most likely doesn’t know any sign language so you might have difficulty explaining to them what needs to be done. If you have a motor disability it might be there is no ramp to get into the bank. So there are all sorts of issues when it comes to the physical world that completely disappear when you use a good website. A website also has no bias. If you visit a place and you have a disability and people there they don’t want accommodate you, you might have a hard time convincing them that you have the right to be offered services. Of course this should never happen, but it does – Particularly in developing countries). But a website doesn’t know that you have a disability. The web has also opened up the employment market to people with disabilities who can perform tasks that before would have required a secretary or an assistant to help them.

Even something as simple as reading a book has become easier. Let’s say you have learning disability or blindness. Software can now read a book to you over the web. Another great example is people with dyslexia. There are now tools that break up syllables or read the book using text-to-speech or have a dictionary on demand. They can access this easily on their computer or phone. For many people, it’s now really easy to to be accommodated through the web and feel very independent in because they can use the same websites and the same web apps as everybody else. It may seem insignificant, but it’s a wonderful feeling that you’re treated the same as every other customer of A particular business.

As web usage evolved and become more complicated, it has become even more important for web developers to take care of accessibility challenges. The web has removed a lot of accessibility challenges but if we don’t pay attention to the accessibility of our websites we’re going to see barriers that are inflexible. The real solution to this is standardisation and the W3C web accessibility initiative. This defines strategies, standards and resources to make the web accessible to people with disabilities.

The HTTP archive tracks lighthouse accessibility scores on over a million websites. The median lighthouse accessibility score is 62%. It’s interesting that 42% of pages correctly use alt attributes on images but only 12% of pages correctly label form elements. So the state of accessibility right now shows a lot of room for improvement. As web designers and developers we do need to redouble our efforts and perhaps provide more automated solutions for making web apps accessible. We need to pay attention to the ‘Web Content Accessibility Guidelines’. Even those standards still have room for improvement. Some of them are vague and too technical, or they use complicated language. But, if you’re a developer that wants to learn how different people with accessibility needs use your website, it would be a good idea to watch some videos on how different people use assistive software and then try and imagine yourself being in the shoes of those users.

These posts might also be helpful..