Set `word-break` property in screen reader only css.

[peterwilsoncc]

While using the screen-reader-only class from WordPress recently, I noticed that the word-break property set to a value other than normal can cause VoiceOver to read text strangely.

In the example I experienced the phrase "read text" was read as "R E A D space T E X T" due to an inherited word-break: break-word.

In WordPress Core, I think we should add word-break: normal !important to CSS hiding elements from all but screen reading devices.

Adds word-break: normal !important to various screen reader only CSS.

This prevents screen readers from announcing the text as it would appear visually, eg "A P P E A R space V I S U A L L Y".

Trac ticket: https://core.trac.wordpress.org/ticket/64375

[peterwilsoncc]

I've noticed some inconsistencies how these are styled across various locations, I presume because best practice has changed over the years. It would be good to make them consistent using the currently recommended method.

@joedolson Do you have a suggestion for the most accessible CSS to use?

[manhphucofficial]

I’m supportive of this fix.
Adding word-break: normal !important to screen-reader-only text is a sensible safeguard, as inherited break-word can cause the letter-by-letter announcements described above. The change looks low-risk, improves consistency, and doesn’t alter visual output.

A follow-up to standardize the various visually-hidden patterns across Core would also be helpful. Happy to help test any future refinements.

[palak678]

This change makes sense from an accessibility perspective. Adding word-break: normal !important ensures screen-reader-only text is read as complete words instead of being split unnaturally, which improves the overall screen reader experience.

[joedolson]

See prior discussion on #48533. This was an oversight, and should be added into the core class and propagated through all other usages.

[sabernhardt]

The PR will need a refresh after [61469], and Twenty Twenty-One's .map files might require updating too.

[joedolson]

I think this is good, but I'd like to see #64590 committed first.

Added two additional cases that were omitted in the PR; restored one that had been removed in a deprecated function. Could go either way on that, but I think it's better to fix the issue even if it's going to be rarely used.

[joedolson]

This will need a follow-up PR in Gutenberg; I'll open that after commit.

[joedolson]

In 61636:

A11y: Update .screen-reader-text class with word-break.

word-break: normal !important; was added to Twenty Twenty in [46701], but the change missed getting propagated to all uses of the screen-reader-text class at that time.

Add word-break reset to .screen-reader-text to ensure screen readers won't read text as individual letters in hidden text.

Props peterwilsoncc, manhphucofficial, palak678, sabernhardt, mukesh27, joedolson.
Fixes #64375.

[joedolson]

Issue opened ​https://github.com/WordPress/gutenberg/issues/75533; documentation at make.wordpress.org/accessibility updated.

[joedolson]

This should get a dev note, equivalent to ​https://make.wordpress.org/core/2025/03/20/changes-to-the-screen-reader-text-class-in-wordpress-6-8/