5 illustrations to understand and promote 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.
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:
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.
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.
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:
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.
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).
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).
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).