Skip to content

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

@Schepp

Description

@Schepp

Spec: CSS Containment Module Level 2

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:

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

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.

/edit: Web Alamanac 2022 sees 15% of the pages analyzed using it.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions