Accessibility Best Practices

Accessibility Compliance

Composable storefront ensures accessibility by adhering to the success criteria of the Web Content Accessibility Guidelines (WCAG) 2.1 Information published on non-SAP site 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 composable storefront project, it is also important to ensure you run end-to-end tests for accessibility.

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

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.

Procedure

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.
Uncheck the Always use the cursor keys to navigate within pages checkbox.
In the Mac System Preferences, open the Keyboard preferences, and then select the Shortcuts tab.
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.

Procedure

In Safari, select Preferences in the Safari menu, then select the Advanced tab.
In the Accessibility section, check the Press Tab to highlight each item on a webpage checkbox.
In the Mac System Preferences, open the Keyboard preferences, and then select the Shortcuts tab.
In the bottom of the Shortcuts pane, check the Use keyboard navigation to move focus between controls checkbox.