Elevate Your Designs: The Why and How of Designing for Accessibility

Integrating accessibility into the design stage of your development life cycle is a game-changer. It ensures that accessibility is woven into the very core of your product, making it a fundamental part rather than an afterthought. This approach also helps to bridge the gap between design and development, reducing conflicts and minimising the need for extensive revisions. It's a win-win for both usability and aesthetic integrity! 

We also find that designing for accessibility leads to innovative solutions that benefit all users, a phenomenon known as the "curb-cut effect." By prioritising accessibility at the design stage, you're opening the door to unexpected innovations that can elevate your product. 

Start with what you as a designer can influence and prioritise accessibility at the design stage. You will start seeing how it can help create meaningful and impactful user experiences for everyone. 

How to Integrate Accessibility into Your Design Process 

Now that we've established the importance of integrating accessibility at the design stage, you might be wondering how to put this into practice. Enter Figma accessibility plugins as an easy starting point – below is a selection of tools that can help you ensure certain aspects of your designs are accessible from the outset.

These plugins offer a range of functionalities, from colour contrast checks to text resizers, enabling you to create designs that are not only visually appealing but also inclusive and accessible. 

Here are 5 different plugins you can start using today. 

Top 5 Figma Accessibility Plugins You Should Be Using 

1. Text Resizer: Text Resizer allows you to easily scale up the base font in your designs to ensure that content and functionality are not lost or overlap with other content. Users should be able to access content and functionality when the text size is increased by 200%. This is particularly important for low-vision users as it can allow them to make content more readable. 
2. Contrast: We like this plugin because, in addition to checking the contrast of text on a solid colour background, it can also check text against gradient backgrounds and background images. It also shows which Web Content Accessibility Guideline (WCAG) compliance level your text contrast meets. 
3. A11y - Focus Order: This Microsoft-developed plugin enables designers to specify the exact keyboard navigation sequence for interactive elements, ensuring a logical focus order for users who rely on keyboards or assistive technologies.
4. Colour blind: This plugin lets you view your designs in the 8 different types of colour vision deficiencies. This can help identify parts of your design that rely on colour alone or may be difficult to understand due to low contrast. 
5. Stark - Contrast & Accessibility Tools: Available for Figma and Sketch, Stark offers an Artificial Intelligence (AI) assistant to help with accessibility. This is a paid plugin but provides a comprehensive suite of tools which are frequently updated and improved based on user feedback. 

What Figma Plugins Can't Do: The Human Touch in Accessibility 

While these plugins are powerful, there are certain areas where manual review and contextual understanding are necessary: 

• Contextual Understanding: Automated tools excel at detecting missing alt text for images, but they fall short in evaluating its quality and appropriateness. Manual review is still required to determine if the alt text accurately conveys the image's purpose and content within the design's context. Is it descriptive enough? Does it provide the right information for users relying on screen readers? These nuanced decisions require human judgment. 
• Logical Content Hierarchy: While plugins can check for the presence of headings in designs, they can't assess if the structure and relationship between headings make logical sense. A manual review ensures that the heading hierarchy accurately reflects the content's structure and importance. This is crucial for users navigating with assistive technologies. 
• ARIA Implementation: Determining the appropriate ARIA (Accessible Rich Internet Applications) attributes for custom components often requires human judgment and a deeper understanding of web accessibility and the relevant standards. 
• Dynamic Content Handling: Automated tools cannot fully grasp how to handle content that changes dynamically. For example, they might not detect when new content is added to the screen or how to manage live updates which are crucial for screen readers and other assistive technologies. 
• Cognitive accessibility: Aspects like clear language, consistent navigation, and predictable interactions are difficult for automated tools to assess. We believe a manual review is crucial to ensure designs don't impede users with cognitive disabilities. 

By integrating accessibility at the design stage, you not only create more inclusive products but also inspire innovative solutions that benefit all users. Make accessibility a priority from the start, leverage the power of Figma plugins, and complement these tools with human insight to create truly accessible and impactful designs. 

Enhance Your Accessibility Knowledge 

For more insights on designing for accessibility, join our Accessibility for Designers training (individual and team options are available) or speak to us about our manual design review service to fill in any gaps that the tools are unable to check. Let's make every design accessible and impactful for all users. 

Watch a snippet of our Accessibility for Designers training on Accessibility requirements for web orientation: