Make WordPress Core

Opened 9 months ago

Last modified 6 months ago

#42006 new defect (bug)

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

Reported by: afercia Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-screenshots
Focuses: accessibility Cc:


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

Change History (7)

#1 @afercia
9 months ago

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

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.

9 months ago

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.

9 months ago

#5 @afercia
9 months ago

  • Milestone changed from Awaiting Review to Future Release

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

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.

6 months ago

#7 @afercia
6 months ago

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


Note: See TracTickets for help on using tickets.