Accessibility Best Practices

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.