tabatkins / css-toggle

Proposal for a CSS Toggle spec
Creative Commons Zero v1.0 Universal
28 stars 1 forks source link

[css-toggle-1] Implementation of different `toggling` patterns require different ARIA attributes #40

Open FremyCompany opened 2 years ago

FremyCompany commented 2 years ago

Rather than stating that making this proposal accessible would be intractable, which might be wrong, I would like instead to provide some resources that explain accessibility requirements for at least two patterns, so they can be contrasted.

Tab Panel:

Radiogroup:

Accordion:

We can discuss here how these things should be achieved?

FremyCompany commented 2 years ago

My current concerns include at least the following:

  1. that aria-controls and aria-activedescendant are difficult to maintain, because they depend on selectors that do not yet match.
  2. it's not always clear when an element is aria-selected when it's the element which sets the toggle (or whether the element is aria-selected or aria-expanded.
  3. supporting keyboard interactions are very important for these patterns to be accessible, but it seems difficult to do with the current proposal, or at least would still have to be manual, which the current input:checked pattern supports by default due to the nature of the input element.
bkardell commented 2 years ago

I'd also like to mention that our group in open ui chose not to ship and propose our functional element which did all of this because there was some accessibility concern that perhaps many many of examples found in the wild where we expected this would be deployed might be made worse by using the aria tabs pattern. There's some support for a differently named pattern for this, tho we've not entirely worked out the details which could let us test this https://github.com/openui/open-ui/issues/559