Thoughts on updating the sr-only class?

[Arash-11]

Hello! I was wondering if we need to consider updating the sr-only utility class, which looks like this at the moment:

position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;

According to the discussion here: h5bp/main.css#12, it seems negative margins can cause some issues with VoiceOver.

It also seems clip is deprecated now: https://drafts.fxtf.org/css-masking-1/#clip-property? Given that legacy browsers are no longer supported as of v2.0, maybe we can remove it and use clip-path instead? Or keep clip and also add clip-path?

I'm genuinely curious and would love to hear some thoughts on this!

[adamwathan]

Hey! Our implementation is based on what Bootstrap does:

https://github.com/twbs/bootstrap/blob/1df098361cac04217d6a464c80e890c4335ecb5c/scss/mixins/_visually-hidden.scss#L8-L18

Historically Bootstrap has always been a much bigger project with many more users, so because of the complexity of this problem we've always just leaned on their solution, trusting that it's being battle tested by many more people and that any issues will be discovered.

Do you have an updated implementation you want to propose along with how it compares in testing?

[Arash-11]

Thanks for the info! I did some testing on a macOS Big Sur (v11.6) in both Chrome and Safari and fortunately, the negative margin didn't cause any issues with VoiceOver. It also appears Bootstrap was running into overflow issues initially, which is why the negative margin was introduced, so I guess we can leave that as it is.

For the use of clip, my idea is to keep clip but add clip-path too:

  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
+ -webkit-clip-path: inset(50%);
+ clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;

MDN also recommends using clip-path for newer websites (https://developer.mozilla.org/en-US/docs/Web/CSS/clip#browser_compatibility), but even if we leave everything untouched and not introduce clip-path, the content should stay hidden as usual and shouldn't cause any issues - though adding clip-path might be a good small safety net for the future!

[fschroiff]

Why not go with what WordPress does, they have a gigantic install base?

See: https://make.wordpress.org/accessibility/handbook/markup/the-css-class-screen-reader-text/

The explanation of the properties is interesting:

• Set width and height to 1 pixel, because some screen readers don’t announce an element with a size of 0 pixels.
• margin: -1px; to hide it completely from sight
• word-wrap: normal; to avoid screen readers reading the text letter for letter, as the text is placed in a 1 pixel wide space. Many screen reader and browser combinations announce broken words as they would appear visually.
• clip is deprecated, but is added to support older browsers that don’t support clip-path yet.

/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

[fschroiff]

I'm guessing that white-space: nowrap; serves the same purpose. WP probably chose word-wrap because themes overwrote that css property in their CSS. See WordPress/twentysixteen#235