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

joedolson · joedolson · commit ed2c27586dff · 2026-02-13T17:11:15.000Z
`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. git-svn-id: https://develop.svn.wordpress.org/trunk@61636 602fd350-edb4-49c9-b593-d223f7449a82
diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
@@ -129,7 +129,9 @@
 	padding: 0;
 	position: absolute;
 	width: 1px;
-	word-wrap: normal !important; /* many screen reader and browser combinations announce broken words as they would appear visually */
+	/* Many screen reader and browser combinations announce broken words as they would appear visually. */
+	word-wrap: normal !important;
+	word-break: normal !important;
 }
 
 .button .screen-reader-text {
diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
@@ -2686,7 +2686,9 @@ body.adding-widget .add-new-widget:before,
 	padding: 0;
 	position: absolute;
 	width: 1px;
+	/* Many screen reader and browser combinations announce broken words as they would appear visually. */
 	word-wrap: normal !important;
+	word-break: normal !important;
 }
 
 #available-widgets .customize-section-title button,
diff --git a/src/wp-admin/css/install.css b/src/wp-admin/css/install.css
@@ -356,7 +356,9 @@ body.language-chooser {
 	padding: 0;
 	position: absolute;
 	width: 1px;
+	/* Many screen reader and browser combinations announce broken words as they would appear visually. */
 	word-wrap: normal !important;
+	word-break: normal !important;
 }
 
 .spinner {
diff --git a/src/wp-admin/css/login.css b/src/wp-admin/css/login.css
@@ -413,7 +413,9 @@ body.interim-login {
 	padding: 0;
 	position: absolute;
 	width: 1px;
-	word-wrap: normal !important; /* many screen reader and browser combinations announce broken words as they would appear visually */
+	/* Many screen reader and browser combinations announce broken words as they would appear visually. */
+	word-wrap: normal !important;
+	word-break: normal !important;
 }
 
 /* Hide the Edge "reveal password" native button */
diff --git a/src/wp-content/themes/twentynineteen/sass/modules/_accessibility.scss b/src/wp-content/themes/twentynineteen/sass/modules/_accessibility.scss
@@ -8,7 +8,9 @@
 	padding: 0;
 	position: absolute !important;
 	width: 1px;
-	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
+	/* Many screen reader and browser combinations announce broken words as they would appear visually. */
+	word-wrap: normal !important;
+	word-break: normal !important;
 
 	&:focus {
 		background-color: $color__background-screen;
diff --git a/src/wp-content/themes/twentynineteen/style-rtl.css b/src/wp-content/themes/twentynineteen/style-rtl.css
@@ -3627,8 +3627,9 @@ body.page .main-navigation {
   padding: 0;
   position: absolute !important;
   width: 1px;
-  word-wrap: normal !important;
   /* Many screen reader and browser combinations announce broken words as they would appear visually. */
+  word-wrap: normal !important;
+  word-break: normal !important;
 }
 
 .screen-reader-text:focus {
diff --git a/src/wp-content/themes/twentynineteen/style.css b/src/wp-content/themes/twentynineteen/style.css
@@ -3627,8 +3627,9 @@ body.page .main-navigation {
   padding: 0;
   position: absolute !important;
   width: 1px;
-  word-wrap: normal !important;
   /* Many screen reader and browser combinations announce broken words as they would appear visually. */
+  word-wrap: normal !important;
+  word-break: normal !important;
 }
 
 .screen-reader-text:focus {
diff --git a/src/wp-content/themes/twentyseventeen/style.css b/src/wp-content/themes/twentyseventeen/style.css
@@ -311,7 +311,9 @@ template {
 	overflow: hidden;
 	position: absolute !important;
 	width: 1px;
-	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
+	/* Many screen reader and browser combinations announce broken words as they would appear visually. */
+	word-wrap: normal !important;
+	word-break: normal !important;
 }
 
 .screen-reader-text:focus {
diff --git a/src/wp-content/themes/twentysixteen/style.css b/src/wp-content/themes/twentysixteen/style.css
@@ -1289,8 +1289,9 @@ a:active {
 	overflow: hidden;
 	position: absolute !important;
 	width: 1px;
-	/* many screen reader and browser combinations announce broken words as they would appear visually */
+	/* Many screen reader and browser combinations announce broken words as they would appear visually. */
 	word-wrap: normal !important;
+	word-break: normal !important;
 }
 
 /* must have higher specificity than alternative color schemes inline styles */
diff --git a/src/wp-content/themes/twentytwenty/style-rtl.css b/src/wp-content/themes/twentytwenty/style-rtl.css
@@ -185,8 +185,9 @@ path {
 	padding: 0;
 	position: absolute !important;
 	width: 1px;
+	/* Many screen reader and browser combinations announce broken words as they would appear visually. */
 	word-wrap: normal !important;
-	word-break: normal;
+	word-break: normal !important;
 }
 
 .screen-reader-text:focus {
diff --git a/src/wp-content/themes/twentytwenty/style.css b/src/wp-content/themes/twentytwenty/style.css
@@ -185,8 +185,9 @@ path {
 	padding: 0;
 	position: absolute !important;
 	width: 1px;
+	/* Many screen reader and browser combinations announce broken words as they would appear visually. */
 	word-wrap: normal !important;
-	word-break: normal;
+	word-break: normal !important;
 }
 
 .screen-reader-text:focus {
diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/07-utilities/a11y.scss b/src/wp-content/themes/twentytwentyone/assets/sass/07-utilities/a11y.scss
@@ -7,8 +7,9 @@
 	padding: 0;
 	position: absolute !important;
 	width: 1px;
+	/* Many screen reader and browser combinations announce broken words as they would appear visually. */
 	word-wrap: normal !important;
-	word-break: normal;
+	word-break: normal !important;
 }
 
 .skip-link:focus {
diff --git a/src/wp-content/themes/twentytwentyone/style-rtl.css b/src/wp-content/themes/twentytwentyone/style-rtl.css
@@ -5507,8 +5507,10 @@ h1.page-title {
 	padding: 0;
 	position: absolute !important;
 	width: 1px;
+
+	/* Many screen reader and browser combinations announce broken words as they would appear visually. */
 	word-wrap: normal !important;
-	word-break: normal;
+	word-break: normal !important;
 }
 
 .skip-link:focus {
diff --git a/src/wp-content/themes/twentytwentyone/style.css b/src/wp-content/themes/twentytwentyone/style.css
@@ -5555,8 +5555,10 @@ h1.page-title {
 	padding: 0;
 	position: absolute !important;
 	width: 1px;
+
+	/* Many screen reader and browser combinations announce broken words as they would appear visually. */
 	word-wrap: normal !important;
-	word-break: normal;
+	word-break: normal !important;
 }
 
 .skip-link:focus {
diff --git a/src/wp-content/themes/twentytwentyone/style.css.map b/src/wp-content/themes/twentytwentyone/style.css.map
diff --git a/src/wp-includes/css/admin-bar.css b/src/wp-includes/css/admin-bar.css
@@ -723,7 +723,9 @@ html:lang(he-il) .rtl #wpadminbar * {
 	padding: 0;
 	position: absolute;
 	width: 1px;
+	/* Many screen reader and browser combinations announce broken words as they would appear visually. */
 	word-wrap: normal !important;
+	word-break: normal !important;
 }
 
 #wpadminbar .screen-reader-shortcut {
@@ -815,7 +817,9 @@ html:lang(he-il) .rtl #wpadminbar * {
 		padding: 0;
 		position: absolute;
 		width: 1px;
+		/* Many screen reader and browser combinations announce broken words as they would appear visually. */
 		word-wrap: normal !important;
+		word-break: normal !important;
 	}
 
 	#wpadminbar .menupop li:hover > .ab-sub-wrapper,
diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css
@@ -2506,7 +2506,9 @@
 		width: 1px;
 		border: 0;
 		margin: -1px;
+		/* Many screen reader and browser combinations announce broken words as they would appear visually. */
 		word-wrap: normal !important;
+		word-break: normal !important;
 	}
 
 	/* Reveal the menu toggle button. */
diff --git a/src/wp-includes/css/wp-block-template-skip-link.css b/src/wp-includes/css/wp-block-template-skip-link.css
@@ -7,7 +7,9 @@
 	padding: 0;
 	position: absolute !important;
 	width: 1px;
+	/* Many screen reader and browser combinations announce broken words as they would appear visually. */
 	word-wrap: normal !important;
+	word-break: normal !important;
 }
 
 .skip-link.screen-reader-text:focus {
diff --git a/src/wp-includes/css/wp-embed-template.css b/src/wp-includes/css/wp-embed-template.css
@@ -17,7 +17,9 @@ body {
 	padding: 0;
 	position: absolute;
 	width: 1px;
+	/* Many screen reader and browser combinations announce broken words as they would appear visually. */
 	word-wrap: normal !important;
+	word-break: normal !important;
 }
 
 /* Dashicons */
diff --git a/src/wp-includes/deprecated.php b/src/wp-includes/deprecated.php
@@ -6166,7 +6166,9 @@ function the_block_template_skip_link() {
 			padding: 0;
 			position: absolute !important;
 			width: 1px;
+			/* Many screen reader and browser combinations announce broken words as they would appear visually. */
 			word-wrap: normal !important;
+			word-break: normal !important;
 		}
 
 		.skip-link.screen-reader-text:focus {

Original file line number	Diff line number	Diff line change
`@@ -2686,7 +2686,9 @@ body.adding-widget .add-new-widget:before,`
`2686`	`2686`	`padding: 0;`
`2687`	`2687`	`position: absolute;`
`2688`	`2688`	`width: 1px;`
	`2689`	`+ /* Many screen reader and browser combinations announce broken words as they would appear visually. */`
`2689`	`2690`	`word-wrap: normal !important;`
	`2691`	`+ word-break: normal !important;`
`2690`	`2692`	`}`
`2691`	`2693`
`2692`	`2694`	`#available-widgets .customize-section-title button,`
Original file line number	Diff line number	Diff line change
`@@ -356,7 +356,9 @@ body.language-chooser {`
`356`	`356`	`padding: 0;`
`357`	`357`	`position: absolute;`
`358`	`358`	`width: 1px;`
	`359`	`+ /* Many screen reader and browser combinations announce broken words as they would appear visually. */`
`359`	`360`	`word-wrap: normal !important;`
	`361`	`+ word-break: normal !important;`
`360`	`362`	`}`
`361`	`363`
`362`	`364`	`.spinner {`