Re: [w3ctag/design-reviews] CSS Overflow Navigation Controls (Carousels) (Issue #1037)

flackr left a comment (w3ctag/design-reviews#1037)

> I saw this update since I was tagged earlier, so I thought it might be helpful to drop a little more context on the a11y questions raised:
> 
> Having followed, tested, and researched this for quite a while, I also agree with [@matatk](https://github.com/matatk) that this is different from any other existing CSS mechanism in how it imparts roles and creates accessibility nodes for pseudo-elements, and that it seems to be a fundamental expansion of what CSS does. This is different from existing ways CSS affects role mappings in the following ways:
> 
> * Rather than removing an existing mapping from a semantic HTML element, it adds roles to otherwise generic (or maybe even non-generic) elements.

I mentioned above in https://github.com/w3ctag/design-reviews/issues/1037#issuecomment-5357662695 how we already have several ways in which CSS applies non-generic roles to elements (and pseudo-elements), not just removes them. For example specifically ([demo](https://jsbin.com/nekofem/edit?html,css,output)):
* For pseudo-elements specifically the value of the content property determines whether the created object is treated as (i.e. has the role of) an image or not.
* The display CSS property is used to automatically assign list-item and various table roles

Please let me know if I have misunderstood something.

> Some of those roles cannot be overridden by the author (roles and other semantics on the pseudo-elements),

This is something that we could explore enabling either through cascading attribute sheets mentioned in https://github.com/w3ctag/design-reviews/issues/1037#issuecomment-3189080896 or alternative means.

> and it's unclear what should happen to scroll marker roles if the originating element (default tabpanel) is given a different role that would be at odds with the default tablist/tabpanel.

The user applied role would presumably be used, and it would be trickier to catch that more direct authoring mistakes but could be something that we add developer tooling to highlight.

> * It creates interactive, focusable, and semantic nodes in CSS that are not present in HTML, and cannot be directly queried and manipulated with JS.

Semantic pseudo-elements already exist. E.g. images in the `content` attribute are in the semantic content. Focusable pseudo-elements is new. Neither can currently be directly queried though there is work underway on a pattern for enabling this.

> * It introduces nodes with semantics created in CSS that cannot be overridden in HTML (or even in CSS), even though custom semantics for carousels (i.e. neither tabs nor links) is the majority use case in a quick survey of carousels on major sites. This isn't to say tabs/links is the wrong choice -- there is no majority use case for carousel semantics, they are very diverse.

Cascading attribute sheets mentioned in https://github.com/w3ctag/design-reviews/issues/1037#issuecomment-3189080896 is one option that could allow overriding these. We may want to extend this API in the future if other common patterns arise.

> * It introduces interactive nodes that cannot be given an accessible name at all (the column scroll markers), and no clear path has been proposed to resolve this fundamental a11y failure.

I have an example at https://flackr.github.io/web-demos/css-overflow/scroll-marker-type/paged.html that provides an accessible name on the column scroll markers.

> * It introduces interactive nodes where the only way to define an accessible name is through CSS, even though strings in CSS do not work with user-facing translation tools, and discussions suggest this cannot be resolved in the foreseeable future.

If no accessible name is set via CSS it comes from the accessible name of the originating element. The CSS accessible name can also use the attr function to use attributes from the originating element.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/w3ctag/design-reviews/issues/1037#issuecomment-5684403211
You are receiving this because you are subscribed to this thread.

Message ID: <w3ctag/design-reviews/issues/1037/5684403211@github.com>