WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

Last modified 3 years ago

#31962 closed defect (bug) (fixed)

Screen reader text needs to reset word-wrap

Reported by: afercia Owned by: afercia
Milestone: 4.3 Priority: normal
Severity: normal Version: 4.1
Component: Administration Keywords: has-patch commit
Focuses: accessibility Cc:

Description

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:

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:

https://cldup.com/HR2lZ2qV_S.png

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

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:

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.

Attachments (1)

31962.patch (344 bytes) - added by afercia 5 years ago.
screen-reader-text: reset inherited word-wrap, see widefat tables

Download all attachments as: .zip

Change History (8)

@afercia
5 years ago

screen-reader-text: reset inherited word-wrap, see widefat tables

#1 @afercia
5 years ago

  • Keywords has-patch 4.3-early added

#2 @obenland
5 years ago

  • Owner set to afercia
  • Status changed from new to assigned

#3 @obenland
5 years ago

  • Keywords 4.3-early removed
  • Milestone changed from Awaiting Review to 4.3

#4 @afercia
5 years ago

  • Keywords commit added

While can't test with Orca, tested again with NVDA and this patch is an improvement, see the "NVDA Speech Viewer" in the screenshot above. Seems it's not breaking anything, after all what it does is resetting a property that shouldn't be used by screen-reader-text in the first place. Would recommend for commit consideration.

#5 @helen
5 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 32509:

Accessibility: Ensure screen reader text is read as words and not affected by word-wrap.

props afercia.
fixes #31962.

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


3 years ago

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


3 years ago

Note: See TracTickets for help on using tickets.