Our top ten design tips to help improve your website’s accessibility.

Accessibility refers to principles that ensure websites and other digital interfaces are usable by people of all abilities. It guarantees that users with visual, motor, auditory, speech, or cognitive disabilities can fully access the content on your website. Achieving accessibility is easier than you might think if you follow these ten steps

1. Consider accessibility early on

Accessibility principles should be considered at the outset of a project to integrate them into wireframes, designs, and prototypes. Ensuring websites are accessible from the beginning does not require additional budget (and expands your audience), whereas retrofitting a website to meet accessibility standards can be expensive. Therefore, it is prudent to get it right from the start.

2. Legibility and readability

Online legibility is essential for any website, and these basic guidelines will enhance your site's readability.

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.

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.