Note: This feature is introduced with version 2.0 of the Spartacus libraries.
You can make your storefront website keyboard accessible by following correct HTML semantics and general “best practices” in your code. Good keyboard accessibility means that a user can navigate your website with a keyboard, from top to bottom (and back), from the first interactable element to the last. You can achieve this by implementing consistent navigation, a correct tabbing order, a visual focus indicator that is easily seen, and by avoiding focus traps.
For more information on how HTML semantics can affect accessibility, see Semantics in HTML.
HTML Attributes and Events
To successfully implement keyboard accessibility, you need to use HTML attributes with the correct HTML elements. Also, when implementing an event, such as a click or a keydown, if you try to force a “wrong” element to act like an interactable element, it can lead to problems with your site’s keyboard accessibility.
The following are examples of HTML attributes with correct HTML elements:
<input disabled />,
The following are examples of HTML attributes and elements that should be avoided:
<li role="checkbox" (keyup)="bar($event)"></li>
Proper focus management is essential to providing an uninterrupted and consistent keyboard flow. For more information, see Keyboard Focus.
There is not a lot in CSS that can break accessibility. However, you should be careful about the following CSS properties:
- order: The
orderproperty changes the visual order of elements, even though the DOM order stays the same. The DOM order is used in keyboarding, so if you change the order using the
orderproperty, the tabbing order that is seen by the user will not correct.
- display/opacity: If an element has a
display: noneproperty, it is excluded from tabbing. However, elements with an
opacity: 0property can still be accessed with the keyboard. There are other properties that do not exclude elements from being accessible. For more information, see Writing CSS with Accessibility in Mind.
- outline: If you change the
outlineproperty, it may break accessibility in Spartacus, because the default visual focus indicator in Spartacus depends on the
outlineproperty. Accordingly, it is important to avoid setting the
outlineproperty to a value such as