Accessibility Best Practices
Note: Spartacus 3.x is no longer maintained. Please upgrade to the latest version.
Note: Spartacus 3.x was tested with SAP Commerce Cloud versions 1905 to 2105. Spartacus 3.x has not been verified to work with (and is not guaranteed to work with) SAP Commerce Cloud 2211 or later releases.
This is a landing page for grouping together topics about accessibility (a11y) best practices.
Starting with version 2.0, Spartacus features comply with the following success criteria of the Web Content Accessibility Guidelines (WCAG) 2.1:
- 2.1.1, Level A, Keyboard
- 2.1.2, Level A, No Keyboard Trap
- 2.4.1, Level A, Bypass Blocks
- 2.4.3, Level A, Focus Order
- 2.4.7, Level AA, Focus Visible
- 3.2.3, Level AA, Consistent Navigation
When combined all together, these criteria provide Spartacus with keyboard accessibility. To continue to comply with each of these criteria, it is recommended that you include the following features and best practices in your implementation when you are developing new features or fixing regressions:
If you are a contributor to the Spartacus project, it is also important to ensure you run end-to-end tests for accessibility. For more information, see Accessibility E2E Tests.
Common Keyboard Interactions
The following table lists many of the most common UI components, and the standard keystrokes for interacting with those components.
| Component | Keystrokes |
|---|---|
| Any focusable element | • Tab moves focus to the next focusable element • Shift + Tab moves the focus to the previous focusable element (navigates backwards) |
| Link | Enter activates the link |
| Button | Enter or Spacebar activates the button |
| Checkbox | Spacebar checks or unchecks a checkbox |
| Radio buttons group | • Tab moves the focus to the first or selected radio button of a group, and throughout groups only • ↑ ↓ or ← → navigates and selects options within a group. |
| Select menu | • Tab moves the focus to the <select> field• Spacebar expands • ↑ ↓ navigates between the menu options |
| Autocomplete | • Type to display options • ↑ ↓ navigates to an option • Enter selects an option |
| Dialog | Esc closes the dialog |
| Slider | • ↑ ↓ or ← → increases or decreases the slider value • Home moves to the slider to the first value • End moves the slider to the last value |
| Tab group | • Tab moves the focus into the group of tabs, and also moves the focus into the selected tab • ↑ ↓ or ← → navigates, selects, and activates the previous or next tab • Enter or Spacebar activates the tab (this is optional when arrows are only used for navigation) |
| Tree menu | • ↑ ↓ navigates to the previous or next menu option • ← → expands or collapses the submenu, and moves up or down one level |
| Scroll | • ↑ ↓ scrolls vertically • ← → scrolls horizontally • Spacebar or Shift + Spacebar scrolls by page |
Notes:
- A focusable element is an element that receives visible focus, either natively or through configuration.
- Spartacus follows the WAI-ARIA Authoring Practices 1.1. For more component examples, see the WAI-ARIA Authoring Practices documentation, and the “Keyboard Interactions” subsections for each component.