BrowserStack Accessibility Design Toolkit

About this plugin

Prevent up to 40% of accessibility issues at the design stage.

BrowserStack Accessibility Design Toolkit is a powerful Figma plugin that helps design teams create accessible products from day one. With automated checks, intelligent suggestions, and component-level scanning, teams can shift-left to ensure accessibility compliance while designing, thus reducing development costs.

Learn more about Accessibility Design Toolkit here

Design Accessible Components

Start with Component Scanner to Bake Accessibility into Your Design System

The Accessibility Design Toolkit plugin scans component variants to help designers embed accessibility from the start. It provides:

1. A component checklist of mandatory WCAG guidelines
2. Detection of component states (hover, focus, disabled, etc.)
3. Best practice guidelines for each component

By baking accessibility into your component library, you can scale accessibility consistently across your design system.

Issue Detection by Spectra™ Rule Engine

Automated, intelligent accessibility insights—built into your workflow

The Spectra™ Rule Engine powers deep accessibility checks across your website and mobile interfaces. Here’s what it automatically detects and guides you on:

1. Contrast: Flags insufficient text-background contrast and issues caused by opacity
2. Headings: Suggests proper heading hierarchy and flags structural issues like multiple H1s
3. Focus Order: Recommends logical keyboard navigation flow for focusable elements
4. Image Alt-text: Detects all image assets and checks if alt-text is provided
5. Landmark: Identifies and suggests usage of semantic landmarks for improved navigation
6. Touch Target Size: Detects tap targets that fail to meet accessibility size and spacing standards
7. Vision Simulator: Previews visual experiences for users with impairments such as color blindness

Simplify Design-to-Developer Handoff

As part of both component scanner and layout scanner, the plugin auto-generates guidelines and documentation to streamline handoffs:

1. Automatic heading and text detection for simplified annotations
2. Intelligent focus order suggestions to skip manual tagging
3. Accurate ARIA label recommendations and design specs

---

This plugin is licensed under Figma’s Terms of Service, unless you have a different agreement with us for Figma Services, and any use of BrowserStack Services is subject to your agreement with BrowserStack.