Changes to the screen-reader-text CSS class in WordPress 4.9

The screen-reader-text CSS class is a small bit of CSS used in WordPress to visually hide text and make it still available to assistive technologies, screen readers, and any other software reading a page.

For a number of years, this CSS class has used an incorrect syntax for the clip property to deal with old Internet Explorer versions. WordPress 4.8 officially dropped support for Internet Explorer versions 8, 9, and 10. This is a good opportunity to update screen-reader-text to a modern, correct syntax and standardize it across the codebase. Furthermore, the clip property is deprecated: some browsers may still support it, but it is in the process of being dropped and it may cease to work at any time.

Worth noting this change applies only to the CSS class used in the WordPress admin pages.

Here’s how the old CSS class looks like:

.screen-reader-text {
	position: absolute;
	margin: -1px;
	padding: 0;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	border: 0;
	word-wrap: normal !important;
}

And here’s how the new CSS class looks like in 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;
}

The only changes are the clip property value new syntax and the introduction of clip-path.

In the vast majority of cases this small change shouldn’t require any update to plugins and themes. There’s only one case to be aware of and that’s when the screen-reader-text CSS class is used to dynamically reveal some text. In a very few cases, WordPress itself reveals some visually hidden text. For example, when there’s no JavaScript 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;
	-webkit-clip-path: none;
	clip-path: none;
	width: auto;
	height: auto;
	margin: 0;
}

If you’re using a similar CSS technique in your plugin or theme admin pages, don’t forget to reset the new clip-path property too.

For more details, see the related changeset and Trac ticket.

#4-9, #dev-notes