5 illustrated metaphors to explain and advocate for accessibility.

I spend 2 days with Marie Guillaumet , perfecting my knowledge around “Designing Accessible interfaces” (training in French). Marie is a very inspiring person and several of the metaphors she used to explain different aspects of accessibility and designing for disabled people stood out. I decided illustrated them for educational purposes and share them with you.

** Si vous souhaitez une version française des illustrations elle sont disponible ici **

The rainbow of disabled people’s needs

It is sometimes complicated to explain the wide range of accessibility guidelines. Some guidelines help people with specific disabilities or assistive technologies. And someone are more generic. In the end, they are all part of a cohesive whole. And we need to follow them all to create websites accessible to many different people.

I really like Marie’s rainbow metaphor to explain this:

Illustration of a purple and yellow rainbow, named "rainbow of disabilities" with the following disabilities in a cloud: auditory, cognitive, learning, neurological, physical, speech, visual.
Imagine the needs of disabled people as a rainbow. Each type of disability has specific needs. But together, all the accessibility adjustments create a cohesive whole. Accessibility guidelines and success criteria help ensure we forget nothing.

The A, AA and AAA mountain peaks to reach

A (single A), AA (double A) and AAA (triple A). Those are the 3 levels of WCAG compliance. And it is sometimes a bit tricky to explain to people, clients, which one they need to reach. How high should we aim, they ask. I love the metaphor of mountains and peaks that Marie uses.

Mountain with a A flag in the middle and a AA flag at the top. Behind there is a second mountain, with mist and a AAA flag
Picture accessibility compliance levels as mountains. The first peak to reach is AA. This includes both A and AA criteria. Behind it, in the mist, there is a larger peak, AAA. That one is not always completely reachable.

WCAG states that AAA (triple A) is not always achievable. Seeking that level of compliance at all costs is not mandatory. Or even recommended. But if you can, it’s awesome.

People first. Connect design decisions to disabled people’s needs

I am used to a “people first” approach in UX (user experience) design. We take design decisions, based on the needs of your users. For accessibility, its the same. Each criterion and guidelines aims to help a specific type of disability and group of people. While explaining the criteria, Marie made the connections with who those aim to help.

When promoting accessibility, framing design decisions around disabled people’s needs is very important . This helps explain the design choices. Helps make them more tangible. And I hope, that is also help stop seeing accessibility as a constraint. But rather a major important part of the designer’s work.

Vitruvian man (symbolising accessibility) in the middle of a big heart
People first. Connect design decisions to disabled people’s needs to put them in the center of the design process. “We need to provide XXX for people with this or that type of disability”.

Forms: give the rules of the game at the beginning

Forms are often a very frustrating part of websites for many users. This is where we often see a lot of usability problems during testing. Unfortunately, it is also often even worse for disabled people.

Follow Marie’s tip for forms:

A form, inside a board game. The form has red asterisk that are explained at the top with a legend.
A form is like a board game: you must explain the rules at the beginning, otherwise nobody can win. Display instructions at the beginning of your form, not at the end.

Here is an example. If you use an asterisk to mark mandatory fields, add a caption that explains this symbol. display that explanation before the first field. This helps visually impaired people who use a screen magnifier. They can understand what the symbol means, before they come across it.

Also, did you see what I just did? I explained to you the guideline, and the context of “who does this help”.

Accessibility, design and innovation: yes, it’s all compatible!

Unfortunately, accessibility is still often seen as a constraint for design teams. And an obstacle to creativity and even innovation. But, this is not at all the case! Let’s debunk a few myths.

A light bulb, an interfaces wireframe and the Vitruvian man with arrows around him showing iteration and progress
Accessibility is a key component of design. It is compatible with innovation. And less expensive if taken into account from the beginning. To do that, we need to understand the needs of disabled people. And anticipate the adjustments required. Then, we test, iterate and improve.

Conclusion

If you speak French, I highly recommend the Access42 training!

Marie connected the needs of disabled people with the accessibility guidelines. Each accessibility recommendation was contextualized. This helps a lot understand, but also remember the criteria. I will definitely use that to promote accessibility where I work. And push more recommendations. Finally, UX and accessibility have a lot in common in terms of practice. It all starts with understanding needs and uses.

During the training, we also prepared a “Design and accessibility” checklist. I will publish it soon (either here or in a dedicated article).

Illustrations usage

The illustrations are available under CC BY-NC-SA 4.0 license: Attribution-Non Commercial-ShareAlike 4.0 International. When you use them, you have to give attribution right as follows: “created by Stéphanie Walter, based on content by Marie Guillaumet (Access42)”. If possible put a link to this article.

You can share them on your site as long as it is not a commercial site (aka you don’t make any money of it, this includes advertisement). You can use them in presentations, as long as you follow the same license and don’t make money from the presentation. You can print them to put them in your office if you want. You are NOT allowed to print them to sell them, nor are you allowed to sell the file.

Please also remember to share them in an accessible way (direct text next to the image, alt attribute).

** Due to technical issues on my server at the moment I had to remove the files.**

Contact me to get the file

If you want to use them in commercial presentations or for commercial purposes, please contact me first.