Accessibility in design

In this article you’ll learn what is accessibility for the web, why is it important and what are the easies and most crucial practices that will help you make any web design accessible.

What is accessibility and why do we need it?

“Accessible Design” is a design practice that includes the needs of people whose physical, mental, or environmental conditions limit their performance. With over one billion people worldwide suffering from a disability that affects how they use their computer or smartphone. Our team works on making their digital experience easier, ensuring equal opportunities and access to information. We cater to people who struggle with dyslexia, autism, colour blindness, paralysis, etc., by providing an inclusive web experience.

 

At least 1 in 5 people in the UK have a long-term illness, impairment or disability. Many more have a temporary disability. This includes those with:

 

  • impaired vision
  • motor difficulties
  • cognitive impairments or learning disabilities
  • deafness or impaired hearing

 

Furthermore, it’s a legal requirement to meet international WCAG 2.1 AA accessibility standards on your website/application in the U.K. 

 

Simple language and short-form content have always been the leading principles of good design. An accessible approach will boost the SEO and overall performance of your website/app. IT will increase readability and loading time, and the information will be easier to find for people with and without disabilities. By following the accessibility guidelines, you improve the usability for all users.

“Both accessible and universal design are concerned with addressing the needs of users beyond those considered to be “average” or “typical”.”

Accessible, universal, and usable

Let’s talk more about the difference between accessible, usable and universal. We quite often hear these words, but what’s actually the difference?

 

Accessible design is a practice where the product meets the needs of people with disabilities and the product/service has specific features to cater for those people. When building an app or a website, we consider those who use screen readers, or who are colour blind etc. 

 

Universal design is a bit broader concept. It considers that the product will be used by a variety of people from different backgrounds, it’d consider people of different ages, ethnicities, languages, cultures, etc.

 

Both accessible and universal design are concerned with addressing the needs of users beyond those considered to be “average” or “typical.”

 

Usable design creates products that are easy to use, they are intuitive and efficient. When running usability tests, product teams look into how easy it is to complete the task for our target user, how memorable the experience and how fast they learn to use the product.

How to make it accessible?

Here are a few basics that will help boost the accessibility of your website. 

1. Colour contrast

One of the fist things to think about is colour contrast.

There are many programs out there that allow you to check if the colour contrast is high enough to read for all people. Such as accessibleweb.com, colourcontrast.cc or in the inspect mode Lighthouse chrome extension. 

It’s important to remember that some people don’t perceive colour as you do, so the colour hierarchy, highlights, states might not work for others same as they work for the designer. Think of other ways to highlight an active state of a button or field error for example.

Here’s how some people might perceive a simple form. Would you be able to tell which fields have an error?

3 Input form fields in black and white

And here is the same design in colour:

3 Input form fields in colour. 2 of them have error alert

So the answer is – all fields have an error. Accessible design should consider how to display information so it won’t rely solely on colour.

 

Colour contrast should be considered for the text as well. The visual presentation of text and images of text has a contrast ratio of at least 4.5:1 according to WCAG standards.

 

The lights grey for smaller text to use on white background would be #767676:

I’m the lightest accessible small grey

 

If the text is placed on the top of the image, you should check the colour contrast of the text to the image colour. You can use Lighthouse extension in Chrome browser to do that.

 

2. Fonts & Typefaces

Some typefaces aren’t user-friendly and more artistic ones or serif fonts are better to use as a decoration or as a big and short header. The smallest recommended font size would be 16px for paragraph text.

 

3. Interactions & Animations

  • Don’t make people hover over the elements to find information. If you’d like to use that feature, don’t hide any essential data behind hover effects. 
  • Be cautious with animations and moving objects on your website. Better to avoid autoplay videos and animated marquee lines. Let users click on the arrows to see more than to make everything move in different places on the page.

 

4. Describe your images

Some users will rely on listening to the web instead of reading.  There are tools that will convert the text to speech, in these scenarios we need to consider how these users will “hear” the images.

 

There are two ways that you can present alternative text.

  • Within the <alt> attribute of the image element.
  • Within context or surroundings of the image itself.

 

Make sure you describe the image not as how you feel about it but as you’d describe it to the person who hasn’t seen it. Instead of saying “picture”, give the person context of what’s going on in that picture.

 

5. Visual focus indicator

Provide visual focus indicator for those using the keyboard to navigate the website. Check if the keyboard navigation works properly – the computer has to be able to read the elements on your website or app in order as you’d read them. So the screen reader won’t jump from the first navigation label to the footer and then back.

 

The outline indicator has to be visible and also pass the colour contrast check. Try to find a contrasting colour so the outline won’t blend in with the branding.

 

Check that the hierarchy is clear to the computer, so the screen reader will know where to go next.

 

Back to all posts

Let’s make something awesome together

Contact us
Facebook Dribbble Instagram Behance