This is a guest post from Zoe Coultan, an alumna of the second batch of I Am Not My Pixels interns! Each intern writes a blog post as part of their internship, on a UX and Design subject that particularly interests them. Thanks Zoe!
I’ve lost count of how many times I’ve been with a client or colleague looking at a site with low colour contrast, and they say “Well I can read that text perfectly!”. When I ask them whether they have visual impairments, they usually reply, “Well no, I have good vision”.
Even after I explain that we should ensure that everyone can use our site because some people have visual impairments or other conditions that impact their ability to use our services, I’ve heard responses like:
- Is it really worth the time and money for only 5% of our audience!?
- Don’t they have screen readers for that sort of stuff, or people to do it for them?
- Surely they could just call up to place an order instead of using the website!
No matter the argument, the answer is never to forget about accessibility. Good designers and developers don’t isolate their audience, any of them. You wouldn’t make it difficult for someone with a disability to get around the physical world so why should the virtual world be any different?.
The good news is, it’s pretty easy to make a website more accessible. Whether you’re a designer or developer, there are a few quick checks that you can do to design and develop more inclusively.
Here are my top seven tips for quickly and simply making your website more accessible for every reader:
Run your site through an accessibility checker
You can simply check how accessible your site is by putting your URL into http://wave.webaim.org/ . This resource will give you pointers about how accessible your site is and how to make it even more accessible. It’s a great way to get a comprehensive look at the key errors on your website at a glance.
Check your colour contrast
Not everyone sees colours the same, so putting colours on other coloured backgrounds can be problematic if there isn’t a clear contrast between the two. You can check your colour contrasts at webaim.org for free. This way you can check that everyone can read your site with ease.
Ensure you have ALT text
ALT text stands for alternative text. All images should have ALT text fallbacks so that people who use screen readers can read your site and navigate around it as easily as possible. This is as simple as putting alt=”DESCRIPTION OF IMAGE GOES HERE” inside your image tag after the src (source) section.
Use legible fonts
For the love of Gutenberg, use legible fonts. Especially for your body copy, which tends to be smaller, a clear font like Helvetica or Open Sans is crucial. More complex/alternative fonts can be used for headings where they appear larger on the page (but still ensure they’re legible!). Script fonts are particularly bad when it comes to legibility.
Is your font big enough?
Speaking of fonts, it doesn’t matter what font you’re using if its teeny tiny. There are still sites out there that insist on using small and unreadable font sizes. On mobile I tend to not have fonts any smaller than 16px and no smaller than 18px on desktop.
Do your links work?
Broken or incorrect links confuse everyone, not just people with accessibility needs. But they also make life a lot harder for somebody who is using a screen reader or who can’t see whether a link has actually navigated to the correct page. Ensure all links go to the right place and that there are no empty links.
Check your HTML/ overall code structure
For the more technically-minded designer, you can go one step further and review your HTML. If your HTML structuring is correct and semantic, screen readers should have no issues navigating through parts of your site easily. A good resource to learn more about this is Mozilla’s beginner’s guide.
Download my accessibility checklist
Accessibility is a fundamental part of UX. Every user’s experience, including those users with different access requirements, is the responsibility of the people creating the digital experience, designers and developers included.
With that in mind, I’ve created an accessibility checklist to help ensure you’re reviewing these simple steps during your design process. Download my accessibility checklist here.
Other references
https://webaim.org/resources/contrastchecker/ -Web Aim is a great resource for accessibility information. I use their contrast checker on a daily basis.
https://www.w3.org/WAI/intro/accessibility.php – This is a great introduction to accessibility – definitely worth a read.
https://www.iamnotmypixels.com/accessibility-resources-for-designers/ – Yael’s list of accessibility resources for designers
