How To Design For The Web Like a Hero, Not an Asshole

A talk by Nicola du Toit, Steve Barnett from Empathy Labradors

It’s not that all of the web designers out there that haven’t embraced “accessibility” yet, actually mean to be assholes to their users. Most often it’s a case of ignorance and misconception — and that can be fixed. Today being Global Accessibility Awareness Day, it’s a particularly good day to start. So let’s go. You too can become a design hero for the people. Written by Karen Breytenbach

Accessibility experts Nicola du Toit and Steve Barnett of Empathy Labradors (yes, they love empathy AND dogs) gave a rather enlightening talk at our most recent I|O Powwow about designing tech products and interfaces with accessibility and usability in mind. Many of their insights were pure common sense and some were rare pearls of wisdom — all of which are worth sharing with you today.

The most important thing to grasp, they said, was to think of disability as a spectrum, not a binary. If there is just one point you remember about accessibility after today, this is the one.

Disability is not just one thing, and it certainly isn’t confined only to the most serious of impediments such as full-on blindness, deafness or immobility. To design for all people everywhere means that we need to think of all the subtle and varied forms of disability that all of us face in life. The reality is that today there are more humans, more devices, and more conditions to take into account than ever before.

To provide some clarity Du Toit and Barnett divided disability into three categories and led a useful exercise to make people think of all the lesser-thought-about kinds of disabilities that could affect all of us or our friends and family.

The first category of disability is VISUAL. This could include anything from needing reading glasses, to being colour blind, or struggling with a shiny screen on a sunny day, to blindness in its varying degrees.

The second is COGNITIVE. One’s ability to take in digital information is not only a matter of intelligence — for all of us it is also affected by our levels of stress or distractedness on a particular day, and whether we have autism, dyslexia or a learning difficulty. It was also important to consider that the end user you are designing for may well be a second language speaker — a very common problem in polylingual countries such as South Africa, the USA, Brazil or India.

The third area of disability to consider is PHYSICAL. Carpal Tunnel Syndrome, a broken arm, being in a moving vehicle, having impaired motor control from old age, or suffering from an illness such as arthritis, cerebral palsy or lupus could all impact on how well one can handle a phone, tablet or computer.

If we take these varieties of disability into consideration it’s clear to see that one’s ability, or functional capability, only becomes a disability if a product or device we use poses a barrier.

“Designers and developers need to realise that even a slightly different choice of colour, contrast and simpler content can really help people, and can save design firms from expensive fixes, or even lawsuits from unhappy customers, as we’re starting to see in the UK, later on down the line,” said Du Toit.

To start designing in this way can seem like a daunting task, but as accessibility guru Leonie Watson says, “it’s ok to do small iterative improvements” because making lots of small changes in one’s design approach makes a big difference over time.

Du Toit and Barnett also shared a few simple hacks for busy designers:

Test 1: NAVIGATION: Without using a mouse or trackpad, simply tab through the website you’ve designed and see where it takes the user. Can you get where you need to go?

Test 2: COLOUR CONTRAST: Make sure you don’t contrast red and green because these can be indiscernible to colour-blind people, and create a sufficient colour contract so that almost anyone will be able to read the text. Don’t get hung up on pretty colours — fugly is preferable if it means that everyone can see what’s on the page!

Test 3: PLAIN LANGUAGE: From the get-go just assume that you are writing web copy for dyslexics and second language speakers — so KISS the copy (keep it simple, stupid).

Overall, there are some good general rules to apply to ensure that you’re not being an asshole to your users:

• Ensure that your devs are always rigorous about writing good SEMANTIC HTML — they have to get with the programme. If they want to brush up they can just google “WCAG” and “WAI-ARIA”.
• Ensure that your Marketing and UX people work more closely together on copy from the start of the project and not as an afterthought,
• Beware that you are not creating stupid hyperlinks like “click here” or that trick people into downloading horrible things like 5MB PDF documents. Because that is just plain bad manners,
• Do some proper usability testing if you’re getting stuck between two difficult design choices.
• And finally, remember that testing for inclusive design is a team sport — so involve the whole team.

And then as a final gift from the Empathy Labradors, here is a useful tool you can use for 10 minutes every Monday morning at 10am, to make sure all your projects are on the accessibility track: bit.ly/emplab-ten-at-ten.

Good luck, and always remember that as the great Tim Berners-Lee keeps saying, the internet was always intended to be for everyone.