[wp-trac] [WordPress Trac] #48533: TwentyTwenty: Skiplink, author by-line, post date intro text, and comments link reading as one word instead of several while using a screen reader

[WordPress Trac]

#48533: TwentyTwenty: Skiplink, author by-line, post date intro text, and comments
link reading as one word instead of several while using a screen reader
---------------------------+----------------------------
 Reporter:  arush          |       Owner:  williampatton
     Type:  defect (bug)   |      Status:  accepted
 Priority:  normal         |   Milestone:  5.3
Component:  Bundled Theme  |     Version:  trunk
 Severity:  normal         |  Resolution:
 Keywords:  needs-patch    |     Focuses:  accessibility
---------------------------+----------------------------

Comment (by afercia):

 The reason for this bug is simple ans it's basically the same solved in
 https://core.trac.wordpress.org/changeset/32509 for `word-wrap`.

 This CSS, specifically `word-break` as pointed out by @arush :


 {{{
 *,
 *::before,
 *::after {
         box-sizing: inherit;
         -webkit-font-smoothing: antialiased;
         word-break: break-word;
         word-wrap: break-word;
 }
 }}}

 makes the visually hidden text be laid out vertically because the
 available width is 1 pixel. See screenshot below. In this vertical layout,
 spaces between words is removed and screen readers read out multiple words
 as a single word.

 I'd also like to note that such rules set on the universal selector target
 all elements in the page. Using so broad selectors for properties that
 affect text is dangerous by its own nature and should be avoided.

 The simpler solution seems to be resetting `word-break` in the `screen-
 reader-text` class used by the theme.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/48533#comment:12>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform