-
Notifications
You must be signed in to change notification settings - Fork 0
/
notes.txt
91 lines (45 loc) · 5.28 KB
/
notes.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
Voiceover, iOS 13.7
- ARIA on fieldset: no effect
- ARIA on radio button:
- on web rotor focus: "collapsed, double-tap to expand" or "expanded, double-tap to collapse" at end
- on select: "expanded, ticked"
If you put ARIA on a radio button that doesn't expand it, you'll get the collapsing announced when it happens, but you'll also get the "double-tap to expand" instruction, when that won't work.
However, with the ARIA on the radio button that does expand it, you'll get the "double-tap to collapse" instructions, which also doesn't work.
I wonder if aria-expanded keeps the expand/contract announcement, but aria-controls stops the whole "double-tap to expand/collapse" thing.
I've been doing a bit of investigation into this issue, specifically around radio buttons.
The ARIA spec currently allows `aria-expanded` and `aria-controls` attributes on elements with the role `radiogroup` (i.e. fieldsets), but not on individual radio buttons (as noted above). I think you can see the thinking behind this: [individual radio buttons are treated like `<option>` elements inside a `<select>`](https://www.w3.org/TR/wai-aria-1.1/#radiogroup); they're not individual controls themselves, they're values for their parent radio group.
As such, if the conditional reveal were to be changed to match the ARIA spec, the `aria-expanded` and `aria-controls` attributes would be on the fieldset, rather than the radio button that causes the content to be revealed when it's selected.
I've created [a test page](https://paulwaitehomeoffice.github.io/conditionally-revealing-radios-aria-experiments/examples.html), with some variations of the conditional reveal, to see how screen readers announce things:
1. the original
2. ARIA attributes just on the fieldset, not on the radio buttons
3. ARIA attributes on the fieldset, and the radio button that reveals the content
4. ARIA attributes on the fieldset, and all radio buttons
5. ARIA attributes on the fieldset, `aria-expanded` only on all radio buttons
6. ARIA attributes on the fieldset; `aria-expanded` only dynamically added to/removed from
the radio buttons to try to work around an iOS issue
7. As 6, but with `aria-expanded` added/removed in a different order
As @hannalaakso and @nickcolley documented, [testing what screen readers do with the conditional reveal is complex](https://github.com/alphagov/govuk-frontend/issues/979#issuecomment-528932826). On the desktop, most screen readers support interacting with form fields using the regular browser keyboard shortcuts, and their own "web rotor" controls, and they may announce different things when focusing and activating using each method. Then there's the field descriptions they put in their lists of elements — some screen readers include field sets as separate entries, some include them in radio button descriptions, some ignore them.
(I also don't use a screen reader except when I'm testing websites, and I haven't attended many test sessions with screen reader users, so I'm unfamiliar with their use in practice.)
## Voiceover, iOS 13.7
### ARIA on radio button only (original)
The original works pretty well. When you focus on a radio button that has hidden content, Voiceover announces
> {label}, radio button, unticked, one of two, collapsed. Double-tap to expand
When you double-tap, it announces
> Expanded, ticked.
However, after expanding, if you unfocus the radio button, and then focus it again, it announces
> {label}, radio button, ticked, one of two, expanded. Double-tap to collapse
The last part is not true - double-tapping a selected radio button doesn't un-select it, and therefore won't collapse the content.
Double-tapping the next radio button does collapse the content. However, as this radio button has no ARIA attributes, Voiceover doesn't announce anything about expanding or collapsing content when the user focuses on it, or when they actually collapse the content. It just announces
> {label}, radio button, unticked, two of two
when it's focused, and
> ticket
when it's selected.
[Test 1 in Voiceover on iOS 13.7](https://paulwaitehomeoffice.github.io/conditionally-revealing-radios-aria-experiments/voiceover-ios-13-original.mp4)
### ARIA on fieldset and all radio buttons
If `aria-expanded` is added to every radio button (test 4), Voiceover will always announce when the content is expanded or collapsed. However, it will also always tell you that you can double-tap to expand the content if it's currently collapsed, or vice versa, whenever you focus any radio button. This will not always be true.
[Test 4 in Voiceover on iOS 13.7](https://paulwaitehomeoffice.github.io/conditionally-revealing-radios-aria-experiments/voiceover-ios-13-test-4.mp4)
If you first select a radio that does not expand the content, Voiceover will not re-announce that the content is collapsed.
[Test 4 in Voiceover on iOS 13.7, select collapsed radio first](https://paulwaitehomeoffice.github.io/conditionally-revealing-radios-aria-experiments/voiceover-ios-13-test-4-a.mp4)
### ARIA on fieldset only
With ARIA attributes added just to the fieldset, and not the radio buttons (test 2), as per the ARIA spec, Voiceover announces nothing about expanding or collapsing content, at any point.
[Test 2 in Voiceover on iOS 13.7](https://paulwaitehomeoffice.github.io/conditionally-revealing-radios-aria-experiments/voiceover-ios-13-test-2.mp4)