I am not really a winter person, I’m more of a summer bird that would love to fly south for the winter, but can’t! However, this October when the cool mornings and evenings gradually crept up on me and the leaves gracefully changed colours – I was super excited. The RGD’s DesignThinkers conference was coming up in a matter of weeks and it was my first time attending.
I was looking forward to 2 days of non-stop inspiration and knowledge. It was time to become a sponge and just soak it all up.
There were numerous talks that really gave my brain a boost and this article is about one of them: Web accessibility and how to test your website so it is actually accessible.
Below are some amazing insights shared by Adam Antoszek-Rallo during his talk and a few of my personal tips too.
Be Your User
Tools to Help Create the Right Environment
Try navigating a website using the following:
1 – Keyboard Only
Use “Alt”, “Tab”, “Enter” and other keys to help you navigate the website.
2 – Screen Reader
If you have a Mac, you have access to a built-in screen reader. Or you can download a free screen reader from nvaccess.org.
When using the screen reader turn off your screen and close your eyes. This will truly allow you to get into the mindset of the user you are designing for.
4 – No Coffee Plugin
No Coffee is a Chrome plugin that allows you to make adjustments to contrast, colour, brightness and many more settings so you may see the screen similarly to the way a visually impaired individual would.
“Websites are things, not pictures of things.”
Adam Antoszek-Rallo
Colour Contrast Tools
Here are some great tools to help you evaluate the colour contrast in your design:
- Colour contrast analyzer
- Accessibility palette on a Mac
- Firefox WAVE toolbar and WCAG contrast checker
Code Testing Tools
Here are a few testing tools that will provide a report you can use to evaluate and address accessibility issues:
Accessibility Handbook
Another great resource is the latest version of the RGD Accessibility Handbook. This guide is compact, easy to understand and contains lots of useful information.
Workflow
Your Design Files
If you want to design for accessibility, you need to learn how it’s coded too. You don’t have to know how to code, but you do need to know how a developer will translate your design.
It’s important to setup your design files to provide direction to the developer on how the text should be read and the elements should flow. For example, adding a linear flow to your wireframes can help the developer understand how to code for a screen reader.
Integrate It Into Your Process
Just like research and testing are a part of your process, make accessibility a part of it too. Add accessibility within your proposal to define the conditions by which you can say the website you created is accessible.
Add accessibility requirements to your user profiles. Maybe Maya is colour blind or Jake is severely near sighted.
Implementation
These tips and tools aren’t going to instantly produce an accessible website – only you can do that. You will need to design, code and test the site so it meets the accessibility requirements of your audience.
Photography Spencer Xiong
