Developer Wizard
What component has
Keyboard support
| Key | Function |
|---|---|
Tab, | Moves focus to the next (or previous) focusable element. |
Up Arrow, | If a Stepper is focused, selects the previous (or next) Stepper. |
Enter, Space | If a Stepper is selected, activates it and switches to the corresponding step. |
Esc | Closes the wizard. |
See detailed information about the keyboard support for the all form elements in the Keyboard control guide.
Roles and attributes
The following list describes roles and attributes that component already has.
| Component | Attribute | Usage |
|---|---|---|
Wizard | aria-labelledby="IDREF" | Defines an accessible name for the dialog. Automatically populated from the title in the Wizard.Sidebar. |
role="dialog", aria-modal="true" | Identifies the element as a modal dialog. Inherited from Modal. | |
Modal.Close | aria-label="Close" | Defines an accessible name for the Close button. Inherited from Modal. |
role="tablist" | Identifies the element as a set of tabs. | |
aria-orientation="vertical" | Indicates that the orientation of the tablist is vertical, helping to use the appropriate keys for navigation. | |
Wizard.Stepper | role="tab" | Identifies the element as a tab. |
aria-selected="true/false" | Indicates whether the tab is active. | |
aria-controls="IDREF" | Refers to the content area that corresponds to this tab. | |
Wizard.Content | role="tabpanel" | Identifies the element as a content area associated with a tab. |
aria-labelledby="IDREF" | Defines an accessible name for the content area by referring to the corresponding tab. | |
Wizard.StepBack | aria-label="Back to {Step}" | Defines an accessible name for the button that goes to the previous step. |
Wizard.StepNext | aria-label="Go to {Step}" | Defines an accessible name for the button that goes to the next step. |
Considerations for developers
Ensure the proper heading hierarchy in the Wizard. The Wizard starts with an h2 heading by default, so each step should start with an h3 heading, and so on. Refer to the example for details.
Resources
- W3 modal dialog example has detailed information about the modal window accessible behavior.
- A11y style guide describes accessible behavior of all form elements.
Other recommendations
See more accessibility recommendations in the common Accessibility guide.