« Back to home

Testing states

Review all focusable elements to determine their states.

Example 1: checked/unchecked (native checkbox)

This is a real HTML checkbox. The browser handles its checked state automatically, no ARIA is needed.

Action: Inspect the "Bats" checkbox. What is its state in the "Computed Properties" panel?

Answer: Checked: true

Example 2: checked/unchecked (custom checkbox using aria-checked)

Unlike Example 1, this is not a real HTML checkbox, it's a plain element styled to look like one. Because it isn't a native checkbox, the browser has no built-in way to expose whether it's checked. The aria-checked attribute is added by hand instead, and JavaScript is responsible for updating it whenever the state changes.

Action 1: This example starts unchecked. What is its state in the "Computed Properties" panel?

Answer: Checked: false

Action 2: Activate it with a click, or with the keyboard using Space. What is its state in the "Computed Properties" panel now?

Answer: Checked: true

Example 3: expanded/collapsed

Activating this button also changes its accessible name, worth checking alongside the state.

Action 1: This example starts collapsed. What is its state in the "Computed Properties" panel?

Answer: Expanded: false

Action 2: Activate the button with a click, or with the keyboard using Enter or Space. What is its state in the "Computed Properties" panel now?

Answer: Expanded: true

Example 4: pressed/not pressed

Action 1: This example starts not pressed. What is its state in the "Computed Properties" panel?

Answer: Pressed: false

Action 2: Activate it with a click, or with the keyboard using Enter or Space. What is its state in the "Computed Properties" panel now?

Answer: Pressed: true

Example 5: selected/not selected

Action 1: The "Apple" option starts not selected. What is its state in the "Computed Properties" panel?

Answer: Selected: false

Action 2: Activate it with a click, or arrow up to the option. What is its state in the "Computed Properties" panel now?

Answer: Selected: true

Example 6: current

This example is static.

Action: Inspect the "Home" link. What is its state in the "Computed Properties" panel?

Answer: Current: page

« Back to home