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.

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 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

  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 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

  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.