[csswg-drafts] Enhanced `labelledby` for Scroll Markers (#13497)

mfreed7 has just created a new issue for https://github.com/w3c/csswg-drafts:

== Enhanced `labelledby` for Scroll Markers ==
## Problem/Motivation

CSS-generated scroll markers (via the <code>[::scroll-marker pseudo element](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::scroll-marker)</code>)  currently lack an implicit or automatic way to establish an `aria-labelledby` relationship with the most relevant element within the content they point to. Due to this behavior, the only available method to provide an accessible name for each `::scroll-marker` element is to add it via the CSS `content` property:

```css
#slide1::scroll-marker {
  content: "" / "Slide 1";
}
#slide2::scroll-marker {
  content: "" / "Slide 2";
}
```

This is both tedious and error-prone, since the scroll markers and their related content must be manually kept in sync. It also roughly precludes the use of the [automatic marker generation functionality](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Overflow/Carousels#responsive_carousel_multiple_items_per_page) built-in to `::scroll-marker`. 

What would be preferable is that the `::scroll-marker` pseudo element automatically gets an ARIA  `labelledby` relationship that points from each `::scroll-marker` to the most relevant content for that marker.


## Proposed Solution



1. **Default labelledby relationship for <code>::scroll-marker</code>:** The `::scroll-marker` pseudo-element would be specified to have an automatic ARIA `labelledby` relationship, pointing to the content it marks. That is typically a child of the originating element, e.g. one slide of a carousel. On its own, this is an improvement, since it provides a default label for `::scroll-markers`. However, one issue with this solution is that an [accessible name](https://w3c.github.io/accname/#dfn-accessible-name) should be short and to the point; for some carousel-like content, this might lead to an overly-long accessible name.
2. **New Boolean Attribute:** Introduce a new boolean ARIA attribute, `aria-relevantcontent`. (This is a placeholder name, subject to bikeshedding, of course.) If one element, “source”, has a `labelledby` relationship pointing to another element, “target”, and the “target” element *[contains](https://dom.spec.whatwg.org/#concept-tree-inclusive-descendant)* another element, “shortname”, that has the `aria-relevantcontent` attribute, then the accessible name for “source” will be provided by “shortname” and not all of “target”. In other words, it will behave as if “source” actually had a `labelledby` relationship directly with “shortname”.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13497 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 13 February 2026 19:39:53 UTC