Make WordPress Core

Opened 3 months ago

Last modified 5 weeks ago

#40970 accepted enhancement

Update and audit the screen-reader-text CSS class used in core

Reported by: afercia Owned by: joedolson
Milestone: 4.9 Priority: normal
Severity: normal Version:
Component: Administration Keywords: needs-patch
Focuses: ui, accessibility Cc:


WordPress 4.8 has officially ended support for Internet Explorer versions 8, 9, and 10. I'd propose to review the screen-reader-text CSS class to update it with some more modern properties.

At the very least, clip should be updated to a more modern syntax. clip: rect(0 0 0 0) is there to support old IE versions, I think IE6, IE7? Today, it should be clip: rect(1px, 1px, 1px, 1px).

The clip property itself is now deprecated. Its modern alternative is clip-path but at the time of writing it's not supported by IE11 (will never support it), Edge, and some mobile browsers, see: http://caniuse.com/#search=clip-path

One option could be introducing clip-path: inset(50%) and keeping clip for old browsers. This should be carefully evaluated for some edge cases where screen-reader-text gets reset for some very special uses, for example:

	.post-com-count .screen-reader-text {
		position: static;
		width: auto;
		height: auto;
		margin: 0;

Worth noting there are also some places in core where the screen-reader-text CSS class is slightly different, for example the admin bar, the embed template, and Press This.

Change History (5)

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.

2 months ago

#2 @afercia
2 months ago

  • Milestone changed from Awaiting Review to 4.9

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.

5 weeks ago

#4 @joedolson
5 weeks ago

  • Owner set to joedolson
  • Status changed from new to accepted

From discussion in the July 17th, 2017 A11y team meeting, we're going to audit this with the intent to use only one screen reader text pattern throughout WordPress, and using clip-path to future-proof the deprecation of clip.

#5 @joedolson
5 weeks ago

  • Keywords needs-patch added
Note: See TracTickets for help on using tickets.