[wp-trac] [WordPress Trac] #31962: Screen reader text needs to reset word-wrap

[WordPress Trac]

#31962: Screen reader text needs to reset word-wrap
----------------------------+-----------------------------
 Reporter:  afercia         |      Owner:
     Type:  defect (bug)    |     Status:  new
 Priority:  normal          |  Milestone:  Awaiting Review
Component:  Administration  |    Version:  4.1
 Severity:  normal          |   Keywords:
  Focuses:  accessibility   |
----------------------------+-----------------------------
 Turns out some CSS properties, especially the ones related to text
 rendering, may affect the way screen readers announce content. Reported by
 Sebastien Massy from the Accessibility testers group:

 "In Firefox/Orca/Linux all text belonging to this class ends up being
 stretched out to one letter per line of the virtual buffer, presumably in
 an attempt to represent the text as it would appear if formatted according
 to the class. The end result is that using down or up arrow to scroll
 rapidly through a list of posts (or any other list employing this class)
 is at best tedious and at worst impossible. Chrome/ChromeVox, which tends
 to promote structural navigation over layout reproduction does not exhibit
 this problem."

 I can't test with Orca, but I've noticed similar issues with Firefox +
 NVDA. The `screen-reader-text` rule may inherit properties from other CSS
 rules, for example in the list tables, see screenshot:

 [[Image(https://cldup.com/ERIYbnOCNg.png)]]

 The `word-wrap: break-word;` CSS declaration forces NVDA to ignore spaces
 between words, notice how text is read out in the NVDA Speech Viewer in
 the screenshot below:

 [[Image(https://cldup.com/HR2lZ2qV_S.png)]]

 When resetting `word-wrap`, NVDA honors the space between words, see
 screenshot:

 [[Image(https://cldup.com/MpkwvXKeV3.png)]]

 I wouldn't be surprised if this was also the reason why Orca reads out
 content one letter per line, because that's what "visually" happens when
 applying `word-wrap: break-word;` on an element with a size of 1px x 1px:

 [[Image(https://cldup.com/ipW-o5qMma.png)]]

 Linux + Firefox + Orca testers welcome.

 The proposed patch resets the `word-wrap` property. Uses `!important` to
 keep it simple and because `screen-reader-text` is a utility rule not
 meant to be overridden.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/31962>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform