CSS clip deprecated - .visually-hidden needs an update?

.visually-hidden { border: 0 !important; clip: rect(1px, 1px, 1px, 1px) !important; clip-path: inset(50%) !important; height: 1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; white-space: nowrap !important; }

.visually-hidden.focusable:active, .visually-hidden.focusable:focus { clip-path: none !important; height: auto !important; overflow: visible !important; position: static !important; width: auto !important; white-space: normal !important; }

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Comment about 1 year ago →

🇨🇦Canada mgifford Ottawa, Ontario

Seems like there is still partial support across the board https://caniuse.com/css-clip-path

From HTML5 Boilerplate
https://github.com/h5bp/main.css/blob/main/src/_helpers.css

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .visually-hidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

Comment 12 months ago →
🇨🇦Canada mgifford Ottawa, Ontario
Adding another example from the community - https://blog.logrocket.com/design-accessibility-css-visually-hidden-class/

Still no need to update as long as browser support clip[] at this point.