Re: Proposed APA comment on CSS inert (will post this week)

Here's a round up of carousels:

https://bbc.github.io/gel/components/carousels/ (probably the closest thing
to the proposal)

https://inclusive-components.design/a-content-slider/

https://van11y.net/downloads/carrousel/demo/index.html

https://accessible360.github.io/accessible-slick/

https://flackr.github.io/carousel/examples/carousel/image/ (fails to keep
focus visible)

https://every-layout.dev/layouts/reel/ (behind a paywall but essentially
just a horizontal scroll container, no buttons)

https://dequeuniversity.com/library/aria/carousel

https://wet-boew.github.io/v4.0-ci/demos/tabs/tabs-carousel-en.html


There are many more but I didn't include ones that have an abundance of
controls all in tab order. It's totally not necessary. I actually prefer
Deque's "tab panel" approach since it's a pattern that's well understood
and supported. Ebay also doesn't waste effort with scrollable containers.
But where they exist, obviously BBC can add inert when they want/need it
(for their reasons which I can understand and it would have been helpful if
that were part of the original proposal or clearer if I missed it). But
most of these implementations don't need this automagic feature.


*--*
*Paul Grenier*
*[image: github] <https://github.com/AutoSponge>**[image: twitter]
<https://twitter.com/AutoSponge>**[image: linkedin]
<http://www.linkedin.com/in/pgrenier>*


On Thu, Mar 13, 2025 at 1:20 PM Matthew Atkinson <m.atkinson@samsung.com>
wrote:

> Dear colleagues,
>
> Please find below my draft of a comment from us about CSS inert. This I
> hope
> reflects the discussion. I intend to post it this week. A couple of notes:
>
> 0. Please check it out and let us know what you think, via this thread.
> 1. We need examples of non-APG carousels.
> 2. I have not included Chiara's (very interesting) DevTools suggestion,
> because I think we are at the stage of having concerns about this feature
> being added at all. However, later in the discussion (and to perhaps
> complement HTML's inert attribute, which also doesn't affect styling),
> would
> be a good time to convey Chiara's suggestion.
>
> Propose comment coming up at the end of this message, below. Thanks again
> for all of your input.
>
> best regards,
>
>
> Matthew
>
> The Accessible Platform Architectures (APA) WG has reviewed this proposal
> too, and has some concerns and questions.
>
> We're very supportive of the trend to move widgets/features into CSS and
> HTML, and away from needing JS to work. There have been lots of
> accessibility wins because of this. We appreciate this carousel (and
> foundational) work has similar goals. Though carousels present several
> significant usability and accessibility challenges, they are widely used,
> so
> the goal of making them more consistent, accessible, and efficient is
> laudable.
>
> * We're concerned that modifying the interactivity of elements, without
> modifying their visual presentation, will lead to developers accidentally
> rendering sub-trees of the DOM inert. Whilst this sort of mistake may seem
> low-risk, speaking as an accessibility consultant, we see a lot of mistakes
> along these lines, where the visual and non-visual go out-of-synch. It's a
> significant risk, and significant consequences.
>
> * In the same vein, we echo the concerns about 'un-inerting' - that it
> would
> not be obvious to developers who've purposely 'inerted' a sub-tree that
> part
> of that sub-tree has been un-inerted. @alice's [suggestion of limiting
> 'un-inerting' to the top
> layer](
> https://github.com/w3c/csswg-drafts/pull/11178#discussion_r1845716939
> ), could address this.
>
> * Having the un-inerting behaviour be inconsistent with the HTML inert
> attribute seems like a significant DX issue.
>
> * We are also concerned and wondering about the use cases where it makes
> sense to use CSS inert rather than the HTML attribute? What other
> scenarios,
> besides carousels, do you envisage for CSS inert?
>
> * Whilst the APG pattern [1] demonstrates one way to make a carousel, we
> find several different variations in the wild [?,?,?] that work
> differently.
> Some allow the user to move focus via the keyboard to 'out-of-view'
> elements
> - this avoids the need for the user to find navigation buttons, or learn
> keyboard shortcuts, such as the arrow keys. Whilst not suitable everywhere,
> these patterns don't seem to be encouraged by the existence of the `inert`
> property.
>
> [1] https://www.w3.org/WAI/ARIA/apg/patterns/carousel/
>
> Matthew Atkinson
> Head of Web Standards
> Samsung R&D Institute UK
> Samsung Electronics
> +44 7733 238 020
>
> Samsung R&D Institute (SRUK), Communications House, South Street,
> Staines-upon-Thames, Surrey, TW18 4QE. A division of Samsung Electronics
> (UK) Limited, a limited company registered in England and Wales with
> registered number 03086621 and whose registered address is Samsung House,
> 2000 Hillswood Drive, Chertsey, Surrey, KT16 0RS, UK
> <https://www.google.com/maps/search/2000+Hillswood+Drive,+Chertsey,+Surrey,+KT16+0RS,+UK?entry=gmail&source=g>.
> This email (including
> any attachments) is private and confidential, and may be privileged. It is
> for the exclusive use of the intended recipient(s). If you have received
> this email in error, please inform the sender immediately and then delete
> this email. Unless you have been given specific permission to do so, please
> do not distribute or copy this email or its contents. Unless the text of
> this email specifically states that it is a contractual offer or
> acceptance,
> the sender does not intend to create a legal relationship and this email
> shall not constitute an offer or acceptance which could give rise to a
> contract. Any views expressed in this communication are those of the
> individual sender, except where the sender specifically states them to be
> the views of Samsung.
>
>
>