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

Adding related issue; #2464595: Elements that use .visually-hidden and .focusable aren’t read when using VoiceOver in iOS or in Chrome also has a patch which changes the clip property for .visually-hidden.

This would be a good one to review at the upcoming Global Sprint Weekend.

Hello,

I did some testing in Ubuntu Chrome Version 56.0.2924.76 (64-bit) and Firefox 51.0.1 (64-bit) on the 'Skip to main content' anchor element.

From Can I Use http://caniuse.com/#feat=css-clip-path, I understand I shouldn't need the -webkit- prefix for the clip-path property in my version of Chrome.
However, when I use @mgifford's CSS rules from the original post, the 'Skip to main content' anchor element does not display visually when in focus. It is however still read out by ChromeVox.

If I refer to the article @mgifford linked to (http://hugogiraudel.com/2016/10/13/css-hide-and-seek/) and use its recommended CSS, we get:

.visually-hidden {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !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: auto !important;
  -webkit-clip-path: none !important;
  clip-path: none !important;
  height: auto !important;
  overflow: visible !important;
  position: static !important;
  width: auto !important;
  white-space: normal !important;
}

I think this works as intended, but second opinions would be good :)

Tested on Mac 10.11 and it worked fine in with voice over in Chrome 55.0.2883.95 and Safari 10.0.2, and firefox 50.0.1

@left Thanks for working on this during the sprint weekend.

@mgifford I tested on Windows 10 and found following result:

• On Firefox 51.0.1 I used text2voice plugin for firefox and paragraph with .visually-hidden was narrated properly
• On Chrome 55.0.2883.87 I used ChromeVox and similar result as of Firefox
• On Microsoft Edge 38.14393 I used Windows default Narrator app, and it was able to read the the paragraph which was visually hidden

Thanks

@left Thanks for reviewing the suggested changes.
@develdru - Thanks for these additional testing results.

I'm not sure if we should go ahead and commit this in a hurry, or if it's worth checking for other suggestions among wider front-end/accessibility community. My own view is that I haven't encountered any visually-hidden text in Drupal where we'd consider it broken. So to me this sounds more like a modernization plan than a urgent bug-fix.

@mgifford What do you think? Is it urgent?

Note that this patch still includes the deprecated clip but keeps it before the new clip-path. The CSS nuances are beyond me, I'm afraid.

I think it's worth considering this article too: Beware smushed off-screen accessible text. The issue there is that some screen reader speech doesn't have the right pauses. It would be good to look for any examples of this among Drupal's many hidden titles, and whether this patch is makes any difference. The patch in #8 includes the suggested white-space: no-wrap. Before reading that article, I would have put it down as a speech-synthesis quirk that is beyond our control. It's good to know that we might be able to improve it.

Maybe let's say this is a target for 8.4.x, which gives us time to play with it.

Let's see if the major browsers have indicated when they expect to remove CSS clip support.

There's a brand new issue about visuallyhidden class in the HTML5 Boilerplate repo. It's another approach to compare ours against.

macOS - VoiceOver / Chrome announcing visually hidden text out of order

changing issue tag to a more accurate name, got some others with this tag already