« Back to home

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
• Bookmarklet 23. Highlight aria-checked

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

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

1. Drag a bookmarklet to your browser's Bookmarks Bar.
2. Open the page you want to inspect.
3. Click the Highlight aria-expanded bookmarklet.
4. Scroll through the page to review the highlighted elements.
5. If you expand or collapse a control, run the bookmarklet again to refresh the displayed values.
6. 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:

• true
• false
• mixed

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

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

1. Drag a bookmarklet to your browser's Bookmarks Bar.
2. Open the page you want to inspect.
3. Click the Highlight aria-checked bookmarklet.
4. Scroll through the page to review the highlighted elements.
5. If you interact with a widget, run the bookmarklet again to refresh the displayed values.
6. 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.

« Back to home