From d3325bfe13b7f1cdda03b8c2c39d8db80d10b5e4 Mon Sep 17 00:00:00 2001 From: Amy Sorto <8575252+amysorto@users.noreply.github.com> Date: Wed, 22 Sep 2021 15:55:53 +0000 Subject: [PATCH] docs(material/stepper): expand a11y section --- src/material/stepper/stepper.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/src/material/stepper/stepper.md b/src/material/stepper/stepper.md index f249c0ea2f86..229fb7044498 100644 --- a/src/material/stepper/stepper.md +++ b/src/material/stepper/stepper.md @@ -222,3 +222,23 @@ is given `role="tab"`, and the content that can be expanded upon selection is gi step content is automatically set based on step selection change. The stepper and each step should be given a meaningful label via `aria-label` or `aria-labelledby`. + +Prefer verticl steppers when building for small screen sizes, as horizontal +steppers typically take up significantly more horizontal space thus introduce +horizontal scrolling. Applications with multiple scrolling dimensions make +content harder to consume for some users. See the [Responsive Stepper section](#responsive-stepper) +above for an example on building a stepper that adjusts its layout based on +viewport size. + +#### Forms +Steppers often contain forms and form controls. If validation errors inside of a +stepper's form prevents moving to another step, make sure that your form +controls communicate error messages to assistive technology. This helps the user +know why they can't advance to another step. You can accomplish this by using +`` with ``, or by using an ARIA live region. + +When a step contains a forms validation error, `MatStepper` will display the +error in the step's header if specified. See the [Error State section](#error-state) +for an example of a stepper with an error message. For non-linear steppers, you +should use an ARIA live region to announce error messages when users navigate +away from a step with an error message.