WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

#38764 closed defect (bug) (fixed)

Twenty Seventeen: update screen-reader-text to reset word-wrap

Reported by: afercia Owned by: davidakennedy
Milestone: 4.7 Priority: normal
Severity: normal Version: 4.7
Component: Bundled Theme Keywords: has-screenshots has-patch commit
Focuses: accessibility Cc:

Description

Twenty Seventeen makes use of the CSS property word-wrap set to break-word on a few elements, most notably #page. When inherited by elements visually hidden with the screen-reader-text class, screen readers may read out words ignoring spaces between words. This issue was already addressed in core, see #31962

https://cldup.com/4Lo3PxikRm.png

I'd recommend to use the same solution adopted by core, resetting the property to normal where needed and, to be safe, consider to use !important:

word-wrap: normal !important;

After resetting to normal:

https://cldup.com/1RanZ7kdaT.png

Additionally, I'm not sure there's the need for the prefixed -ms- version, apparently it was used as alias by IE 8:
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

IE8 introduced -ms-word-wrap as a synonym for word-wrap. Don't use the -ms- prefix.

Attachments (1)

38764.diff (1.0 KB) - added by afercia 3 years ago.

Download all attachments as: .zip

Change History (5)

@afercia
3 years ago

#1 @afercia
3 years ago

  • Focuses accessibility added
  • Keywords has-patch commit added; needs-patch removed
  • Owner set to davidakennedy
  • Status changed from new to assigned

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


3 years ago

#3 @afercia
3 years ago

Worth noting this was done also for Twenty Sixteen, see commit on GitHub. Not having history of these kind of things on SVN is a bit unfortunate.

#4 @davidakennedy
3 years ago

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

In 39207:

Twenty Seventeen: Update screen-reader-text to reset word-wrap

This resets the property to normal where needed and, to be safe, uses !important. It avoids screen readers reading out words ignoring spaces between words in some cases.

Props afercia.

Fixes #38764.

Note: See TracTickets for help on using tickets.