The MDC list supports selection of list-items. It also supports selection with checkboxes. For this it
recommends the list element to have the group role applied. List items w/ the checkbox contained
should have the role="checkbox" attribute with aria-checked applied.
Iterating through such a described list in VoiceOver seems to signify an ambiguous
screenreader experience. Landing on an item, the screenreader will say:
Strawberry, ticked, Tick box, Fruits, group
This is good at first glance as it indicates that the selection of the item could be changed. On the other
hand though it's not always clear that one can iterate through items through arrow keys.
It seems like for a role=group element those common patterns are not defined and commonly
understood. It would seem more suitable to use a role=listbox w/ items role=option and aria-selected.
The fact that a checkbox is used for indicating the list-item selection state is not relevant to
screenreader users, so it would be totally fine using a role=option with aria-selected. This
is the common practice for multi-select listbox options.
Bug report
The MDC list supports selection of list-items. It also supports selection with checkboxes. For this it recommends the list element to have the
group
role applied. List items w/ the checkbox contained should have therole="checkbox"
attribute witharia-checked
applied.Repo: https://stackblitz.com/edit/mdc-list-demo-a11y?file=index.html
Actual behavior
Iterating through such a described list in VoiceOver seems to signify an ambiguous screenreader experience. Landing on an item, the screenreader will say:
This is good at first glance as it indicates that the selection of the item could be changed. On the other hand though it's not always clear that one can iterate through items through arrow keys.
This would be more clear if it would be a proper
listbox
instead for which the common arrow-key/ HOME/END/ CTRL+A patterns are defined. See: https://www.w3.org/TR/wai-aria-practices-1.1/#listbox_kbd_interactionIt seems like for a
role=group
element those common patterns are not defined and commonly understood. It would seem more suitable to use arole=listbox
w/ itemsrole=option
andaria-selected
.The fact that a checkbox is used for indicating the list-item selection state is not relevant to screenreader users, so it would be totally fine using a
role=option
witharia-selected
. This is the common practice for multi-select listbox options.