Website design – just like any creative process – can be highly subjective. What looks great to one person might be like nails on a chalkboard to someone else!
As website designers that specialise in accessibility, it’s important for us to sometimes take a step back from our aesthetic preferences to consider things from different viewpoints.
It’s important to make sure that your design and the overall website are accessible to all users – and there are lots of design choices, quirks and preferences that are actually difficult for some people to interact with.
Here are some things you might be doing – or asking your web agency for – that you maybe didn’t realise were bad for accessibility!
Justified text
Justified text can be tricky to get right in print, so it’s safe to say it’s even trickier on the web, where responsive layouts mean you often don’t have precise control over how the text breaks across lines.
Not having justified text improves readability by keeping text space consistent, making it easier to identify and predict patterns in the text.
When text content is justified, it spaces the words out unevenly across the page to make them fit, which breaks the flow of text and creates unsightly ‘rivers’ of blank space. Just because it looks tidier on your screen doesn’t mean it’ll look the same everywhere – and the disruption in the text can make it difficult to read for some users.
Uppercase letters
Like the lack of a shapely rag in justified text, having your titles in all uppercase letters removes the distinguishing variations in the letters and makes it harder to read. Big, bold all all-caps headings can look great and make an impact on the page, but it’s best to use them sparingly. Have an alternative available to use for longer headings, like blog titles, where sentences and chunks of text can quickly become overwhelming and ‘shouty’.
Long rows of text
It’s tempting to want your sentences to take up the whole width of your screen and fill all the available space on the page, but there’s no need to fear the space! Space is good for giving content room to breathe, and it can help your user focus on what you want them to see.
If you think about your favourite blog or news site, which typically has quite text-heavy content, the main article is probably laid out in quite a narrow column. This is because it’s easier to read and scan through the text.
Line lengths that are too long make it difficult for users to gauge where the line starts and ends, making it difficult to focus. Line lengths that are too short mean the eye has to travel back and forth too often, not just causing strain on the eyes, but also breaking the rhythm and meaning users may skip to the next line too quickly. For readability, the generally accepted optimum line length for body copy should be between 50 and 75 characters long.
Script fonts
Script fonts can be a great way to break out of a corporate-looking site and add personality to your design, but they can often be very difficult to read, especially by people with extra accessibility requirements.
The flourishes and slanted style that give it character can hinder the legibility of the letters, and spacing can be difficult to control if your text breaks onto more than one line. You don’t need to completely abandon using a script font if it’s a key part of your brand, but you should choose it carefully and use it sparingly. It’s best to avoid overly intricate fonts, and if you can, test it with real people to check!
Colour coding
Colour code with care! Accessibility guidelines state that colour should not be the only means of conveying information, so if you’re going to categorise things by colour, make sure you also include some text or an icon to make sure users with colour/vision impairments can still differentiate between them.
Done well, and as a secondary device, colour coding can be a great visual cue for grouping sections of content together, but make sure it’s future-proof. If you’re using your three brand colours to distinguish between three different parts of the site, but then need to add two more sections later down the line, which colours would you use? If you use pink for a category on one page, would it then be confusing to use pink in other areas of your site that weren’t connected to that category? All things to consider!
Hero videos
These can be a bit marmite-y for users. Some people love them, some people hate them – but it’s not just about personal preference.
Having videos in your hero section (the header at the top of the page) that automatically play can cause frustration for users who are sensitive to movement, especially when they aren’t expecting it. Extreme flashing motion should be avoided, as this can trigger seizures or physical reactions in some users, but even more subtle movement can also be distracting.
If you are using anything on your website that automatically moves, blinks, scrolls or auto-updates, you may have to include a pause button so that users who don’t wish to view it can have the option to stop the motion. This also applies to sliders and content carousels!
Video content
Video content is great to have on your website – lots of users will find it engaging and preferable to reading a big chunk of text.
However, those people probably aren’t your only users, and video content with audio that doesn’t include captions, or text transcripts or descriptions conveying the information in another way, will most likely be inaccessible.
This is true even for users without accessibility needs – people watching a video on a train, for example, may prefer to watch without sound.
Low contrast
This one probably sounds like an obvious one – if you use pale grey text on a white background, or dark blue text on a black background, of course it’s going to be difficult to read.
But there are some other colour combinations that you might not expect to fail an accessibility audit, with some of the brighter colours being the main offenders.
The image below shows a few examples where, to some eyes at least, the white text is much easier to read and more visually appealing, but it’s the black text that meets accessibility guidelines and the white that fails. If some of your brand colours fall into this borderline category, don’t worry – there are ways around it and tweaks we can make to make sure your design is accessible AND looks great.
Text in images
Having images that contain text as part of the image (rather than actual text content positioned over the top) means that the text is fixed in place and won’t respond to any adjustments users may need to make to be able to read it properly, like increasing the text size. It also can’t be read by a screen reader or assistive device unless you replicate the text exactly in the image’s alt tag.
If you need to include text on an image for whatever reason, make sure you include meaningful alt text, or make sure the information is also included elsewhere.
Link text that is too simple
Just having a link that says ‘click here’ or ‘read more’ can be unhelpful to users using a screen reader, who may not be able to understand the context as clearly as someone without visual impairments.
Try and include fuller descriptions on links, which clearly explain the purpose and where users will be taken, e.g. ‘click here to learn more about link text accessibility’.
PDF documents
Don’t forget about these! Accessibility guidelines don’t end with your website; they also cover information sheets, brochures, and any other documents your users can download from your site, so make sure you’re treating these with the same level of care you’ve taken with your website.
Lots to think about!
There are a lot of factors that determine how accessible a website is. As standards push forwards and continue to improve for disabled people, more and more work is required to make sure your communications are accessible.
If you’d like to learn more about how you can make your website accessible, read our blogs or contact the team to find out how we can create accessible web designs for you.
