Listbox Example with Grouped Options: Apply aria-hidden to option group label #1528
Conversation
This ensures that the label of a group in a listbox is not counted / identified by AT as also being a member of the group. Putting role="presentation" on the li just means the li will be ignored by AT, but not its children. The text node instead ends up as a member of the group.
mcking65
changed the title
There was a problem hiding this comment.
I think the root problem is that screen readers, such as VO in Chrome, render the label text in a way that does not distinguish it from the selectable options. But, this raises the larger discussion surrounding screen reader rendering of labeling content.
I will add this to the October 13 agenda. I'm not sure what the next step is. Currently, this PR is not consistent with APG labeling guidance.
| @@ -46,21 +46,21 @@ <h2 id="ex_label">Example</h2> | |||
| <span id="ss_elem" class="listbox-label">Choose your animal sidekick</span> | |||
| <div id="ss_elem_list" tabindex="0" role="listbox" aria-labelledby="ss_elem"> | |||
| <ul role="group" aria-labelledby="cat1"> | |||
| <li role="presentation" id="cat1">Land</li> | |||
| <li aria-hidden="true" id="cat1">Land</li> | |||
There was a problem hiding this comment.
Using aria-hidden to manage screen reader verbosity related to elements referenced by aria-labelledby has been contraversial. The task force has not supported doing so. It is a technique that can have severe negative consequences. In this particular case, it might be innocuous, but is addressing a symptom of a larger problem rather than the root cause, doing so with a risky approach.
|
Added to draft of October 13, 2020 Agenda · w3c/aria-practices Wiki. I encourage async discussion in the meantime. Perhaps we can determine best next step without the meeting time. I suspect this is an issue that might be more appropriate for ARIA WG and ARIA-AT CG. |
|
Closing per group discussion on October 13. The approach in this PR conflicts with APG labeling guidance, which recommends against hiding visible labeling text. Another approach to resolving the set numbering would be to explicitly declare setsize and posinset. The group also notes that some screen readers, including macOS VoiceOver, do not distinguish between a selectable option and static labeling text. This is something that should be addressed by aria-at tests. @WilcoFiers |
This ensures that the label of a group in a listbox is not counted / identified by AT as also being a member of the group. Putting role="presentation" on the li just means the li will be ignored by AT, but not its children. The text node instead ends up as a member of the group.
Preview link
View proposed changes using RawGitHack