Stepper lacks accessibility

[jacklaurencegaray]

Summary

When navigating the Stepper component with voice assistant and keyboard-only navigation, it doesn't read out which step you're currently in when you go to the next step. It also doesn't hint the user how many steps there are in total.

Examples

No response

Motivation

No response

Search keywords: Stepper lacks accessibility

[siriwatknp]

Thanks for reporting the issues. This is one of the thing to improve for sure, ref https://ishadeed.com/article/stepper-component-html-css/.

[jacklaurencegaray]

Thanks for reporting the issues. This is one of the thing to improve for sure, ref https://ishadeed.com/article/stepper-component-html-css/.

Seems like this example website is also inaccessible, it achieves the Stepper as a UI but voice assistant + keyboard navigation is still not there. The current Stepper in MUI in production is even better than this one imo. Here are a few specs I feel could make the Stepper more accessible for voice-overs:

when focusing on the whole stepper: tell the user they are in a stepper, tell them how many steps there are
when focusing on a step: tell the user which step they're in and in what order (e.g you are in 2nd step)
when finishing the steps: tell them they've finished all steps

[aarongarciah]

Thanks for reporting, @jacklaurencegaray. We'll most probably migrate components to Base UI in Material UI v7. Until then, we'll accept community contributions for improvements in the Stepper component (as long as they don't introduce breaking changes).