Are you looking for a starting point into the vast discipline of accessibility? We'll delve into real practices and tools you can implement into your design process to improve your digital products by making them inclusive to more of your users.

What is accessibility?

Accessible websites enable a wider variety of users to engage with content on your website in a frictionless manner. Whether we’re approaching the topic from a UI or UX perspective, the focus is on creating a quality product which suits a diverse audience.

This diverse audience “extends to anyone who is experiencing any permanent, temporary or situational disability, e.g. having only one arm is a permanent condition, having an injured arm is temporary, and holding a baby in one arm is situational — in each case, the user is able to complete tasks with only one hand.” (Avinash Kaur, 2018).

Why is accessibility important?

As designers, it’s our responsibility to make sure we design in a way that’s accessible to all users irrespective of their situation, abilities or context. As a result, the web can be a space which is inclusive to all, whether they have a cognitive disability, visual impairment or physical disability.

Creating an accessible website doesn’t have to require large amounts of budget or change. Since it demands no additional features or content, accessibility can be achieved through education and awareness at the start of a design project.

It’s also arguably important for business: studies show that accessible websites have better search results, they reach a bigger audience, they’re SEO friendly, have faster download times, encourage good coding practices, and they always have better usability.

How do we achieve accessibility?

You’ll need to make certain adjustments and follow a framework to ensure that you are designing to a diverse set of abilities, ages and level of experience with devices.

Accessibility is a standalone discipline which is constantly evolving to fit digital products. But in the same way, software solutions are also growing. Meaning that we can’t cover everything in the topic, but if you find this article useful, we can do a part 2!

We’re going to take a deep dive into 5 big areas:

  1. Colour contrast
  2. Alternate text
  3. Focus states
  4. Forms
  5. Typography

Colour contrast

Ensuring there’s a sufficient colour contrast between text and background helps users who struggle with vision. This affects a higher number of users than expected and is often ignored as an issue. However, as many as 1 in 12 men are colourblind and many others with low vision or blind.

To start with, accessibility guidelines dictate that colour should never be the only way to convey information. In other words, there must be an additional cue for those users who perceive colour differently and may miss our colour-based instructions.

In order to maintain a decent contrast between text and background, a good ratio to follow is a minimum of 4.5 to 1. This allows clarity for users with low vision or colour blindness to differentiate between the two.

Contrast checker

The contrast ratio of 4.5 to 1 adheres to the conformance level AA (out of the three levels: A, AA and AAA) but this changes based on font size and which conformance level you wish to achieve. Larger fonts require a smaller contrast ratio of only 3 to 1 if the type is 18 pt (or 14 pt in bold).

These minimum ratios do not apply to text that is within a logo or a brand name, but it is useful to check your contrast ratio for yourself using this handy tool.

Alternate text

For users who access the web using screen readers, the content displayed is not always conveyed correctly. Alternate (alt) text is what the screen reader utilises to inform the user what images are on the page.

This may be done by converting the alt text into braille, an audio description or visually read the text. This means it is important to accurately describe what is happening in the image for those who cannot see it.

Sometimes it may not be necessary to add alt text. For instance, there may be enough contextual indicators surrounding the image or the image has no other function than aesthetic.

Senior lady at a laptop

Focus states

You are most likely familiar with focus indicators already without realising. Focus states are the (often) blue outlines that appear when an element is selected e.g. links, menus, buttons and form fields.

These signal which element the user is currently focused on when using the keyboard. Often these indicators are viewed as unsightly or as though they don’t serve a purpose but they are actually very important. Many users are limited to the use of only the keyboard and visually impaired people that use screen readers also require focus indicators to help with page navigation.

Focus indicators are a simple way to make your page navigation clear and accessible with very little effort and yet a big difference to the user. They can seamlessly tie into the brand using appropriate colours, they just have to be contrasting so the elements stand out.

Forms

Forms can be complex for anyone, but those with additional accessibility issues can often struggle when forms are too minimalist and unclear. Below are listed some common items that need to be addressed in order to tackle accessibility:

  • Labels – using placeholder text as a label rather than text outside the field creates confusion as the text disappears when the user begins to type. Omitting crucial directions for the user in favour of minimalism or aesthetics is a major error to avoid.
  • Borders – something as simple as a border around a text input is important for users with cognitive disabilities so it is clear where they need to click
  • Additional instructions – often forms use a minimalist approach in an attempt to declutter the design, however, this hinders the usability and therefore accessibility.
  • Error messages – these should be indicated by multiple elements, commonly colour is used but in addition to this errors should be indicated via symbols or text.
  • Review – forms should allow a period of review before submission to allow the user to correct any information.

Typography

Information is easier to digest when it isn’t cluttered and too much in one space. This applies to accessible websites too. As mentioned earlier, font size can alter the minimum requirements for contrast ratio, but font sizes should not go below 10 pt.

As you can see, it’s challenging to read in 9 pt.

Increasing the amount of white space between both lines of text and individual words can help users that are visually impaired or have dyslexia. The following minimum spacing ensures that the requirements of those users are met:

  • Letter spacing: x0.12 the font size
  • Word spacing: x0.16 the font size
  • Line spacing: x1.5 the font size
  • Paragraph spacing: x2 the font size

Conclusion

Surprisingly, these small changes can make a big difference to accessibility. It doesn’t require large budgets and lots of time to make your website fit the Web Content Accessibility Guidelines but it can dramatically change the experience for a user and therefore boost your business too.

Adding these suggestions into your design process can become second nature, paving the way for a future of more accessible websites – it’s up to us as designers.


If you need help with your Creative don't hesitate to contact us.

Enjoy this article?

Subscribe for weekly insights