Selecting Elements
Several axe DevTools features ask you to point to specific elements on the page. You can select elements with your mouse by clicking them on the page, or with your keyboard and assistive technology using the "Element Selector". Both methods can be used interchangeably within the same step.
- Where you select elements
- Selecting with a mouse
- Selecting with the Element Selector
- Jumping between highlighted elements
- Removing a selection
Where you select elements
| Feature | What you select |
|---|---|
| Partial Page Scan | One element that the scan is limited to |
| Raising Manual Issues | One element the issue is raised against, plus any number of related elements |
| Intelligent Guided Tests | Depends on the question. Some questions ask for one element (for example, a table or a modal's trigger), others for any number of elements (for example, headings or tab stops that weren't already highlighted) |
When a step accepts only one element, you can't select another until you remove the current selection.
Selecting with a mouse
Mouse selection is controlled by the "Mouse Selection" switch, which shows whether it is currently "ON" or "OFF". In most steps, mouse selection is turned on automatically.
While mouse selection is on:
- Hover over the page. The element under your pointer is outlined.
- Click the outlined element to select it. The element stays highlighted on the page, and the Element Selector expands to show it.
Clicks are captured by axe DevTools while mouse selection is on, so links and buttons on the page won't activate. To interact with the page normally (for example, to open a modal before selecting it), turn the "Mouse Selection" switch off, then turn it back on when you're ready to select.
In a few Intelligent Guided Test steps, such as selecting a modal after you've launched it, mouse selection starts off so you can interact with the page first. Turn the "Mouse Selection" switch on when you're ready to select.
Selecting with the Element Selector
The Element Selector is a keyboard-accessible, screen-reader-friendly way to select elements without a mouse. It appears at the bottom of the panel, below the "Element Selector" heading, and shows the page's DOM as an expandable tree. Each item shows the element's tag name along with its id, class, and role attributes, when present.
In most features, the Element Selector starts collapsed. Activate the "View element selector" button next to the heading to expand it.
Keyboard navigation
| Key | Action |
|---|---|
| Down Arrow | Move to the next visible element |
| Up Arrow | Move to the previous visible element |
| Right Arrow | Expand a collapsed element, or move to its first child if it's already expanded |
| Left Arrow | Collapse an expanded element, or move to its parent if it's already collapsed |
| Space | Select the focused element, or deselect it if it's already selected |
As you move through the tree, the focused element is highlighted on the page and scrolled into view, so you can confirm you're on the right element before selecting it.
You can also use the buttons below the tree:
- "Select" selects the focused element
- "Remove" removes the focused element from your selection
Clicking an item in the tree expands or collapses it; it does not select it. To select an element from the tree with a mouse, click the item and then click "Select".
Screen reader support
When an item in the tree receives focus, screen readers announce details about the element, such as its accessible name and calculated role. Items also announce "Selected" when they're part of your selection, and "Highlighted" (with their position, such as "Highlighted 2 of 5") when axe DevTools has highlighted them.
For the full list of the focused element's properties and attributes, activate its "More Info" button.
Jumping between highlighted elements
In some steps, axe DevTools highlights elements on the page for you to review, such as the headings or tab stops found during an Intelligent Guided Test, or the issues highlighted when raising a manual issue. Instead of navigating the tree to find each one, you can jump directly between them.
When there are two or more highlighted elements, use the "Jump to Previous Highlight" and "Jump to Next Highlight" buttons in the Element Selector. While a highlighted element is focused, a counter (for example, "2 / 5") shows its position among all highlighted elements.
You can also use keyboard shortcuts while focus is anywhere in the Element Selector, including on an item in the tree:
| Shortcut | Action |
|---|---|
| Alt+Shift+N (Option+Shift+N on macOS) | Jump to the next highlighted element |
| Alt+Shift+P (Option+Shift+P on macOS) | Jump to the previous highlighted element |
Jumping wraps around, so moving past the last highlighted element returns to the first, and vice versa. If there's only one highlighted element and you've navigated away from it, either shortcut takes you back to it.
Removing a selection
To remove a selected element, do any of the following:
- In the Element Selector, focus the element and press Space or activate "Remove"
- Activate the remove (trash can) button next to the element in the list of selected elements
- In Intelligent Guided Tests, activate "Remove all selections" to clear every selection in the current step
When raising a manual issue, the first element you select is the "Selected Element" the issue is raised against, and every element after that is listed under "Related Elements".