Scan components

Scan the components of your design to identify accessibility issues and generate developer handoff guidelines.

BrowserStack’s Accessibility Design Toolkit offers a component scanner that runs comprehensive accessibility checks on UI components and generates ARIA annotations and developer documentation.

To run a component scan, follow these steps:

1. On the toolkit, click Component Scanner.
2. In the Figma file, select any component set.
3. Click Scan Component to start the scan. Scan results appear when the scan is complete.

Scan results

The component scan runs detailed accessibility tests on the component you selected. See Fix issues to learn how to get automated fixes and add developer annotations for accessibility issues.

Advanced checks for common components

The scanner runs the full set of component-specific checks in addition to the generic checks when the top-level selection you scan is one of the five supported types: Button, Input, Link, Radio Button, or Checkbox.

Manual guidelines

The toolkit provides a checklist and instructions for components that require manual intervention:

• The guidelines generated are specific to the selected components.
• Component states, such as focus or error, are included when relevant.

For example, a Checkbox component may include the following manual checks:

• Keyboard compatibility: Instructions for ensuring the component is keyboard accessible.
• Screen reader compatibility: Guidelines for proper naming and role assignment.
• Focus management: Recommendations for visible focus indicators.
• Error states: Guidelines for accessible error messaging.

Developer handoff frame

The toolkit automatically generates a developer handoff frame, which is displayed next to the scanned component. The documentation includes:

• ARIA annotations: Role, state, and property attributes for the component.
• Keyboard interaction patterns: Expected keyboard behavior.
• Accessibility requirements: Component-specific WCAG success criteria.
• Code snippets: Example implementation with appropriate accessibility attributes.