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.

To run a layout scan, follow these steps:

1. On the toolkit, click Layout Scanner.
2. On your Figma file, select a top-level frame that you want to scan.
3. Next, select whether you are scanning a website or a mobile app.
   The scan categories are slightly different based on the type of scan. Notice that Landmarks is displayed as a category on the left when Website is selected and iOS Containers is displayed when Mobile is selected.
4. Finally, click Scan Frame to begin scanning. 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 the following sections for details on each category.

• Color contrast on text elements
• Color contrast on non-text elements
• Headings
• Landmarks (Web only)
• iOS containers (Mobile only)
• Focus order
• Image alt-text annotation
• Vision simulator

Color contrast on text elements

Click Text Contrast to view issues related to color contrast. Notice that layers with the same contrast issues are grouped together on the right. Click each group to view the layers where the issue is flagged. The results pane also displays the precise contrast ratios considering the opacity of the layers. You’ll see the results and contrast ratios change as you change the colors to fix the issue.

For example, in this screen, the toolkit has identified 6 layers with the same contrast issues.

If the plugin detects a color contrast issue, it suggests accessible color combinations. You can apply a suggestion without leaving the plugin.

Click Done when you have fixed the issue. Click Mark as done after you have addressed all Color Contrast related issues.

In summary, the toolkit allows you to:

• Group similar contrast issues automatically.
• Display precise contrast ratios taking into account the opacity of layers.
• View WCAG AA and AAA pass/fail status.

Color contrast on non-text elements

To check for contrast issues in non-text layers, follow these steps:

1. Select the non-text element you want to check.

2. In the plugin, select Non Text Contrast. On selection, the toolkit immediately highlights the WCAG AA pass/fail status for color contrast on the selected layer.

   

   The plugin automatically detects contrast issues for the UI elements.

3. Click Done.

Headings

Click Headings to view issues related to headings. To manually specify the headings on the layout, select one or more text layers, click Add Headings and choose the heading level.

Alternatively, use the headings detected by the toolkit and specify their levels inside the Review & Add popup. When you’ve made your selections, click Done to annotate the headings on the layout.

For example, in this screen, two headings are annotated on the layout and the plugin has identified another 5 potential headings.

Heading annotations helps developers when they consume the design files. Click Mark as done after you have identified all headings.

In summary, the toolkit allows you to:

• Detect potential headings automatically.
• Annotate headings manually.
• Suggest best practices for heading hierarchy (multiple first-level headings, missing first-level heading etc.).
• Add visible annotations for developer reference.
  

Landmarks (Web only)

Click Landmarks to specify the landmarks on the layout. Next, select the layers on your frame and then click Add Landmarks to select its type.

For example, in this screen, the toolkit helps demarcate the Header and Nav on the frame.

When you’ve made your selections, click Done to annotate the landmarks on the frame which helps developers when they consume the design files. Click Mark as done after you have identified all landmarks.

In summary, the toolkit allows you to:

• Support seven standard HTML landmark types for structuring webpages.
• Manually annotate any layer in the frame to demarcate regions on the page.
• Provide clear annotations for development handoff.
  

iOS containers (Mobile only)

Containers in iOS help screen readers navigate a view efficiently. They act as points of reference, enabling users to jump quickly to specific sections of content. Click iOS Containers to specify the containers on the layout. Select one or more layers and click Add Container.

For example, in this screen, the toolkit has identified three iOS containers.

Label each container and click Mark as done when completed.

In summary, the toolkit allows you to:

• Manually annotate any layer in the frame to define meaningful container labels.
• Provide clear annotations for development handoff.

Focus and Reading order

Focus order lets you specify the sequence in which elements receive focus when your end users navigate the screen using a keyboard.

Reading order defines the sequence in which screen readers read out elements on the screen. While focus order affects keyboard navigation, reading order affects how assistive technologies present content to users.

In many cases, the focus order and reading order should match to avoid confusion and improve accessibility. You can assign a focus order and reading order to any UI element and update the sequence at any time. After you assign the order, numbers appear next to the elements in the specified sequence. This visual feedback helps you verify that the reading order aligns with user expectations.

To speed up the process, you can select multiple elements and automatically assign a reading order. This feature is useful when working with large or repetitive layouts, but review the order afterward to make sure it matches your intended focus and reading flow.

To add focus order, follow these steps:

1. Select all the layers you want the users to navigate to when using the keyboard and then click Add Focus Order.

   The toolkit identifies the layers you selected and applies the left-to-right and top-to-bottom logic to automatically suggest and annotate the order on the layout.

   

2. Click Add role and attributes besides the element to set Role, add Developer note, or Add ARIA attributes and related notes.

3. Click Save and close.

   

4. Drag and drop the layers on the toolkit to change the order.
   
   For example, in this screen, the toolkit calls out the focus order on the layout.

   

5. Click Mark as done after you have defined the focus order and reading order.
   

In summary, the toolkit allows you to:

• Bulk select interactive elements to annotate in one-click.
• Generate sequential numbering automatically in a meaningful order.
• Reorder focus ordering easily.
• Provide clear annotations for development handoff.
  

Image alt text annotations

The toolkit helps provide text alternatives to images, icons, charts, etc., or other visual elements on your page. Click Alt Text on the toolkit to identify images that do not have alt text. Use the Add Alt Text link to define the alt text for each visual element. These alt text then act as handoff notes to developers.

For example, in this screen, the toolkit has identified a few images that do not have alternate text defined.

Click Mark as done after you have defined the alt text for all visual elements.

In summary, the toolkit allows you to:

• Automatically detect JPG and PNG images on the frame.
• Manually annotate any layer with alt text or mark it as decorative.
• Tag images as complex for additional context.
• Auto-generate developer handoff notes tailored for Web, Android, and iOS.

AI image alt text annotations

The plugin provides AI-generated alt text suggestions for meaningful images on the scanned frame. To do this, follow these steps:

1. Click Alt Text on the toolkit to identify images that do not have alt text.
2. Click Generate Alt Text.

3. Select the images, you want to generate alt text for and click Generate Alt Text.

   

4. Click Mark as done.

Vision simulator

There are several different types of color deficiencies. The toolkit stimulates how your design would appear to audiences with varying types of color deficiencies.
Click Vision Simulator to simulate different types of deficiencies. Click on a simulated thumbnail to see how the frame would appear to a person with the selected deficiency.

For example, in this screen, the toolkit showcases what the layout would appear like to a person having Achromatopsia deficiency.

In summary, the toolkit helps:

• Simulate eight types of color blindness and weakness.
• Identify potential color-based confusion points.

ARIA annotations

Use the Accessibility Design Toolkit plugin to annotate ARIA roles and attributes in your layout to improve accessibility and screen reader support.

The plugin automatically identifies the UI elements in a scanned frame. For each identified element, the plugin suggests a suitable role and relevant ARIA attribute–value pairs. These suggestions help you quickly add accessible metadata to your UI. If the plugin doesn’t detect a UI element, you can annotate it manually.

To annotate ARIA attributes, follow these steps:

1. On the toolkit, click Layout Scanner.
2. Select a frame in your Figma and click Scan Frame.
3. Click ARIA notes.

4. Select a specific layer on the Figma and then click Add Element.

5. Click Add role and attributes.

6. Set Role, add Developer note, and select ARIA attributes to Add ARIA attributes and related notes.

   

7. Click Save and next. The attribute is listed on the plugin.

8. Click Mark as done.