Making sure everyone can use your website is obvious, right? So, why do so many designers overlook web accessibility when creating user interface?
The accessibility of your site is crucial if you want people to engage with your products and essentially buy from your business.
The primary aim for making your website accessible to all is to avoid excluding those with disabilities from using and enjoying your content.
However, there are so many additional advantages to making accessibility the core of your UI.
By solving a problem for a group of people, you are extending your reach to a wider community of users.
Many accessibility features that were originally designed for users with disabilities are actually pretty useful for everyone.
For example, subtitles and closed captions – they were primarily intended to suit those who are hearing impaired. Now, millions of people use them to watch TV and online videos, especially when they’re in situations where the content cannot be played out loud.
Improving the accessibility of your site can also help out those who are reading your website in bright sunlight, using a slow internet connection or a small mobile device.
So, how can you ensure your website is accessible for all?
Boost your colour contrast.
Selecting contrasting colours for your product design is important for those with impaired vision or users with dimmed screens.
The contrast between the background of your website and the text should be high so that the words are easily legible.
This doesn’t mean that you have to go for punchy, loud, neon colours, so don’t worry if you’re branding uses muted tones.
According to the Web Content Accessibility Guidelines (WCAG) 2.1 – the web accessibility bible that you should check out after reading this blog – minimum text to background contrast ratio should be 4.5:1.
How can you find this out? This contrast analyser by Paciello Group is free to download and can be used to pick out colours and compare them in your designs.
We like this design tool in particular as it tells us if the colour combo passes the test, as well as the different font sizes the shades can be used for.
Think beyond colour.
Whilst colour is a fundamental tool for visually conveying a message, you must never solely rely on it if you want your digital product to be truly accessible.
Colour doesn’t seamlessly translate across all ages, abilities and cultures, so you need to think of other ways you can communicate with your user.
Using different shapes, textures and adding supplementary text can really help when it comes to website navigation.
Another idea is to use an animation or texture change to a button as the user hovers over it or selects it.
This really basic submission form is a great example of combining colour change, texture change and supplementary text to indicate a message to the reader.
Use logical navigation and structure.
Whilst creativity should be at the heart of any design, functionality and usability need to be at the forefront of your mind when it comes to a website or digital product.
Firstly, it’s a good idea to use a logical navigation on your website to create a sense of familiarity and promote intuitiveness.
Meanwhile, screen readers and other assistive technologies scan pages in UI order, so each page needs to be laid out in a clear and easy-to-understand way.
For example, begin with a description of the page, headers that set out the structure and clear information as you move down the page.
A bonus tip for designing a product suitable for screen readers is ensuring your buttons are unambiguous.
Many sites have several “Discover more” or “Click here” buttons when they all point to different areas of the site. Try to differentiate the buttons so the user knows exactly what action they are taking.
“Discover more about our services” could be too long-winded for your design and button size, so speak with your web developer to add the long version to the code.
This way, the button can stay looking pretty, whilst the screen reader can let its user know which button to click.
Want more advice on web accessibility? Get in touch with a member of our team today.