[wp-trac] [WordPress Trac] #32028: List table pagination: text improvements for screen readers

[WordPress Trac]

#32028: List table pagination: text improvements for screen readers
-------------------------------+-----------------------------
 Reporter:  afercia            |      Owner:
     Type:  defect (bug)       |     Status:  new
 Priority:  normal             |  Milestone:  Awaiting Review
Component:  Administration     |    Version:  4.1
 Severity:  normal             |   Keywords:
  Focuses:  ui, accessibility  |
-------------------------------+-----------------------------
 Pagination links and the "select page" input field in the list tables have
 several things that can be improved for accessibility.

 [[Image(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
 [http://www.w3.org/TR/html51/dom.html#the-title-attribute 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:

 [[Image(https://cldup.com/FkYGo-ZFHM.png)]]

 [[Image(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
 }}}

--
Ticket URL: <https://core.trac.wordpress.org/ticket/32028>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform