The screen-reader-text CSS Cascading Style Sheets. class is a small bit of CSS used in WordPress to hide text visually but still make it available to assistive technologies, screen readers, and any other software reading a page.
Given poor browser support for the clip-path property, the class has supported the deprecated clip property longer than it probably needed to. WordPress 4.9 did finally add support for clip-path, which now has wide support without prefixes across browsers.
WordPress 6.8 takes two more steps to modernize the class: it removes the clip property and the prefixed -webkit-clip-path property. Worth noting this change applies to the CSS class used in the WordPress admin (and super admin) pages and across all bundled themes.
Here’s the CSS class from WordPress 4.9:
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
And here’s the new CSS class for WordPress 6.8:
.screen-reader-text {
border: 0;
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
The only changes are the removal of the clip property and -webkit-clip-path.
In most cases this small change shouldn’t require any update to plugins and themes. But be aware of one case: when the screen-reader-text CSS class is used to dynamically reveal text. In a few cases, WordPress itself reveals some visually hidden text. For example, when there’s no JavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. support or on small screens, screen-reader-text gets reset to make the visually hidden text visible again:
.no-js .some-element .screen-reader-text {
position: static;
clip-path: none;
width: auto;
height: auto;
margin: 0;
}
If you make an update to a similar CSS technique in your plugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party or theme admin pages, don’t forget to remove the clip property from the associated reset CSS.
For more details, see the related changeset and Trac ticket.
Thanks to @marybaum and @audrasjb for proofreading.
#6-8, #dev-notes, #dev-notes-6-8
