Product Guide

Overview

The Evinced Debugger Chrome DevTools extension puts machine learning intelligence to work helping developers identify web accessibility problems directly in the browser.

Using the Evinced Debugger, you can:

• Apply the full suite of Evinced validations to find structural, ARIA, and styling problems that cause accessibility issues
• Associate UI design patterns with DOM structures and dynamically check their accessibility and consistency with the W3C ARIA Authoring Practices Guide (APG), which combine WCAG Success Criteria, ARIA specifications, and best practices to create guidelines for common user interfaces
• Identify relevant WCAG Success Criteria and accessibility best practices associated with each issue
• Get quick fixes and guidance for resolution
• Filter issues by severity

---

Get started

Install Debugger Chrome extension

Log in to Evinced Product Hub and click on Download under “Dev Debugger” to open the Evinced Dev Debugger extension in the Chrome Web Store. Switch to Chrome browser if necessary and click on Add to Chrome to install.

Open Debugger in Chrome DevTools and log in

To access the Debugger, open Chrome DevTools (command-option-I in macOS or Ctrl-Shift-I in Windows) and find “Accessibility Debugger” in the Elements inspection panel.

When first opening, you will be prompted to log into your account on Evinced Product Hub. Your logged in status will persist across windows in your browser.

Choose full page or component analysis

The Accessibility Debugger panel presents two analysis options:

• Full page analyzes all elements on the page for general accessibility issues.
• Specific component analyzes a component’s compatibility with accessible UI design patterns.

In most cases, begin with Full page to scan for issues.

---

Scan a page for accessibility issues

Select Full page to perform a static analysis of page code, running the full suite of Evinced accessibility validations. The results are displayed in a “Page Analysis” screen with the scan results, reporting the number of issues and elements of concern. Using the pagination control, you can cycle through the elements to see details for each.

The following screenshot shows an analysis of the a11y-audits.com home page, reporting 23 issues found across 24 elements.

In the “Page Analysis” panel, you can:

1. Use the breadcrumb at the top of the panel to return to the main panel.
2. Click the Analyze button to analyze any element selected in the Element panel.
3. Use Critical issues only switch to hide and show non-critical issues.
4. Use the issue carousel’s buttons to navigate though elements with issues to examine their details.
5. Use the “Highlight Element” button to highlight the selected element in the page or the “Inspect Element” button to inspect it in the Elements panel.
6. Expand the details disclosure for each issue to know how to fix it.

The report showed two issues for a summary element, Button-name and Nested-interactive. Expanding the Button-name issue opens a panel with:

• A short summary of the issue
• The issue severity: Critical, Serious, Moderate, or Minor
• A brief hint on how to fix
• One or more links to the relevant WCAG success criteria and the relevant Evinced validation

---

Check the accessibility of a UI component

Select Specific component to match a UI component with a recognized accessible design pattern and apply the Evinced engine to dynamically exercise and check it for accessibility problems.

Debugger will guide you through the steps involved. First up is a screen that summarizes the steps:

1. Select an element of the component you wish to analyze
2. Select a UI design pattern associated with the component and, for some design patterns, select additional element or elements that need to be specified for the component
3. Analyze and review the results

If you check the “Don’t show again” checkbox, this overview screen will be skipped in following invocations.

Click Get Started to open the “Select an element” panel.

Step 1: Select an element

In most cases, the best element to select will be the pattern’s primary interactive element or its closest container. Review “Selecting an element for component analysis” or the relevant pattern in “Supported UI design patterns” for further guidance.

Enter a CSS selector for an element in Debugger’s Element selector input field or use the DevTools inspector to select an element then focus in the input to fill it with an automatically generated CSS selector.

Click Continue to go to the next step, select a UI design pattern.

Step 2: Select a UI design pattern

Select the UI design pattern you want to use for the analysis in the “UI design pattern” dropdown.

For some elements, such as a button, more than one UI design pattern may be relevant. (Debugger will scan and report accessibility issues for any selected UI design pattern, but results will be meaningful only for a relevant pattern.)

Click the link “Learn about UI design patterns” to visit the W3C ARIA Authoring Practices Guide to learn more about meeting accessibility requirements for common UI design patterns.

