WordPress.org

Make WordPress Core

Opened 7 months ago

Closed 3 months ago

Last modified 3 months ago

#40833 closed enhancement (fixed)

Allow addition of aria-current="page" to current page element in paginate_links()

Reported by: GrahamArmfield Owned by: afercia
Milestone: 4.9 Priority: normal
Severity: normal Version:
Component: Themes Keywords: has-patch has-screenshots aria-current
Focuses: accessibility, administration Cc:

Description

Ticket #40359 aims to allow attributes to be added to links in navigation menus - including aria-current="page".

This ticket concerns the output created by paginate_links(). It would be useful to add the aria-current="page" attribute to the element representing the current page in the pagination list.

The aria-current attribute is a new ARIA attribute being introduced in ARIA 1.1 and its aim is to help assistive technology users (often screen readers) orientate themselves within a list of items. There are many possible values for this attribute, but the most appropriate here would be 'page'.

Further information on aria-current can be found at: https://www.w3.org/TR/wai-aria-1.1/#aria-current

Examples

Example output from current paginate_links:

<ul class='page-numbers'>
   <li><span class='page-numbers current'>1</span></li>
   <li><a class='page-numbers' href='http://blah.com/blog/page/2/'>2</a></li>
   <li><a class='page-numbers' href='http://blah.com/blog/page/3/'>3</a></li>
   <li><a class="next page-numbers" href="http://blah.com/blog/page/2/">Older &raquo;</a></li>
</ul>

Example enhanced with aria-current attribute:

<ul class='page-numbers'>
   <li><span class='page-numbers current' aria-current="page">1</span></li>
   <li><a class='page-numbers' href='http://blah.com/blog/page/2/'>2</a></li>
   <li><a class='page-numbers' href='http://blah.com/blog/page/3/'>3</a></li>
   <li><a class="next page-numbers" href="http://blah.com/blog/page/2/">Older &raquo;</a></li>
</ul>

Attachments (3)

40833.diff (834 bytes) - added by palmiak 7 months ago.
40833.2.diff (5.1 KB) - added by afercia 3 months ago.
40833.3.diff (5.1 KB) - added by afercia 3 months ago.

Download all attachments as: .zip

Change History (19)

#1 @afercia
7 months ago

+1

Related: #30421

aria-current support as of January 2017
https://ljwatson.github.io/design-patterns/aria-current/

aria-current support landing in NVDA 2017.2
https://www.nvaccess.org/post/nvda-2017-2rc1-released/

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


7 months ago

#3 @afercia
7 months ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 4.8.1
  • Owner set to afercia
  • Status changed from new to assigned
  • Version trunk deleted

Moving to 4.8.1 as per today's accessibility bug-scrub.

@palmiak
7 months ago

#4 @palmiak
7 months ago

Added patch. As you said - aria-current="page" is the best choice.

#wcpl2017

#5 @johnpgreen
6 months ago

  • Keywords has-patch added; needs-patch removed

#6 @afercia
6 months ago

  • Component changed from General to Themes
  • Focuses administration added
  • Keywords has-screenshots aria-current added

Thanks @palmiak and #wcpl2017! Screenshots of a quick test with VoiceOver, using Twenty Seventeen:

posts pagination:

https://cldup.com/2z4dO4MSJ4.png

comments pagination:

https://cldup.com/2EG7cGZX76.png

Maybe just a couple concerns worth some consideration:

  • the ARIA 1.1 spec seems to recommend to use aria-current on links within a set of pagination links, while here the element is a <span>; I guess it's okay since basically any element can indicate the "current thing" in a set of items
  • an interesting consideration is if a theme is already using some visually hidden text with the word "Current", it should preferably be removed to avoid duplicated information, see this comment: https://tink.uk/using-the-aria-current-attribute#comment-6674 so I guess this change should be well communicated to theme authors

Any thoughts more than welcome.

Here'e a non-exhaustive list of places where paginate_links() is used in core that should be checked:

  • posts pagination
  • comments pagination
  • old media upload modal pagination
  • menus screen: list of "View all" posts, pages, etc. (displayed only when there are more than 50 items)

Worth noting there are several other places in core where the addition of aria-current would benefit users, it would be great to open separate tickets to cover all of these cases.

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


6 months ago

#8 @afercia
6 months ago

  • Milestone changed from 4.8.1 to 4.9

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


5 months ago

@afercia
3 months ago

#10 @afercia
3 months ago

Plugins and themes might use paginate_links() to build custom paginations, for example in a checkout process or a wizard, so it should be possible to set the aria-current attribute to a value other than page. For example: step would be appropriate for a wizard. 40833.2.diff adds an aria_attribute argument that defaults to page and updates the tests.

#11 @afercia
3 months ago

Worth noting when themes use markup like the following (example from Twenty Fifteen):

<span aria-current="page" class="page-numbers current">
    <span class="meta-nav screen-reader-text">Page </span>2
</span>

there's a bit of repetition because aria-current="page" makes screen readers announce "Current page" and then they will read out also the markup "Page 2". A very minor issue, considering the important feedback given by aria-current.

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


3 months ago

@afercia
3 months ago

#14 @afercia
3 months ago

40833.3.diff adds missing esc_attr().

#15 @afercia
3 months ago

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

In 41371:

Allow usage of aria-current in paginate_links().

The aria-current attribute is a simple, effective way to help assistive
technology users orientate themselves within a list of items.

Props GrahamArmfield, palmiak.
Fixes #40833.

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


3 months ago

Note: See TracTickets for help on using tickets.