[Select] Fails when using screen reader or keyboard navigation
@silviuaavram is already working on this.
Since Aug 12, 2026.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
While generally the accessibility functionality of the MUI Multi-select is decent, it would still fail any audit due to inconsistent screen reader behaviour and keyboard navigation. See further details below.
- The issue is present in the latest release.
- I have searched the issues of this repository and believe that this is not a duplicate.
Current Behaviour 😯
Screen Readers (SR)
Win10/Chrome/ChromeVox
When I navigate to the select that has preselected entries, these are not announced to me unless I open the menu and navigate to each of the entries. It is possible to open the menu and select/deselect ok with enter key, space doesn’t work. No instructions for the user either, and the select is announced as a ‘button’ and I’m not informed when menu is expanded or collapsed. Not an ideal experience. Would fail an audit.
Win10/Chrome/Jaws
Slightly better experience (announces as expanded, gives instructions to navigate list), but JAWS won’t announce which of the entries have been ticked/selected. You have to close the menu and listen to the chips to determine that. Would fail an audit.
Win10/Firefox/NVDA
Can navigate menu using Insert+Space, then arrow keys, however selected entries are not announced, as per above. Would fail an audit.
Mac10.14/Chrome/VoiceOver
Shares the same issues as above. Would fail an audit.
Overall
- SR doesn’t announce which of the entries have been ticked/selected.
- SR doesn’t allow user to use spacebar to select/check entries.
- SR doesn’t always announce when the listbox has been expanded or collapsed.
- SR doesn’t reliably read the selected entries when the menu is collapsed (e.g. chips)
Keyboard Navigation
It works with TAB to select, up/down arrow or Enter to open and Enter key to select entry, but doesn’t work with space to select, this would be expected behaviour.
Expected Behaviour 🤔
- SR must announce which of the entries have been ticked/selected.
- SR must always announce when the listbox has been expanded or collapsed.
- In keyboard navigation mode and while using SR we must allow user to use spacebar to select/check entries. See HTML5 example: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select
Steps to Reproduce 🕹
Try the following example with the above mentioned screen readers and using the keyboard only: https://cwvg4.csb.app/
Context 🔦
The goal is to meet the WCAG 2.0/2.1 AA standard as legal audit requirement for a learning platform used by millions of students, teachers and administrators.
Your Environment 🌎
| Tech | Version |
|---|---|
| Material-UI | v4.9.10 |
| Browser | Firefox (latest), Chrome (latest) |
| Screen Reader | Jaws, VoiceOver, NVDA, ChromeVox |
| OS | MacOS 10.14, 10.15, Windows 10 |
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.