Developer What component has
Keyboard support
| Key | Function |
|---|---|
Tab | Moves focus to the next focusable element. |
Shift + Tab | Moves focus to the previous focusable element. |
Esc | Closes the side panel. |
See detailed information about the keyboard support for the clickable elements in the Keyboard control guide.
Default attributes
| Component | Attribute | Usage |
|---|---|---|
SidePanel | role="dialog" | Identifies the element as a dialog, indicating to assistive technology that its content is grouped and separated from the rest of the page content. |
SidePanel | aria-modal="true" | Tells assistive technologies that the content underneath the current dialog is not available for interaction. |
SidePanel.Close | aria-label="Close" | Sets the default accessible name for the Close button. |
Considerations for developers and designers
- It's required to set either the
aria-labelor thearia-labelledbyattribute for theSidePanelcomponent. If yourSidePanelhas a visible title, it's best to reference it in thearia-labelledbyattribute. - Make sure to use correct heading tags and hierarchy for titles in
SidePanel.
Resources
W3 modal dialog example has detailed information about the modal dialogs accessible behavior.
Other recommendations
See more accessibility recommendations in the common Accessibility guide.