Accessibility Best Practices

Note: Spartacus 4.x is no longer maintained. Please upgrade to the latest version.

Note: Spartacus 4.x was tested with SAP Commerce Cloud versions 1905 to 2205. Spartacus 4.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.

Accessibility Compliance

Spartacus ensures accessibility by adhering to the success criteria of the Web Content Accessibility Guidelines (WCAG) 2.1 in the following categories:

When you are developing new features or fixing regressions, it is recommended that you include the following features and best practices in your implementation to continue to comply with the relevant accessibility criteria:

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.

Web Browser Setup for Keyboard Navigation

On macOS, both the Safari and Firefox web browsers do not have tabbing enabled by default. The following sections describe how to enable tabbing in these browsers.

Enabling Tabbing in Firefox

The following steps describe how to enable tabbing for Firefox on macOS.

  1. In Firefox, select Preferences in the Firefox menu, or select Settings in the Open Application Menu in the top right of the browser window, and in the General settings section, scroll down to Browsing.

  2. Uncheck the Always use the cursor keys to navigate within pages checkbox.

  3. In the Mac System Preferences, open the Keyboard preferences, and then select the Shortcuts tab.

  4. In the bottom of the Shortcuts pane, check the Use keyboard navigation to move focus between controls checkbox.

Enabling Tabbing in Safari

The following steps describe how to enable tabbing for Safari on macOS.

  1. In Safari, select Preferences in the Safari menu, then select the Advanced tab.

  2. In the Accessibility section, check the Press Tab to highlight each item on a webpage checkbox.

  3. In the Mac System Preferences, open the Keyboard preferences, and then select the Shortcuts tab.

  4. In the bottom of the Shortcuts pane, check the Use keyboard navigation to move focus between controls checkbox.