[csswg-drafts] [css-contain] add new value where content is visually hidden, but exposed to accessibility tree (#9579)

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

== [css-contain] add new value where content is visually hidden, but exposed to accessibility tree ==
Spec: [CSS Containment Module Level 2](https://drafts.csswg.org/css-contain/#content-visibility)

So far, `content-visibility` knows three possible values: `visible`, `auto` and `hidden`. While they all do solve certain problems developers face in regards to showing and hiding, while playing well with other interaction concepts, one pretty prominent "cowpath" hasn't yet been paved and I'd see this CSS property as being the right place to do so: Hiding elements from sighted users while at the same time exposing them in the accessibility tree for AT users.

To solve this use case today, developers reach out for CSS utility classes of the likes of `sr-only` or `visually-hidden`, which usually look like this:

```css
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
```

(example taken from [TailwindCSS](https://tailwindcss.com/docs/screen-readers))

It would be wonderful if `content-visibility` could be equipped with one more value, which would cater to the above need and make use of such CSS utility classes absolete.

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


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

Received on Thursday, 9 November 2023 07:54:04 UTC