Ten design tips to improve your website’s accessibility.
Accessibility is a term used to describe principles for ensuring that websites and other digital interfaces can be used by people of all abilities. Accessibility ensures users who have visual, motor, auditory, speech or cognitive disabilities have full access the content on your website, and it’s easier than you might think if you follow these ten steps:
1. Start accessibility early
The principles of accessibility should be addressed at the very start of a project so they can be built into wireframes, designs and prototypes. Making websites accessible from the get-go doesn’t require extra budget (and gives you access to a wider audience) while reworking a website to conform to accessibility standards can be costly, so it makes sense to get it right from the start.
2. Legibility and readability
Online legibility is crucial for any website and these basic rules will help the readability of your site.
Readability can be improved by using a minimum font size of 16px and giving the text ‘enough space to breathe’. As a rule of thumb line height should be at least 1.5x the font size and paragraph spacing at least 2x the font size.
Line length also plays a key part in readability and the Web Content Accessibility Guidelines recommend no more than 80 characters which equates to 12-13 words.
Eye-tracking studies show that just 20% of visitors actually read your lovingly crafted content while the remainder simply scan it.
3. Clear content structure
Eye-tracking studies show that just 20% of visitors actually read your lovingly crafted content while the remainder simply scan it. It’s a dispiriting statistic but it does illustrate the importance of getting your layout right, so: keep paragraphs short, use plenty of headers and don’t be afraid of formatting such as bold, italics and underline.
4. Keep design predictable
Keeping key navigational elements and CTAs consistent throughout the site (in terms of location and functionality) improves the experience for all users and encourages customers to journey deeper into the site.
5. Clear focus states
Not everybody has heard of focus states, but you come across them every day on the web. Focus states are designed to help users navigate a webpage by highlighting the element their mouse is hovering over, so they could include anything from colours changing in a dropdown menu to border weight changing on form fields.
Focus states are subtle, but they are incredibly useful navigational markers and should be accessible to everybody. When designing focus states remember that people with visual impairments and physical disabilities often navigate with a keyboard, rather than a mouse, and they should be able to access the same interactivity.
6. Clickable element size
If you are familiar with Google Search Console; you’ll be familiar with Google’s Mobile Usability Report which is designed to help publishers identify pages which aren’t mobile-friendly.
At Ridgeway we take a mobile-first approach to design, but you don’t have to look far to find websites that are designed for desktop and have issues when accessed on mobile. One of the most common issues flagged by Google is that the ‘clickable elements are too close together’.
Small targets can lead to big issues for all users and can be compounded for users with physical or visual impairment. When designing for mobile interfaces think ‘finger friendly’ and make sure touch targets are a minimum of 48x48 pixels which equates to the size of a person’s finger pad area. If you don’t have access to Search Console you can still use Google’s Mobile-Friendly Test.
7. Make images accessible
Slow loading sites deter users and are consequently less accessible. Sluggish site speed is often caused by using images that haven’t been optimized and given that there are some great tools to shrink file size and accelerate performance; there are really no excuses.
If your Content Management System doesn’t have an image resizer you can get rid of unnecessary bytes using ImageOptim for JPEGs and TinyPNG for PNGs.
Making images accessible is about much more then compression and you’ll need to think about everything from file names to alternative text which we’ve touched-on in our post on Why accessibility works for SEO.
8. Contrasting text colour
Colour vision deficiency and colour blindness affects one in 12 men and one in 200 women in the UK. As a designer it’s important to make sure there’s sufficient contrast when setting text against a coloured background and there are a number of online tools to help get the job done with contrast-ratio.com amongst our favourites.
9. Use additional icons
Coloured text can help reinforce important messaging, such as warnings and confirmations, but it isn’t enough and using additional icons sends a much clearer message.
10. Give control to users
Sound and animation can make a big impact to a website but should be used sparingly as they can cause difficulties for individuals with disabilities or medical conditions such as epilepsy. WC3’s Web Content Accessibility Guidelines (WCAG) recommend that volume controls should be provided for audio that automatically plays on a page for more than 3 seconds and pause controls provided for any blinking or scrolling content that lasts longer than 5 seconds.