When making your content accessible for everyone, it can be challenging to pinpoint what exactly needs adapting… That’s why we’ve put together all of the most important bits you need to know and act on when it comes to your website design.
Disabilities, age, different user preferences or different cultures and countries are all accessibility factors to consider… Oh, and don’t forget about the Web Content Accessibility Guidelines (WCAG) – more on that later. For now, here’s our top five easy adjustments you can make to your website.
#1 Colour
What’s the challenge?
Colour evokes feelings, associations and can give a brand’s messaging and identity that extra oomph. But all of these qualities are redundant if the user can’t see colour or perceives colour differently…
Why this matters
Colour blindness affects one in 12 men and one in 200 women so it’s pretty likely that someone who sees colour in a different way will encounter your website. Plus, the meaning behind certain colours changes depending on cultural differences.
What can you do about it
Don’t use colour as the only identifier for key information.
Instead, provide information that isn’t reliant on typical colour perception such as labels, asterisks, headings, font weight or underline text style (to name a few).
When it comes to charts and graphs, consider shape, labels and different sizes – texture can also work really well as a colour substitute.
Print out your content in black and white and see if you can still understand everything, if not, try adding some features in that aren’t just colour based.
Quick fix
Don’t use colour alone to convey information.
#2 Controls
What’s the challenge?
When controls or ‘interactive content’ are too small or close together, it makes your site more difficult to navigate.
Why this matters
It can be a challenge for users who aren’t as accurate with a mouse pointer (e.g. if their dexterity is reduced due to age).
Plus, people with motor disabilities, blind people who rely on screen readers, people who have suffered injuries like carpal tunnel, people that don’t have precise muscle control, and ‘power users’ are dependent on a keyboard to navigate your content.
What can you do about it
WCAG recommends at least 44 by 44 pixels. This size also includes any padding the control has. Also place your controls at least 32 pixels apart to reduce touch errors.
Ensure your controls are easy to identify by providing focus indicators (changing the appearance of links when the mouse hovers) and include touch-screen activation.
Tabbing through long menus may be demanding for people with motor disabilities, so keep it short and sweet – where appropriate.
Quick fix
Make sure controls are at least 44 x 44 pixels and keep it keyboard friendly.
#3 Effects
What’s the challenge?
Animation and effects can help bring a webpage or brand to life. They act to guide the user’s focus and help with orientation. But they can also be distracting, and more importantly, dangerous for some users.
Why this matters
Those with photosensitive epilepsy can be prone to seizures if confronted with fast flashing, high intensity effects and patterns.
Not to mention that overusing animations or GIFs can be highly distracting to many users especially if they’re sharing the screen with some important text or a form.
What can you do about it
Use animations that cover small distances, match direction and speed of other moving objects (including scroll) and are relatively small to the screen size.
Consider putting a pop-up trigger warning when your site opens that warns epilepsy sufferers of impending flashing on your site, just be sure to offer an opt out button (or hide animations) alongside this and conceal any of the high intensity effects at this time.
Quick fix
Include an option to disable animation & GIFs.
#4 Contrast
What’s the challenge?
Contrast between the foreground text and background colours of your webpage design can play a huge part in legibility and accessibility.
Why this matters
People with impaired vision can struggle to differentiate text from the background if the contrast is too low. This also is true for images, buttons, background gradients and so on.
What can you do about it
Text, icons, and any focus indicators should meet a minimum contrast ratio of 4.5:1 to the background colour.
The position and presentation of elements such as the header and navigation can be altered to make best use of the space. And be sure to check that text size and line width are set to maximize readability and legibility.
Quick fix
Meet the 4.5:1 contrast ratio.
#5 Alt Text
What’s the challenge?
Appropriate alt text for your content, while ‘unseen,’ is a really critical factor for people who can’t view your images or non-text content.
Why this matters
Writing useful alternative text is essential for those using text to speech, so that they can interpret the contents of an image.
What can you do about it
Try to describe what’s happening in the image and how it relates to the text. If the image is purely decorative or unrequired since the surrounding content already explains, you can either repeat the words or alternatively add an empty <alt> attribute so screen readers will skip it.
But always write alt text as some screen readers will repeat the file name if there’s no alt text and that’s the worst possible experience you can provide.
Quick fix
Always provide an alt text.
Ultimately, designing for accessibility doesn’t have to impede your creativity, instead it’s an opportunity to flex your ingenuity.
But if you’d like some expert agency input on designing for accessibility, get in touch for a chat today! sim@sim7creative.co.uk