Introduction
This demonstrates the accessibility of the slides from the APG guidelines.
This demonstrates the accessibility of the slides from the APG guidelines.
Several features CSS features enable this carousel:
These establish the buttons that allow navigating forward / backward through the slides:
::scroll-button(*) { /* Common visual styles */ }
::scroll-button(inline-end) { content: url(next.svg) / "Next Slide"; }
::scroll-button(inline-start) { content: url(prev.svg) / "Previous Slide"; }
The ::scroll-marker pseudo-element is established off of the content you wish to target with the marker. This creates the dots in the carousel.
::scroll-marker {
content: "" / attr(data-marker-label);
/* Visual styles */
}
The interactivity property can be used to establish the expected pattern of making the next / previous slides not displayed per the established APG carousel guidelines:
the screen reader experience can be confusing and disorienting if slides that are not visible on screen are incorrectly hidden, e.g., displayed off-screen.
The carousel APIs are specified in the css-overflow-5 specification and shipped in Chrome 135.