DesignThinkers 2015: Making Your Website (Truly) Accessible

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:

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.

blog-accessibility-flow

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

What Do You Think?

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s