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

Thank you Paul; these are very helpful examples.

 

I am thinking of some minor editorial tweaks to my first point (to emphasise the second slightly more) and will post this as an APA comment very soon, as the consensus we had on the call remains.

 

Thanks again Paul, Chiara, and to everyone for input into this discussion.

 

Best regards,

 


Matthew

 

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. 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.

 

From: Paul Grenier <pgrenier@gmail.com> 
Sent: 13 March 2025 17:25
To: Matthew Atkinson <m.atkinson@samsung.com>
Cc: W3C WAI Accessible Platform Architectures <public-apa@w3.org>
Subject: Re: Proposed APA comment on CSS inert (will post this week)

 

Here's a round up of carousels:

 

 <https://protect2.fireeye.com/v1/url?k=34cac41d-5541d104-34cb4f52-74fe485cbfec-80fdf7afca1868c4&q=1&e=7acfd4eb-ffa6-46a4-9e46-c7fd2cc9f2d1&u=https%3A%2F%2Fbbc.github.io%2Fgel%2Fcomponents%2Fcarousels%2F> https://bbc.github.io/gel/components/carousels/ (probably the closest thing to the proposal)

 <https://protect2.fireeye.com/v1/url?k=5764909c-36ef8585-57651bd3-74fe485cbfec-38e1095b54ed2941&q=1&e=7acfd4eb-ffa6-46a4-9e46-c7fd2cc9f2d1&u=https%3A%2F%2Finclusive-components.design%2Fa-content-slider%2F> https://inclusive-components.design/a-content-slider/

 <https://protect2.fireeye.com/v1/url?k=ae7ec2bc-cff5d7a5-ae7f49f3-74fe485cbfec-6469f8a7de350c1b&q=1&e=7acfd4eb-ffa6-46a4-9e46-c7fd2cc9f2d1&u=https%3A%2F%2Fvan11y.net%2Fdownloads%2Fcarrousel%2Fdemo%2Findex.html> https://van11y.net/downloads/carrousel/demo/index.html

 <https://protect2.fireeye.com/v1/url?k=7a620469-1be91170-7a638f26-74fe485cbfec-2b7755e52a0effd8&q=1&e=7acfd4eb-ffa6-46a4-9e46-c7fd2cc9f2d1&u=https%3A%2F%2Faccessible360.github.io%2Faccessible-slick%2F> https://accessible360.github.io/accessible-slick/

 <https://protect2.fireeye.com/v1/url?k=27ea10a8-466105b1-27eb9be7-74fe485cbfec-109b28a0d45e5d49&q=1&e=7acfd4eb-ffa6-46a4-9e46-c7fd2cc9f2d1&u=https%3A%2F%2Fflackr.github.io%2Fcarousel%2Fexamples%2Fcarousel%2Fimage%2F> https://flackr.github.io/carousel/examples/carousel/image/ (fails to keep focus visible)

 <https://protect2.fireeye.com/v1/url?k=ba1f78dc-db946dc5-ba1ef393-74fe485cbfec-d8320cfbc655b2b0&q=1&e=7acfd4eb-ffa6-46a4-9e46-c7fd2cc9f2d1&u=https%3A%2F%2Fevery-layout.dev%2Flayouts%2Freel%2F> 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://dequeuniversity.com/library/aria/carousel

 <https://protect2.fireeye.com/v1/url?k=cb4c2ede-aac73bc7-cb4da591-74fe485cbfec-9acb1d99b897ccf4&q=1&e=7acfd4eb-ffa6-46a4-9e46-c7fd2cc9f2d1&u=https%3A%2F%2Fwet-boew.github.io%2Fv4.0-ci%2Fdemos%2Ftabs%2Ftabs-carousel-en.html> 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

 <https://protect2.fireeye.com/v1/url?k=50495651-31c24348-5048dd1e-74fe485cbfec-ba5786a8fd9f0981&q=1&e=7acfd4eb-ffa6-46a4-9e46-c7fd2cc9f2d1&u=https%3A%2F%2Fgithub.com%2FAutoSponge>  <https://twitter.com/AutoSponge>  <https://protect2.fireeye.com/v1/url?k=641e8fdf-05959ac6-641f0490-74fe485cbfec-b83cb2589acc9c64&q=1&e=7acfd4eb-ffa6-46a4-9e46-c7fd2cc9f2d1&u=http%3A%2F%2Fwww.linkedin.com%2Fin%2Fpgrenier> 

 

 

On Thu, Mar 13, 2025 at 1:20 PM Matthew Atkinson <m.atkinson@samsung.com <mailto: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 <https://protect2.fireeye.com/v1/url?k=c2635cc9-a3e849d0-c262d786-74fe485cbfec-25992f8879454832&q=1&e=7acfd4eb-ffa6-46a4-9e46-c7fd2cc9f2d1&u=https%3A%2F%2Fgithub.com%2Fw3c%2Fcsswg-drafts%2Fpull%2F11178%23discussion_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://protect2.fireeye.com/v1/url?k=4a9cfdc9-2b17e8d0-4a9d7686-74fe485cbfec-e1a40b0f2a9e4e3f&q=1&e=7acfd4eb-ffa6-46a4-9e46-c7fd2cc9f2d1&u=https%3A%2F%2Fwww.google.com%2Fmaps%2Fsearch%2F2000%2BHillswood%2BDrive%2C%2BChertsey%2C%2BSurrey%2C%2BKT16%2B0RS%2C%2BUK%3Fentry%3Dgmail%26source%3Dg> . 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.