Make WordPress Core

Opened 10 years ago

Closed 10 years ago

#32028 closed defect (bug) (fixed)

List table pagination: text improvements for screen readers

Reported by: afercia's profile afercia Owned by: obenland's profile obenland
Milestone: 4.3 Priority: normal
Severity: normal Version: 4.1
Component: Administration Keywords: has-patch commit
Focuses: ui, accessibility Cc:

Description

Pagination links and the "select page" input field in the list tables have several things that can be improved for accessibility.

https://cldup.com/TV98eZxj3P.png

Tested by the accessibility user testing group and discussed by the accessibility team, we decided to split issues in separate tickets to keep things simple. This ticket is about the "text" part.

Currently, the pagination links use "angle quotation marks" as text and some expanded text in the title attributes. Title attributes may not be read out at all, depending on screen reader settings, navigation mode (tabbing, arrowing, "Say all"), etc. The currently recommendation in WordPress is to remove title attributes where reasonable and use accessible hidden text. See #24766. Also, in HTML 5.1 relying on the title attribute will be discouraged.

With the patch applied, screen readers will correctly read out all the available information, with small differences depending on the screen reader used. This is NVDA + Firefox when tabbing through focusable elements:

First page link
Previous page link
Current Page  edit  has auto complete  1 of 3 selected 1
Next page link
Last page link

Please refer to the testing results below to have an idea about how the pagination is read out now, without the patch applied. The worst case is when the links are read out as "left-pointing double angle quotation mark".

Optional: CSS tweaking for font-sizes to reduce font variations, increase a bit the displaying-num size and better align elements. See screenshots:

https://cldup.com/FkYGo-ZFHM.png

https://cldup.com/xzwi9QSBNk.png

Some testing results before the patch:

NVDA + Firefox when tabbing:

link  Go to the first page
link  Go to the previous page
Select Page  edit  has auto complete  Current page selected 1
link  Go to the next page
link  Go to the last page

NVDA + Firefox when when arrowing or "Say all":

link link
Select Page
edit  has auto complete 1 of 3 link link

NVDA + Firefox when reading out "by character":

double left pointing angle bracket
symbol 2039
...
symbol 203A
double right pointing angle bracket

ChromeVox reads out always the unicode character names:

left-pointing double angle quotation mark
single left-pointing angle quotation mark
"Select Page 1 Edit text"
single right-pointing angle quotation mark
right-pointing double angle quotation mark

Attachments (5)

32028.patch (4.6 KB) - added by afercia 10 years ago.
32028.2.patch (3.4 KB) - added by afercia 10 years ago.
32028.3.patch (3.7 KB) - added by rianrietveld 10 years ago.
Fix for Safari
32028.diff (3.4 KB) - added by obenland 10 years ago.
Preserves class="paging-input"
32028.2.diff (4.1 KB) - added by obenland 10 years ago.
Preserves class="paging-input", with Safari fix.

Download all attachments as: .zip

Change History (32)

@afercia
10 years ago

#1 @afercia
10 years ago

  • Keywords has-patch added

In the proposed patch:

  • use real text (the shorter, the better) for the links text, hidden with screen-reader-text
  • remove title attributes
  • hide the quotation marks from assistive technologies
  • add aria-describedby to the current page input field to let screen readers announce "nn of nn" when focusing the field, the targeted element is the page count in the bottom of the page
  • simplify a bit the markup, removing one <span> that was also triggering a ChromeVox bug

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


10 years ago

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


10 years ago

#4 follow-up: @rianrietveld
10 years ago

This patch was tested by: Kim van Iersel, @badeyes, Shaun Everiss, @gab-nino, Tina Tedesco and Anna Natorilla.
On JAWS, VoiceOver and NVDA.
Overall conclusion: this works much better with a screen reader, all links are spoken clearly and the structure is now understandable.
So +1 for this patch.

Some discussion:
The disabled links should not be focusable (note Rian: we are planning a new ticket for that)

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


10 years ago

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


10 years ago

#7 @rianrietveld
10 years ago

  • Keywords 4.3-early added

