Key / stateFunctionTab, Shift-TabMoves focus to the next (or previous) focusable element.Enter, SpaceActivates the button.disabledButton still focusable.
ARIA enhancements
External ARIA provided by the aria property:
prev
next
ARIAUsagearia-labelDefines a string value that labels an interactive element. It's required for buttons with hideLabel="true".aria-descriptionDefines a string value that adds a more detailed description of the interactive element.aria-expandedExposes a visual state (e.g. expanded/collapsed) of another element.aria-pressedExposes the pressed state of a toggle button.aria-haspopupDefines that the button opens a popup (e.g. dialog). It can be used in combination with aria-expanded to indicate the state of the popup.
Due to the nature of Web Components and shadowDOM, there are limitations in the usage of some ARIA
attributes if they try to set relationship between elements in different shadowDOM's or shadowDOM/lightDOM combinations.
If the text of the button does not clearly indicate what the button's function is, add a brief, descriptive label using
the aria property with the aria-label value to provide more context for e.g. screen reader users. Phrases like
"Detail" or "Open" can be unclear when read out of context by a screen reader. In such instances, provide an alternative
text that offers more detailed information, such as "Open details of product XYZ."
Readable text
In general, placing textual contents above an image or video can easily lead to contrast issues. Though we are
providing a scalable background gradient to reduce the risk of low contrasts between foreground text and background
image, there still can occur issues with color contrast ratios, especially if different aspect ratios for multiple
viewport sizes are used. So, always check readability and play around with the size and weight properties to
achieve the best results.
Video background
In case a video background is used, the component checks whether reduced motion is enabled in the operating system
settings and prevents the <video autoplay loop /> attribute from working to improve accessibility & UX. In addition,
the slotted video should have no audio or is muted by <video muted />. Also keep in mind that long videos or videos in
general might increase the page load time. The video content should support the CTA instead of distracting from it.
To support screen reader users, it's recommended to define an alternative video description
<video aria-label="Some video description"" />.
