Wizard
A tool that combines a wizard stepper with navigation controls to guide users through complex forms.
Creating access for everyone, everywhere requires attention to accessibility attributes, best practices, and requirements. Find accessibility guidance below.
Note: Components in each code library are implemented differently (especially Flutter). Many of the behaviors and attributes described are already handled for you as part of our components. Product teams are responsible for ensuring their apps meet all current requirements. Some of the information below may not apply to your implementation.
Best practices
Ensure the following best practices are met when implementing this component during development.
- Ensure step controls are interactive and allow users to move to the previous or next step. Use elements like
with descriptive for current steps, completed steps, or steps that can be revisited. For unavailable steps, use non-interactive elements like to prevent confusion. - If step buttons use
, make sure the label dynamically updates to reflect the state of the current step. For example, the could be updated to “Complete step 3” or “Error step 3”. This provides screen reader users with clear and accurate information about the status of the current step. - Place the wizard stepper in a
landmark, ensuring it has a unique and descriptive . The label text shouldn’t include the word “navigation” as this will be announced automatically and be redundant for screen readers. If the stepper doesn’t allow users to navigate between steps, it doesn’t need to be in a landmark. - Add
areas for screen readers if necessary, especially for dynamic updates like error messages or success notifications. - Make sure icons use the library’s right-to-left class for right-to-left languages.
- When users move to a new step, programmatically set focus to the first interactive element (typically the input field) in the new step. This helps keyboard and screen reader users stay oriented and interact efficiently.
Keyboard controls
| Key | Behavior |
|---|---|
| Enter or Space | Prompts the action associated with the focused interactive element. |
| Tab | Moves focus to the next focusable element. |
| Shift + Tab | Moves keyboard focus backwards to the previous interactive element. |