The ultimate guide to website accessibility
Developing a website that is fitting to the consumer is key to creating a successful brand.
Through workshops and active research, identifying colour combinations and typography that stays clear and comprehensive for a wide range of impairments becomes the initial building blocks for an effective website.
Here are our top practical tips to ensure that your website is accessible for all.
Typefaces are the foundation of accessibility, so choosing a typeface that enhances legibility and readability is essential. Use a font on your website that is appropriate to your audience, and where letters are easily distinguishable. Children and adults who are learning to read or have a low reading ability may find fonts with less complex shapes more legible, such as comic sans. Some typefaces have letterform designs that are nearly identical for multiple letters. Ensure that letters such as d and b, or q and p, are obviously unique in shape.
It is important to consider that every single disability, impairment and individual is completely unique, with vastly different needs. There is never going to be the perfect colour palette, as this is not a case of one size fits all. However, certain colour palettes can be used to help. Make sure the text on your website stands out against the background. Ideally, you should set a dark colour against a light one. Using soft, calm and dark colours can encourage focus and relaxation. Ensure the colours you choose don’t hinder readability.
3. SIZE AND SPACING
The size of your text and images can affect accessibility. They need to be large enough type for the content, the audience, and the reading environment. Use relative sizing, which enables the text to scale depending on other content and screen size. Make sure your text has sufficient line spacing to avoid doubling and to avoid crowding. Your eye needs to be able to track from one line to the next with ease. The Web Content Accessibly Guidelines recommend a value of 1.5 for body copy. Also, break up content with subheadings, images and videos to help promote comprehension.
The best design is simple and uncluttered. Keep your website simple, with sections clearly defined with headings. In elements such as forms, allow for plenty of space, with boxes being as large as possible. The use of boxes can help emphasise and highlight important text. Make sure that text is split up, with no big paragraphs of text at once.
Consider the needs of your audience and assess which accessible format versions are likely to be required. Provide alternatives for all non-text content on your site so someone who cannot perceive information in one channel has equivalent access in another. Providing audio and video options like transcripts and captions will make your communications more accessible to people with visual impairments and people with literacy problems. Alt-text is a great way use to describe images, giving context to users who would otherwise miss it. Visually impaired users using screen readers will read an alt-text to better understand an on-page image. Be descriptive, but keep it to the point.
By focusing on your website’s level of accessibility, you’ll enhance the user experience for every one of your visitors, including those with disabilities or limitations who land on your site. You’ll show your visitors and customers that you value and care about them as individuals. We partnered with Derwen College to capture the essence of their unique style of education and turned it into an exciting new brand identity. Reflecting this on the website, we ensured that it was accessible for all.
At GoodThing, we practice what we preach, it’s the best way for us to show you we really know what we’re talking about. As you go through this site, we have focused attention on making sure that it is accessible to everyone through its design. Our colour combinations reach a AAA and AA standard, while our fonts and spacing ensure clarity for anyone going through.
- GOV.UK Blog: Dos and don’ts on designing for accessibility
- GOV.UK Guidance: Accessible communication formats
- Making Text Legible: Designing For People With Partial Sight (PDF)
- WAVE Web Accessibility Evaluation Tool
We can help you improve your website accessibility, get ion touch.