Week 5 - Accessibility Edition
A special issue with five great Figma plugins to design for accessibility.
While accessibility should be a priority for all designers, one might not know where to start, or get caught up in the UI details instead. Fortunately, there are many Figma plugins to choose from to help make our designs more accessible.
This week, we decided to dedicate the issue to five great Figma plugins for designing with accessibility in mind. Whether you’re a seasoned designer or just starting out, these plugins are sure to make your designs more inclusive and user-friendly.
1. Axe for Designers
Scan your designs for accessibility issues.
Axe for Designers is a nice tool to start with when designing for accessibility. It’s automatic scan feature makes it pretty easy to see right away any accessibility issues in our designs, as it checks for color contrast, touch targets, inappropriate heading hierarchy and more. It can also be used to add accessibility annotations to designs that make the design-development handoff more efficient.
🎁 FREE
🖨️ Automatic accessibility scan
📧 Account creation is required
2. Cards for Humanity
Prompts to design for inclusivity.
While Cards for Humanity doesn’t directly help design for accessibility, it can help design for inclusivity. This plugin is a fun and unique tool that prompts designers to think about how to design for a specific person with given traits, and how to cater the designs to their needs. How would you design for 65-year-old Katherine, for example, who is easily distracted and not very confident using computers?
🎁 FREE
👩🦽 To design for inclusivity
🤡 Fun to use
3. Color Blind
Learn how your designs look to users who are color blind.
Color Blind displays designs according to the 8 different types of color vision. Make a selection in your Figma file and the plugin will clone it to create these 8 different versions. It automatically displays each version using the colors someone with that type of color blindness would see.
🎁 FREE
👁️ To design for color blindness
✅ Quick and easy to use
4. Focus Order
Design for keyboarding and screen readers.
Focus Order addresses accessibility for assistive technology, and helps us design for keyboarding and screen readers. Not everyone uses a mouse cursor to navigate websites, so it’s important to plan for how a product will interact with screen readers, for example, so that this technology can then communicate with the people using the product. Focus Order adds accessibility annotations to your design, which can be grouped as sets and stored in a single layer group that can be toggled on and off.
🎁 FREE
🖥️ To design for screen readers and keyboarding
⏳ Takes some time to set up
5. Stark Contrast & Accessibility Tool
The all-in-one accessibility plugin.
Stark Contrast & Accessibility Tool is an all-in-one accessibility plugin for testing designs. It comes with a set of integrated tools like a contrast checker with color suggestions, vision simulator, alt-text annotations, typography analysis, touch targets and more. There’s also a new sidekick option that scans designs for all accessibility issues, though it comes at a premium. If you’re looking for one accessibility plugin that does it all, Stark is for you.
💰 Extensive FREE plan; premium plans from $15/month
1️⃣ One tool for all accessibility checks
👍 Most complete plugin
Newsletter brought to you by ‹div›RIOTS.