Interactive Elements Intelligent Guided Test

The Interactive Elements IGT supports testing multiple states without having to rerun the IGTs. An interactive element is simply anything that the user interacts with on the web page like buttons, links, inputs, menus, etc.

How it works

The first thing you will have to do is put the page in the state you want to test. After that, a few simple questions will guide you through the accessibility tests required for each of the interactive elements on the page.

Click "START" when you are ready to perform the test.

Step 1: Missing

First, the IGT will scan the page (or component) to find all of the interactive elements. If Machine Learning is enabled (see settings page), it will detect any elements not marked up with interactive attributes (roles, tab index, etc) that may in fact be interactive.

On this first question, you are asked to select any interactive elements that were missed. If nothing is missing, simply click "NEXT".

Next, you can choose which element you would like to test. By default, these elements are grouped "intelligently" using our algorithm to group similar elements. However, you can choose to group them by role or have them presented with no grouping at all using the "Group by" control.

Step 2: Accuracy

For the elements you choose to test, you will be asked to verify the Accessible Name, Role and State of the element. The Accessible Name is used to convey the purpose of the interactive elements such as a label on a form field. The Role indicates what control the user is interacting with (button, tab, link etc.). The State tells the user using assistive technology what is the current state of the control (such as selected/unselected, checked/unchecked).

Accessible Name

You will be asked to confirm the Accessible Name accurately describes the interactive elements purpose.

Role

Next, if the IGT is able to detect the role, it will be pre-selected. You can override the default selection if the role is different than what is detected from a dropdown of available roles.

State(s)

Similarly, the IGT will display pre-selected states. For elements where a state is not relevant, leave the state as "Not Applicable". After you have confirmed the Accessible name, role and the state being properly conveyed, you can test another state of the same element! Go ahead and put the Interactive Element in the additional state you'd like to test (such as checking a checkbox, selecting a tab etc.). Once you are ready, click "CHECK ELEMENT'S STATE". The IGT will detect the new state and you can confirm whether the state is being correctly conveyed. This will be repeated for all elements you selected for testing. Once you are done testing all the selected elements and their states you wish to test, select "NEXT".

What it tests for

The Interactive Elements IGT tests for:

• Valid accessible names
• Valid roles
• Valid states

FAQs

What do each of the available "Element States" mean?

Below is a breakdown of each of the available states to test in the Interactive Elements IGT.

Disabled

Indicates that an element is not editable or otherwise operable. When disabled, an element is neither editable nor focusable. Disabling an element can be done using the native HTML disabled property (preferred) or aria-disabled="true".

Disabled Examples

Disabled submit button:

<button type="submit" disabled>Submit</button>

Disabled input field:

<form>
  <label for="email">Email</label>
  <input type="text" id="email" disabled />
</form>

Pressed

Indicates that a toggle button is currently "pressed". An element's pressed state is managed via the aria-pressed attribute. There are 3 supported values for aria-pressed:

• "true": indicates toggle button is currently pressed
• "false": indicates toggle button is not currently pressed
• "mixed": indicates values of more than one item controlled by the toggle button do not all share the same value (tri-state)

Pressed examples

A pause button that is not currently pressed:

<button aria-pressed="false">Pause</button>

A mute button that is currently pressed:

<button aria-pressed="true">Mute</button>

Expanded

Indicates that an element, or another grouping element it controls, is currently expanded. An element's expanded state is managed via the aria-expanded attribute. The value of the aria-expanded attribute should be set to "true" when the element (or grouping element it controls) is expanded and set to "false".

Expanded examples

An expanded button:

<button aria-expanded="true">options</button>

Selected

Indicates than an element is currently in a "selected" state. An element's selected state is managed via the aria-selected attribute. The value of the aria-selected attribute should be set to "true" when the element is selected, "false" when it is not and "mixed" for tristate checkboxes in a mixed checked state.

Selected examples

A simple tab panel managing aria-selected on the role="tab" elements:

<div role="tablist" aria-label="Simple Tabs">
  <div
    role="tab"
    aria-selected="true"
    aria-controls="panel-1"
    id="tab-1"
    tabindex="0"
  >
    Tab 1
  </div>
  <div
    role="tab"
    aria-selected="false"
    aria-controls="panel-2"
    id="tab-2"
    tabindex="-1"
  >
    Tab 2
  </div>
</div>
<div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
  <p>Panel 1 content...</p>
</div>
<div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden>
  <p>Panel 2 content...</p>
</div>

Checked

Indicates that an element is currently in a "checked" state. Commonly used in checkboxes, radio buttons, and other widgets. An element's checked state can be managed using the HTML checked attribute (used with native checkboxes) or the aria-checked attribute. If using aria-checked, the value of the attribute should be set to "true" when the element is checked and "false" when it is unchecked.

Checked examples

A checked native checkbox:

<input id="terms" type="checkbox" checked />
<label for="terms">I agree to the terms and conditions</label>

An unchecked ARIA checkbox:

<span
  role="checkbox"
  id="checkbox"
  aria-checked="false"
  tabindex="0"
  aria-labelledby="checkbox-label"
></span>
<label id="checkbox-label">Subscribe to newsletter</label>

Read only

Indicates that an element is not editable, but is otherwise operable and focusable. An element's readonly state can be managed using the HTML readonly attribute or the aria-readonly attribute. If using aria-readonly, the value of the attribute should be set to "true" when the element is in a readonly state and "false" when it is not.

Read only examples

A readonly input:

<label for="first-name">First Name:</label>
<input name="first-name" type="text" value="Gene" readonly />