material-components / material-components-web

Modular and customizable Material Design UI components for the web
https://material.io/develop/web
MIT License
17.14k stars 2.15k forks source link

[mdc-list] accessibility for lists with multi selection not working well in VoiceOver #6367

Open devversion opened 4 years ago

devversion commented 4 years ago

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 the role="checkbox" attribute with aria-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:

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.

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_interaction

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.

joyzhong commented 4 years ago

Thank you for filing this. We are currently investigating a partial redesign of list, and will take this into consideration as part of that redesign.

Adding to backlog.