Accessibility | Narrator is not announcing the Stepper headings as "selected"

[chsach2050]

While tabbing through the vertical stepper, Narrator/NVDA is not announcing the selected tab as "selected" or similar.

[siriwatknp]

I think we will have to revisit the accessibility of the whole Stepper component again. One resource that I can find is https://ishadeed.com/article/stepper-component-html-css/.

[jeremy-w]

That resource concerns itself only with visual layout and also neglects the accessibility concerns.

The best approach I’ve seen for this sort of potentially-interactive stepper is to treat it as a manually-triggered tablist. This is addresses as a common pattern by WAI-ARIA with an example calling out the relevant accessibility behaviors at https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual.

For a more direct comparison, the Angular Material stepper appears to have gotten 99% of this right - my one quibble has to do with the note in that WAI-ARIA example about ensuring you can tab to the start of the tabpanel, but for the usual use case of forms, the way they’ve done it seems pretty solid yo me.

The main challenge I foresee for MUI is that doing this accessibly requires coordinating markup between the tab and its tabpanel, but the stepper component itself only addresses the tablist part of the overall composite. But making it easy to achieve the common case of form per tab with next and maybe prev buttons at the bottom that Just Work would address that and be a huge usability improvement for everyone using MUI IMO.

[siriwatknp]

@jeremy-w Thanks for sharing, that's a great insight.

[xurxe]

In principle, the thing to do is add aria-current="step" to the current step only (see the aria-current spec). Also, there's nothing stopping an element with aria-current from being interactive (a common case is using aria-current="page" within a navigation menu or breadcrumb bar).

On the other hand, the alternate approach of treating an interactive stepper as a set of tabs is intriguing; I'll have to think about that some more! But I can tell you already that it the tabs pattern is used, then we don't use aria-current; tabs go with aria-selected.

[aniedspr]

I'm not sure about using tabs as a aria role for the stepper, only because not everybody is using it as interactive, navigable steps in a wizard. Some are using it instead as a sort of static state tracker to show what step some process is on in a way that isn't interactive, so tabs wouldn't superimpose nicely over that. I feel like the MUI docs show some examples like this.

[jeremy-w]

It does feel like overkill if you do not have the steps support clicking to switch to the step (nonlinear mode). For the simpler linear case, a good model is https://designsystem.digital.gov/components/step-indicator/ .

[jeremy-w]

The advantage of the tab style is it cleanly handles even swapping between linear and nonlinear mode dynamically without completely changing the component presentation and interaction. It also provides consistency in “how to interact with a stepper” across linear and nonlinear steppers. It could otherwise be quite confusing if a site mixes non/linear steppers that look the same but semantically present quite differently.