Safari + VoiceOver sometimes read out the screen-reader-text not respecting the source order

[afercia]

This appears to be a bug in Safari 10/11 and VoiceOver and it's one more case where CSS has an impact on screen readers behaviors. I've reproduced also in other projects and under different circumstances.

To reproduce in WordPress, just go in an Edit Post screen and using VoiceOver with Safari 10 or 11 navigate to the preview button:

Notice the text (opens in a new window) comes after the visible text in the source but VoiceOver reads out it before... Have done some debugging in different projects with similar results and came to the conclusion Safari and VoiceOver do take into account the absolute position of screen-reader-text.

What seems to happen here is that Safari and VoiceOver "see" the visually hidden screen reader text placed a few pixels above the visible text and thus they think it's in a line before the visible text.

Screen readers tend to read "by line" but CSS shouldn't affect the way they announce text so this "feature" seems very questionable to me. It's not the first case where CSS has side effects on screen readers though.

The only way I've found to fix this is moving the screen-reader-text a few pixels down so it's on the same "virtual line" of the visible text, or even a bit below it.

The main issue is that there's no way to predict how many pixels it needs to be moved down. The screen-reader-text class can be used on any element: inline text, buttons (with different heights) and so on. The best solution I've found so far is:

transform: translateY( some value here )

where {some value here} should be equivalent to 1 line height. This should be tested thoroughly with a proper value. Better ideas very welcome! See also #40970.

[afercia]

Note: A partial fix for this was introduced in [40643] for the news/events dashboard widget, but it doesn't cover all the cases.

[afercia]

See also ​https://github.com/h5bp/html5-boilerplate/issues/1985

[afercia]

Moving to future release for investigation, as per today's accessibility bug scrub.

[afercia]

Still an issue on latest macOS High Sierra, Safari 11.0.2, VoiceOver Utility 8 (562.13).

[afercia]

On the linked html5-boilerplate GitHub issue, a fix was suggested ​using height: auto. Worth trying that but I'd recommend to start just with screen-reader-text within buttons. I think for normal text there's the need for a different solution.

[afercia]

42006.diff​ adds height: auto; to the screen-reader-text CSS class, just when it's used within buttons. Tested on the preview button and fixes the issue.

[audrasjb]

Hi,

The patch works fine on my side.

This ticket is triaged in milestone 5.0.3. Adding commit keyword to the ticket.

[audrasjb]

Hi @afercia, are you able to commit this one in 5.0.3? The RC is tomorrow. Thanks :)

[afercia]

This needs to be done also for the new Block Editor, created ​https://github.com/WordPress/gutenberg/issues/13219

[afercia]

Given this should be coordinated with a similar change for Gutenberg, see ​https://github.com/WordPress/gutenberg/pull/13221, I'd propose to move it to 5.1. Also, not sure it does fit with the 5.0.3 scope.

[afercia]

In 44543:

Accessibility: Improve the way Safari and VoiceOver read out the screen reader text.

Sometimes, Safari and VoiceOver read out the text hidden with screen-reader-text
in a wrong order. While there's no known, full, solution, it is possible to make
them respect the correct order reliably at least within buttons.

Fixes #42006.