WordPress.org

Make WordPress Core

Opened 4 months ago

Closed 3 weeks ago

Last modified 3 weeks ago

#40970 closed enhancement (fixed)

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

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

Description

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.

Attachments (1)

40970.diff (3.4 KB) - added by afercia 3 weeks ago.

Download all attachments as: .zip

Change History (15)

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


4 months ago

#2 @afercia
4 months ago

  • Milestone changed from Awaiting Review to 4.9

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


3 months ago

#4 @joedolson
3 months 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
3 months ago

  • Keywords needs-patch added

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


4 weeks ago

#7 @afercia
4 weeks ago

  • Owner changed from joedolson to afercia
  • Status changed from accepted to assigned

@afercia
3 weeks ago

#8 @afercia
3 weeks ago

  • Keywords has-patch added; needs-patch removed

40970.diff updates the core screen-reader-text CSS class to follow the recommended version on https://github.com/wpaccessibility/a11ythemepatterns/blob/master/read-more-links/style.css

  • uses clip-path for modern browsers
  • keeps clip for old browsers
  • resets clip-path to none where the class is used to dynamically reveal elements
  • removes an old rule that made screen-reader-text completely invisible in the help tabs #screen-meta, this rule is in core since [9545] and changed over time but there's no apparent reason to keep it

To check: search for all occurrences of .screen-reader-text in the core CSS files and check everything works fine.

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


3 weeks ago

#10 @sami.keijonen
3 weeks ago

Tested patch 40970.diff and it works as it should. I have only one question. Does Core have any links that comes visible on focus? I don't see screen-reader-text:focus so assume there is not.

#11 @afercia
3 weeks ago

@sami.keijonen not that I'm aware of. There are a couple places where the screen-reader-text class gets reset to make the element visible under different conditions (e.g. no-js or responsive view), see:
https://core.trac.wordpress.org/browser/trunk/src/wp-admin/css/list-tables.css?rev=41362#L1821
https://core.trac.wordpress.org/browser/trunk/src/wp-admin/css/nav-menus.css?rev=41362#L600

#12 @afercia
3 weeks ago

  • Keywords needs-dev-note added

#13 @afercia
3 weeks ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 41622:

Accessibility: Update and standardize the admin screen-reader-text CSS class.

Given the new WordPress browsers support policy, the screen-reader-text css
class used in the admin can be updated to use modern CSS and correct syntax. See
https://github.com/wpaccessibility/a11ythemepatterns/blob/master/read-more-links/style.css

Worth noting the clip property is deprecated and kept for IE11 and Edge.

  • uses clip-path for modern browsers
  • keeps clip for old browsers and update its value to a correct syntax
  • resets clip-path to none where the class is used to dynamically reveal elements
  • removes an old rule that made screen-reader-text completely invisible in the help tabs #screen-meta
  • standardizes the rule across CSS files

Fixes #40970.

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


3 weeks ago

Note: See TracTickets for help on using tickets.