#8 in reply to: ↑ 4 @afercia
10 years ago

Replying to rianrietveld:

So +1 for this patch.

Would recommend for commit consideration :)

#9 @joedolson
10 years ago

Definitely would like to see this go in soon.

This ticket was mentioned in Slack in #core by joedolson. View the logs.


10 years ago

@afercia
10 years ago

#11 @afercia
10 years ago

Refreshed patch strips out any CSS changes. A couple of visual improvements related to usability and readability are proposed in #32253 for which I'd say this ticket is a blocker. In the proposed patch:

  • List Table pagination links: remove title attributes and use screen-reader-text instead, add aria-describedby to the current page input field to let screen readers announce "nn of nn" when focusing the input field

#12 @afercia
10 years ago

  • Keywords commit added

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


10 years ago

#14 @joedolson
10 years ago

  • Milestone changed from Awaiting Review to 4.3

#15 @rianrietveld
10 years ago

In Safari the link to the past page breaks to the line beneath the nav:
https://dl-web.dropbox.com/get/Public/safari-breaks-nav.png

I think it is because the <span aria-hidden="true"> takes up space in Safari.
If you remove all the <span aria-hidden="true"> the last link is on the same line.

If you add the CSS

.tablenav .tablenav-pages a { 
  display: inline-block;
} 

Safari keeps the two spans in the last link together.

Version 0, edited 10 years ago by rianrietveld (next)

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


10 years ago

@rianrietveld
10 years ago

Fix for Safari

#17 @rianrietveld
10 years ago

Added patch 32028.3.patch with fix for Safari (see comment 15). This is just a temporary fix as the CSS will be changed for #32253.
But it is necessary to get this patch in before we can continue to work on ticket 32253.
Tested on Mac with Safari, Chrome and Firefox.

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


10 years ago

This ticket was mentioned in Slack in #core by davidakennedy. View the logs.


10 years ago

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


10 years ago

#21 @obenland
10 years ago

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

@obenland
10 years ago

Preserves class="paging-input"

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


10 years ago

@obenland
10 years ago

Preserves class="paging-input", with Safari fix.

#23 @obenland
10 years ago

  • Keywords 4.3-early removed

Updated patch. Should be good to go after final review.

#24 @afercia
10 years ago

Tested a bit latest patch, now I remember why class="paging-input" was removed. With that additional span Chrome+ChromeVox won't announce "n of nn". Say you're in the first of three pages, JAWS and NVDA will announce something like this:

Current Page  edit  has auto complete  1 of 3

but ChromeVox won't announce 1 of 3. That's weird but we've already noticed similar ChromeVox issues with spans in the past. With 32028.3.patch ChromeVox gets it right and reads out everything. I'm not saying we should necessarily fix screen readers bugs. ChromeVox is known to have his quirks. I'm just saying that we should be aware this fix won't work in ChromeVox.
If and only if class="paging-input" is really not needed, and I don't see any reason to keep it but maybe I'm missing something, I'd say to use 32028.3.patch. Otherwise OK for the latest patch, it is an improvement for most users anyways.
This ticket is also blocking further improvements, see #32253 I'd would greatly appreciate to make a decision as soon as possible :)

#25 follow-up: @obenland
10 years ago

With 32028.3.patch we still use a span in the bottom navigation, does ChromeVox read that out correctly?

I think I'd like to preserve the class for back compat. There are currently styles associated with it and custom admin themes potentially use it too.

#26 in reply to: ↑ 25 @afercia
10 years ago

Replying to obenland:

With 32028.3.patch we still use a span in the bottom navigation, does ChromeVox read that out correctly?

Weird but looks like the problem is the span in the top, not the one in the bottom.

I think I'd like to preserve the class for back compat. There are currently styles associated with it and custom admin themes potentially use it too.

Fine for me, thanks :)

#27 @obenland
10 years ago

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

In 32693:

Text improvements for screen readers in list table paginations.

Removes title attributes where reasonable and uses accessible hidden text.
Screen readers will now correctly read out all available information.

Props afercia, rianrietveld.
Fixes #32028.

Note: See TracTickets for help on using tickets.