States bookmarklets explained
These bookmarklets help you inspect dynamic ARIA state attributes on custom interactive widgets. Use them to review expanded and checked states, and to verify that state changes are correctly reflected in the markup.
This page explains the bookmarklets available on the Intopia's accessibility testing bookmarklets page.
On this page
Bookmarklet 22. Highlight aria-expanded
Highlights elements that use the aria-expanded attribute. It distinguishes between expanded and collapsed states, making it easy to inspect controls that show or hide content.
It also flags invalid aria-expanded values.
Video demonstration
Transcript
- Step 1: Start on Intopia's accessibility testing bookmarklets page
- Step 2: Find the "Highlight aria-expanded" bookmarklet
- Step 3: Drag the bookmarklet to your browser's Bookmarks Bar
- Step 4: Use the test page to review the bookmarklet
- Step 5: Activate the bookmarklet
- Step 6: Scroll through the page to review the highlighted elements
- After expanding or collapsing a control, run the bookmarklet again to refresh the displayed values
- Press the "Escape" key to remove the overlay
Use this bookmarklet when you want to:
- identify elements that use
aria-expanded
- inspect the current expanded or collapsed state of interactive controls
- check that
aria-expanded has been applied correctly
- identify invalid
aria-expanded values
How to use it
- Drag a bookmarklet to your browser's Bookmarks Bar.
- Open the page you want to inspect.
- Click the Highlight
aria-expanded bookmarklet.
- Scroll through the page to review the highlighted elements.
- If you expand or collapse a control, run the bookmarklet again to refresh the displayed values.
- Press
Esc to remove the overlay.
When reviewing the page, check for:
- Elements with
aria-expanded="true": indicating that the associated content is currently expanded.
- Elements with
aria-expanded="false": indicating that the associated content is currently collapsed.
- Controls that update their
aria-expanded value: when activated.
- Invalid
aria-expanded values: which are not recognised by the ARIA specification.
Bookmarklet 23. Highlight aria-checked
Highlights elements that use the aria-checked attribute. It distinguishes between the supported checked states:
It also flags invalid aria-checked values. This makes it easy to inspect the current state of checkboxes, switches and other checkable widgets.
Video demonstration
Transcript
- Step 1: Start on Intopia's accessibility testing bookmarklets page
- Step 2: Find the "Highlight aria-checked" bookmarklet
- Step 3: Drag the bookmarklet to your browser's Bookmarks Bar
- Step 4: Use the test page to review the bookmarklet
- Step 5: Activate the bookmarklet
- Step 6: Scroll through the page to review the highlighted elements
- After interacting with a widget, run the bookmarklet again to refresh the displayed values
- Press the "Escape" key to remove the overlay
Use this bookmarklet when you want to:
- identify elements that use
aria-checked
- inspect the current checked state of interactive widgets
- distinguish between checked, unchecked and mixed states
- identify invalid
aria-checked values
How to use it
- Drag a bookmarklet to your browser's Bookmarks Bar.
- Open the page you want to inspect.
- Click the Highlight
aria-checked bookmarklet.
- Scroll through the page to review the highlighted elements.
- If you interact with a widget, run the bookmarklet again to refresh the displayed values.
- Press
Esc to remove the overlay.
When reviewing the page, check for:
- Elements with
aria-checked="true": indicating they are currently checked.
- Elements with
aria-checked="false": indicating they are currently unchecked.
- Elements with
aria-checked="mixed": indicating a partially selected or indeterminate state.
- Invalid
aria-checked values: which are not recognised by the ARIA specification.
- Widgets that update their
aria-checked value: when their state changes.