WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#32028 closed defect (bug) (fixed)

List table pagination: text improvements for screen readers

Reported by: afercia Owned by: 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 5 years ago.
32028.2.patch (3.4 KB) - added by afercia 5 years ago.
32028.3.patch (3.7 KB) - added by rianrietveld 5 years ago.
Fix for Safari
32028.diff (3.4 KB) - added by obenland 5 years ago.
Preserves class="paging-input"
32028.2.diff (4.1 KB) - added by obenland 5 years ago.
Preserves class="paging-input", with Safari fix.

Download all attachments as: .zip

Change History (32)

@afercia
5 years ago

#1 @afercia
5 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.


5 years ago

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


5 years ago

#4 follow-up: @rianrietveld
5 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.


5 years ago

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


5 years ago

#7 @rianrietveld
5 years ago

  • Keywords 4.3-early added

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

Replying to rianrietveld:

So +1 for this patch.

Would recommend for commit consideration :)

#9 @joedolson
5 years ago

Definitely would like to see this go in soon.

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


5 years ago

@afercia
5 years ago

#11 @afercia
5 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
5 years ago

  • Keywords commit added

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


5 years ago

#14 @joedolson
5 years ago

  • Milestone changed from Awaiting Review to 4.3

#15 @rianrietveld
5 years ago

In Safari the link to the past page breaks to the line beneath the nav:

https://cldup.com/SBbtbMwhz1.png
(edited to change the image, had a broken URL)

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.

Last edited 5 years ago by afercia (previous) (diff)

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


5 years ago

@rianrietveld
5 years ago

Fix for Safari

#17 @rianrietveld
5 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.


5 years ago

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


5 years ago

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


5 years ago

#21 @obenland
5 years ago

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

@obenland
5 years ago

Preserves class="paging-input"

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


5 years ago

@obenland
5 years ago

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

#23 @obenland
5 years ago

  • Keywords 4.3-early removed

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

#24 @afercia
5 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
5 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
5 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
5 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.