Usage
Disclosure controls reveal and hide information and functionality related to specific controls or views.
Disclosure expander
How to test a disclosure expander
Given that I am on a screen with a disclosure expander
1 Keyboard
-
WHEN I use the arrow keys or ctrl + tab to move focus to the control I SEE focus is visually indicated (strongly if high contrast enabled)
-
Then when I use the spacebar to activate the control I SEE the content expands/collapses
2
VoiceOver
screenreader
-
WHEN I use a screenreader AND I swipe to focus on a disclosure control
- I HEAR its purpose is clear and matches visible label
- I HEAR it has no role
- I HEAR any visible label is read with the control in a single swipe
- I HEAR it expresses its state (expanded/collapsed)
-
Then when I doubletap with the control in focus I HEAR the content expands/collapses
3 Device settings
-
When I use Text resize I SEE text can resize up to 200% without losing information
1 Keyboard actions
| When I use | I see/hear |
|---|---|
| Arrow keys or ctrl + tab | Focus visibly moves to the control |
| Spacebar | Element toggles between states |
2 Mobile screenreader gestures
| When I use | I hear |
|---|---|
| Swipe | Focus moves to the disclosure control, expresses its name and state |
| Doubletap | Control toggles between states |
3 Screenreader output
| Reads | I hear |
|---|---|
| Name | Its purpose is clear and matches visible label |
| Role | It has no role |
| Group | Any visible label is read with the control in a single swipe |
| State | It expresses its state (expanded/collapsed) |
4 Device settings
| When I use | I see |
|---|---|
| Text resize | Text can resize up to 200% without losing information |