Making WCAG 2.2 Accessibility Part of My Figma Workflow
As I design my iOS app, I’ve been diving into WCAG 2.2 guidelines to make it more accessible. To learn more, I took an accessibility course by Emma Moore on LinkedIn Learning, and it’s been really insightful. I realized there’s no one-size-fits-all way to assess accessibility—it’s something that needs to be baked into a designer’s workflow. Luckily, Figma has plug-ins like ADEE and ANIMA that make checking WCAG compliance easier.
I also learned about the different levels of compliance—A, AA, and AAA. Since my app isn’t a government project, I’m aiming for AA compliance, which feels like the right balance. One tip that really stood out for me is about tabbing order. For example, the close button should be the first selection, not the last, in situations where context tabbing matters.
Another takeaway? Using fonts purely as decoration is a no-go—it’s not WCAG compliant. Instead, focusing on typography principles like Golden Ratio Typography (GRT) makes a big difference. It boosts readability and keeps visitors engaged longer, which is exactly what I want for my app.
What accessibility plugins have you worked into your Figma design process?
P.S. While integrating ADEE into my Figma workflow, I recall a recommendation from fellow Producer Researcher and Designer, Tom Debruyn, which I found to be more useful in a few ways. It’s called Stark and I prefer it over ADEE for the following reasons:
UI: Stark offers a modern, visually appealing interface.
Typography: Unlike ADEE, Stark checks font sizes for typographic compliance.
Ease of Use: Stark is simpler and more intuitive to navigate.