5 illustrations to understand and promote accessibility

Last week, I spend 2 days perfecting my knowledge around designing for accessibility. Marie Guillaumet was our teacher for the Access42 “Designing Accessible interfaces” training (in French). She is a very inspiring person and several of the metaphors she used stood out. I decided illustrated them for educational purposes and share them with you here.

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:

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.

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.

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 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.

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 images published here are not free of rights. You can nevertheless share them on social networks and public blogs.(as long as they are for non-commercial purposes). Please credit me as the author, and link to this article as the source. Please also remember to share them in an accessible way (direct text next to the image, alt attribute).

Get the images (Gdrive)

If you want to use them in presentations or for commercial purposes, please contact me first. You are not allowed to collect them for resale either (it seems logical but I prefer to specify).