Layout assisted test

Identify accessibility issues in the layout and structure of your web pages.

Layout refers to the structural arrangement of elements on a webpage, including their positioning, titling, spacing, and visual hierarchy. A well-structured layout ensures that content is accessible and understandable for all users, including those who rely on assistive technologies like screen readers.

A Layout Assisted Test in Accessibility Testing is a specialized check that helps identify and resolve accessibility issues related to the organization and presentation of content on a webpage.

Steps to run and review a layout assisted test

Follow these steps to run and review a layout assisted test:

1. Launch BrowserStack Accessibility Toolkit.
2. In the Assisted Test tile, click Select test.
   
3. From the Starting test drop-down, select the Layout test type.
4. Click Start test.
5. The extension automatically detects the layout and structure of the webpage. When prompted, check if any of the texts detected as headings are not actual headings. Select the incorrect headings.
6. Our smart analyser detects headings on your web page to help you find potential headings that are not marked as such in HTML. When prompted, check if all the texts detected as headings are actual headings. Select the correct headings.
7. Click Next. When prompted, select any missed headings by using the DOM selector or on the viewport.
8. Click Next. The extension automatically detects the landmarks used. When prompted, select any section that should have been in a landmark, but was not marked so.
9. Click Next. When prompted, select any landmark that is incorrectly assigned.
10. Click Next. When prompted, choose from the options to answer questions on the landmarks used in the webpage. Select any incorrectly marked landmark.
11. Click Next. When prompted, answer questions on the lists used in the webpage. Mark any incorrect usage or missed lists.
12. Click Next. When prompted, mark any change in the language of the content without the use of the lang attribute.
13. Click Next. When prompted, mark if the web page’s title is unrelated to the content or uninformative.
14. Click Next. All accessibility issues related to the layout of the webpage are listed.
15. Click a component to know more about the issue and ways to resolve it.
16. Click Save and end test.
17. Give the report a suitable name and click Save.
18. Review the detailed test reports in the Accessibility Testing Dashboard. You can share the report link or download the report as a CSV file from the dashboard.

Next steps

• View rules for assisted tests.