Summary: This is a combined Intent to ship for the following features:
::scroll-marker and ::scroll-marker-group for scrolling containers:
Pseudo elements that allow to create a set of focusable markers for all of the associated items within the
scrolling container.
::scroll-button(:
Focusable pseudo-element button that allows scrolling the scrolling container in the associated direction.
::column:
Supports associating ::scroll-marker elements with column fragments and scroll snap aligning to
columns.
Why Carousels are often not accessible?: However, making carousels accessible is often challenging. Managing focus, getting screen reader announcements right, and handling off-screen interactive elements is complicated, therefore the carousels on many sites are not accessible.
Intent: https://groups.google.com/a/chromium.org/g/blink-dev/c/7EQ8-VzPZh0/m/NMyrGCjuAAAJ
Spec: https://drafts.csswg.org/css-overflow-5/#scroll-navigation
Explainer: https://flackr.github.io/carousel/
Other Resources:
=== This is a demo of CSS ::scroll-button() and ::scroll-marker() ===
↓scroll-target-group を用いると、任意の要素をスクロールマーカーグループとして利用することが可能となり、柔軟なデザインやコンテンツのスクロールマーカーグループを実現できる↓
https://drafts.csswg.org/css-overflow-5/#scroll-target-group❌ Your browser doesn't support this feature.
✅ Your browser supports this feature!
This is a demo for https://drafts.csswg.org/css-overflow-5/#scroll-navigation
Try it in Chrome 135 or over.