If any of you have ever looked into improving your website accessibility and are anything like me (a compulsive perfectionist and worrier), you may find it all seems a little overwhelming. The “Web Content Accessibility Guidelines” (WCAG) consists of SEVERAL pages of complicated-looking legal text – but fear not, you don’t need a law degree to make some simple improvements!
After being tasked with sharpening up my accessibility skills for an upcoming client project, and getting over the feeling of impending doom brought on by the terrifying WCAG table of contents, I turned to Infotex’s resident fountain of all knowledge, Infrastructure Manager & Developer, John Harman:
“It doesn’t have to be complicated – there are plenty of simple things you can do.”
And he was right. He found me an hour-long online course, where they broke down some easy steps to take to make websites more accessible. I’ll share some of the best bits with you now…
Making your design more accessible:
Try making it monochrome
People with colour blindness struggle with seeing the differences between different colours. If you stick to one colour, and just use different shades or opacities of that colour, users should be able to see the contrast between the shading.
Use thicker lines
If you have any lines that are important for the website’s usability, try making them a few pixels thicker so they’re easier to see.
Don’t try to convey meaning with colour
Often, for instance, you’ll see red used to show that there’s been an error of some kind. It’s fine for you to do this, but someone with colour blindness may miss out on your meaning. So when you do use colour for meaning, make sure you always couple it with a symbol or explanatory text of some kind.
Use a colour contrast checker for text
If you haven’t got enough contrast between your background colour and font colour, you could be making it very difficult for some people to read your text. Try using a simple online colour contrast checker like contrastchecker.online to check your contrast is up to scratch.
Make target areas big enough
Target areas are basically areas that are clickable, like buttons. It’s advised to make them 44px x 44px minimum.
Make sure your images have ALT text
To make your imagery more accessible for those with vision impairment, add alt text to your images. This way users can utilise technology such as screen readers to hear descriptions of the images you’ve included.
Making your text easy to read:
Choose the right font
As a general rule, more readable sans serif fonts are a good choice, I ended up choosing Montserrat for my project but here’s some other ones the course suggested: Helvetica, Arial, Futura, Gill Sans, Verdana, Avenir, Franklin Gothic, Frutiger.
Make your font large enough
A minimum of 16px font size is an easy rule to stick by.
Make sure your spacing is right
For line height they suggest setting it to at least 1.5 x the font size you’re working with. For Letter Spacing they suggest setting it to at least 0.12 x the font size you’re working with.
DON’T JUSTIFY YOUR TEXT!
As a designer I would say this is a rule you should follow in life anyway, but definitely try and avoid justifying your text if you’re trying to make it accessible, it’s just so much harder to read!
These are just some of many simple steps you can take to make your website more accessible – but remember, every little positive change you make helps!
