mui / mui/material-ui

[Select] Fails when using screen reader or keyboard navigation

Open
#20,583 15 comments 12 reactions 1 assignee View on GitHub

@silviuaavram is already working on this.

Since Aug 12, 2026.

accessibility scope: select
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.