Continuum Explorer is a Chrome extension that allows developers to test their UI code for accessibility as they are building screens. Learn more about Continuum Explorer and how to download and install it in the Continuum Explorer Overview article.
Ideal Testing Scenario for Continuum Explorer
Continuum Explorer works best in testing scenarios where a developer is building UI and validating it locally before checking in the code. This scenario might proceed as follows:
- The developer creates a new page and saves it locally.
- The developer builds the application and loads the new page in the browser window.
- The developer reviews the page for any issues, then returns to their IDE to fix the issues.
- When the issues are fixed, the developer saves the fixes, rebuilds the application, and reloads the page in the browser window to re-inspect the page visually.
Testing for Accessibility with Continuum Explorer
In the above testing scenario Continuum Explorer can be used during the the visual inspection stage. To do so, perform the following steps:
- Open the page that is in development within the browser window (at the moment, this extension is available in Chrome only).
- There are three settings that developers can select based no their preference in Continuum Explorer:
- Automatically retest when current page changes: When this setting is selected, Continuum Explorer will automatically retest the active page (with changes within the same tab) without showing the message.
- Automatically retest when active tab changes: When users select this setting, Explorer will automatically retest the active tab if the tab switched in the broswer rather than prompting the message that the something changes.
- Experimental: Listen for DOM mutations: This setting allows Continuum monitors the committed changes to the DOM without prompting the user the message.
- The default is that none of these settings selected. The following steps are based on the default setting.
- Launch Continuum Explorer and make sure the page to be tested is loaded in the active tab in the main browser window. When none of the above settings are selected in the preferences (default setting), Continuum Explorer will display a message indicating that the active tab has changed from its last use, along with a button to test the page.
- Select the "Test This Page" button to test the active page. Violation instances will be displayed in the Continuum Explorer window.
- Select a violation to view the details for the violation, including the severity, noticeability, tractability, Best Practice URL, accessibility standards, and recommended remediation steps.
The selected violation instance will also be highlighted in the main browser window.
- In your IDE, make changes to the source code to fix accessibility issues highlighted by Continuum Explorer. Save and rebuild.
- Reload the page in the main browser window.
- Continuum Explorer will now indicate that the page has been updated and prompt you to retest.
- When the "Test This Page" button is selected, the page will be retested and Continuum Explorer will display an updated list of violations.