See “Supported UI design patterns” in this guide for specific guidance on supported design patterns.

In most cases, the select element and selected UI pattern are all that Debugger needs for the analysis. Click Scan component to begin the analysis.

For some UI design patterns, you will need to select additional elements and associate them with specific roles in the UI pattern. The Debugger wizard will prompt you for additional information.

Step 3: Review component issues

After scanning, Debugger shows any issues identified with the selected component in a Results screen that shows the number of issues found and the number of elements with issues. Details for each test are identified as issue, warning, or passed, each category presented in a separate tab panel.

A disclosure shows details for each test:

• The name of the test
• The test description
• The relevant element selector(s)
• A link to further information regarding the test in the Evinced Knowledge Base

---

Selecting an element for component analysis

When selecting an element to analyze a component, select the element or elements that play a defining role in the pattern.

Simple patterns with one interactive element

Select the element that:

• Triggers an action in the Button pattern
• Accepts a choice in either the Checkbox, Switch, or Toggle Button pattern
• Opens a popup that allows a user to choose a value in the Combobox or Menu Button pattern
• Expands and collapses content in the Disclosure pattern
• Provides access to a resource in the Link pattern
• Opens an overlay window in the Modal Dialog pattern
• Accepts text entry in the Text Input pattern

Special consideration: Because a modal does not have a predefined structural relationship with the trigger that opens it, the dialog element itself must also be selected. When choosing the Modal Dialog pattern, the Debugger wizard will prompt you to select the dialog element within the overlay window. (If you open the dialog to find it, be sure to close it before starting the analysis so that Debugger can operate the pattern.)

Composite patterns with one keyboard operable element

Selecting the right element might not be so clear for interactive patterns where multiple elements accept a mouse click but only one is keyboard operable. In these cases, select the element that enables keyboard users to:

• Move a “thumb” to select a value in the Slider pattern
• Select a value in the Spin Button pattern

Composite patterns with multiple interactive elements

For many patterns, several elements work together as a group. In these cases, select the element at the root of the group—the group container:

• A stack of show/hide (disclosure) components in the Accordion pattern
• A list of navigation links that show location in the page hierarchy in the Breadcrumb pattern
• A tabular structure in the Data Grid pattern
• A region that loads new content as the user scrolls in the Feed pattern
• A list of options in the Listbox pattern
• A menu of choices in the Menu pattern
• A multi-thumb input widget in the Multi-thumb Slider pattern
• A set of clickable buttons only one of which can be selected in the Radio Group pattern
• A site navigation region in the Site Navigation pattern
• A list of buttons that select one of several “tab” panels to be displayed in the Tablist pattern
• An image rotator in the Carousel pattern

Special consideration: The Carousel pattern can be implemented accessibly in a variety of ways. After selecting the Carousel pattern, the Debugger wizard will ask if it is automatically or manually rotated and prompt you to select any controls it may have, such as:

• Previous and next slide buttons
• Slide pagination controls

Non-interactive patterns

Whether an element works alone or with other elements to form the pattern, select the element at the root of the group — the group container.

• A region that displays a brief, important message, in the Alert pattern
• A graphical display of a value in a range in the Meter pattern
• A tabular structure in the Table pattern

---

Supported UI design patterns

The Evinced Accessibility Debugger supports the following UI design patterns for accessibility analysis. Links to the relevant guidelines in the ARIA Authoring Practices Guide (APG) are provided for each pattern.

Accordion

An accordion is a vertically stacked list of items with disclosure (show/hide) function to reveal content. For further information, refer to Accordion Pattern in the APG.

Select the accordion container.

Alert

An alert is an element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task. For further information, refer to Alert Pattern in the APG.

Select the alert container.

Breadcrumb

A breadcrumb component presents a user's location in a website or application. It is usually presented as series of links separated by a chevron. For further information, refer to Breadcrumb Pattern in the APG.

Select the breadcrumb list or container.

Button

A button is a UI widget that is used to trigger an action or event. It is typically used to submit a form, open a dialog, cancel or confirm an action, or perform some other action. For further information, refer to Button Pattern in the APG.

Select the trigger element.

Carousel

A carousel is a set of slides, typically containing images, that are displayed or "rotated" sequentially automatically or by user action. For further information, refer to Carousel Pattern in the APG.

