Key / stateFunctionTab, Shift-TabMoves focus to the next (or previous) focusable element.EnterActivates the link.
ARIA enhancements
External ARIA provided by the aria property:
prev
next
ARIAUsagearia-labelDefines a string value that labels the interactive element.aria-currentExposes the current state of the link.aria-haspopupDefines that the link opens a popup (e.g. dialog).
If the text of a link does not clearly indicate what the link's target 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 "Click" 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 "Details of product XYZ."
Readable text
In general, placing textual contents above an image or video can easily lead to contrast issues. Though the
component provides 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.
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"" />.
