3 min read.
Design tips for improving website accessibility
Design tips for improving website accessibility
Zeroseven is committed to ensuring our client's websites are accessible to and usable by everyone. Accessibility is not simply a technical but social issue. It is about recognising users' differing needs without discriminating. Therefore, it is also important to understand that accessibility requirements for websites are mandated under government policy and legislation. So how can you be sure your website is accessible to everyone, including people with a disability?
Here are some initial tips for the design phase of a project that will help increase your website accessibility:
1. Contrast is king
Users can lose interest when they need to strain their eyes to try and read text that blends into the background. If someone is finding it difficult to read the text on your website, they will simply hit the back button and explore other options. You can utilise online tools such as WebAIM's Color Contrast Checker to make sure your contrast ratio is high enough. Not only will a higher contrast image look more exciting, but it will also make your website more comprehensible for people with visual impairments.
When overlaying text onto photos, extra care needs to be taken to ensure that the text is readable. Reserve text overlays for shorter headings or straplines, rather than large paragraphs. To improve contrast, consider adding a translucent coloured overlay to the image. Another option is to have an active or hover state on the text that changes the background to a solid colour, also making the website more interactive.
2. Headings should make sense
Users with screen readers do not always read the entire content of your site in order. They have controls that allow them to skip between headings, links, and other elements on the page. Sometimes, H1 or H2 styles are used simply to style text, which is not helpful for someone using a screen reader. Headings should be used to describe what content is in the section under them. Try looking at your design and reading through the headings only; see if you can still understand the page.
3. Put focus on links
Sometimes link focus states are neglected when designing websites, but these are important for users who are navigating your page without a mouse. If someone is tabbing through the links on your site, they want to be able to see which link they have selected. It is important that your links highlight when the user tabs onto them and remember not to disable the browser's default link focus states.
4. Don't rely on colour alone
For someone who is visually impaired, it can be difficult to tell certain colours apart. Therefore, your website should not rely on colour as the sole means of differentiation between states of links, buttons, icons, or form elements. Try adding an underline, switching the icon, or changing the outline width to make the change of state clearer. Or, as previously mentioned, using strong contrast between colours will enhance the visual usability.
Improving accessibility of your website should be a breeze with these simple tips. If you have any concerns or see an area that you could improve on your website, talk to Zeroseven's experienced design team. Most often simple changes make the biggest difference.
For more information on accessibility requirements and helpful tools, browse the links below:
WebAIM: Colour Contrast Checker
WebAIM: Introduction to Web Accessibility