Select the carousel container or one of its controls. When selecting Carousel UI pattern, you will be prompted for additional information:

• Automatic or manual rotation
• Selector for main container
• Selector for slide pagination control (if used)
• Selectors for previous and next slide buttons (if used)

Checkbox

A checkbox is an input widget that allows a user to choose between two or three states. Dual-state checkboxes toggle checked and unchecked. Tri-state checkboxes toggle between three states: checked, unchecked and partially checked. For further information, refer to Checkbox Pattern in the APG.

Select the checkbox element.

Combobox

A combobox is an input with an associated popup. For further information, refer to Combobox Pattern in the APG.

Select the input element.

Data Grid

A data grid widget is a container that enables users to navigate and interact with tabular information using directional navigation keys. For further information, refer to Grid Pattern in the APG.

Select the data grid container.

Disclosure

A disclosure is a widget that allows content to be shown or hidden. For further information, refer to Disclosure Pattern in the APG.

Select the disclosure button or trigger element.

Feed

A feed automatically loads new content as the user scrolls. For further information, refer to Feed Pattern in the APG.

Select the feed containing element.

Link

A link is an interactive element that provides access to a resource, such as a URI. For further information, refer to Link Pattern in the APG.

Select the link element.

Listbox

A listbox presents a list of options and allows a user to select one or more of them For further information, refer to Listbox Pattern in the APG.

Select the list element.

Menu

A menu offers a list of choices to the user, such as a set of actions or functions, behaving like native operating system menus. For further information, refer to Menu and Menubar Pattern in the APG.

Select the menu or menubar container, typically a list element.

Menu Button

A menu button is a button that opens a menu. For further information, refer to Menu Button Pattern in the APG.

Select the button element.

Meter

A meter is a non-interactive graphical display of a numeric value within a known range. For further information, refer to Meter Pattern in the APG.

Select the meter containing element.

Modal Dialog

A modal is a window overlaid on either the primary window or another dialog window that leaves its underlying window inert so that users cannot interact with content outside of the modal dialog. Inert content outside an active dialog is typically visually obscured or dimmed so it is difficult to discern. For further information, refer to Dialog (Modal) Pattern in the APG.

Select either the modal’s triggering button or the dialog container. When selecting Modal UI pattern, you will be prompted for additional information:

• Role for selected element: trigger button or modal
• Selector for additional element: trigger button or modal

Note that the modal dialog should be closed before scanning.

Multi-Thumb Slider

A multi-thumb slider is an input widget that allows users to set related numerical values by positioning “thumbs” on a slider. For further information, refer to Slider (Multi-thumb) Pattern in the APG.

Select the slider group container.

Radio Group

A radio group is a set of checkable buttons, known as radio buttons, that allows users to select one and only one option of a group of options. For further information, refer to Radio Group Pattern in the APG.

Select the radio group container.

Site Navigation

A site navigation component is used to navigate between pages in a site. For further information, refer to Navigation Landmark in the APG.

Select the navigation group container, typically a list of links.

Slider

A slider is an input where the user selects a value from within a given range. For further information, refer to Slider Pattern in the APG.

Select the slider container.

Spin Button

A spin button is an input widget that restricts its value to a set or range of discrete values. For further information, refer to Spinbutton Pattern in the APG.

Select the control element that changes value using arrow keys.

Switch

A switch allows users to select between two values: “on” or “off.” For further information, refer to Switch Pattern in the APG.

Select the switch element.

Table

A table is a static tabular structure containing one or more rows that each contain one or more cells; it is not an interactive widget. For further information, refer to Table Pattern in the APG.

Select the table container.

Tablist

A tablist is a list of interactive “tabs” that allow users to navigate between layered sections of content, known as tab panels. For further information, refer to Tabs Pattern in the APG.

Select the tablist container.

Text Input

A text input, such as the HTML <textarea> and <input type="text"> elements, allows users to enter any combination of letters, numbers, or symbols. For further information, refer to the textbox role and the searchbox role in the WAI-ARIA 1.2 recommendations.

Select the text input element.

Toggle Button

A toggle button is a button that can be toggled between two or three states. For further information, refer to Button Pattern in the APG.

Select the button element.