Join our Discord
Scan your layout
Scan your layouts to identify accessibility issues across web and mobile
BrowserStack’s Accessibility Design Toolkit offers a layout scanner that runs comprehensive accessibility checks across web and mobile.
How to scan a layout
To run a layout scan, follow these steps:
On the toolkit, click Layout Scanner.
On your Figma file, select one or more top-level frames or a section that you want to scan.
Select whether you’re scanning a website or a mobile app.
Click the settings icon and select the WCAG version.
Optionally, unmark Scan for issues or Add annotations if you don’t want to include these in your layout scan. The layout scan persists your selection for future scans, and you can change it in every scan. These options give you more flexibility. For example, if you want to run scans only on the annotations, select only the annotations.
Click Save changes if you want to implement your changes.
Click Scan Frame(s). Scan results are displayed when the scan is complete.
Click through each category on the left to view issues and resolve them. The results are automatically updated based on any changes you make to the frame.
See Fix issues to learn how to get automated fixes and add developer annotations for accessibility issues.
Summary
After the scan, the results dashboard provides a single, consolidated view of accessibility findings across all scanned frames. The dashboard allows you to:
- Aggregate findings from all selected frames into a single list.
- Group duplicate issues for faster bulk fixes.
- Highlight key categories like images without alt text, low contrast elements, target size, and ARIA suggestions.
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.