WordPress.org

Make WordPress Core

Opened 7 months ago

Closed 2 months ago

Last modified 8 weeks ago

#47094 closed defect (bug) (fixed)

Widgets: current-page links are not programmatically labelled as such

Reported by: audrasjb Owned by: audrasjb
Milestone: 5.3 Priority: normal
Severity: normal Version:
Component: Widgets Keywords: has-screenshots has-patch wpcampus-report aria-current has-dev-note
Focuses: accessibility Cc:
PR Number:

Description

Note: this issue was first reported by Karl Groves (@karlgroves) in Gutenberg Github repository.
https://github.com/WordPress/gutenberg/issues/15333

Current-page link is not programmatically labelled as such

Severity: Medium

Affected Populations:
Low-Vision
Cognitively Impaired

Platform(s):
All / Universal

Components affected:
Output Markup
Issue description

When a page is created and users view it, its name appears in the
sidebar under "Recent Posts", however there is no visual or semantic
indication that this link relates to the current page.

Since it's possible for authors to create multiple articles with the
same name, the lack of indication may cause confusion for users with
cognitive disabilities and screen reader users.

Issue Code:

    <li>
        <a href="...">...</a>
    </li>

Remediation Guidance
Whenever the current page is reflected in a menu on that page, add
aria-current="page" to the applicable link.

Use the aria-current attribute as a hook to add a distinctive visual
style to separate it from other links.

Recommended Code:

    <li>
        <a href="..." aria-current="page">...</a>
    </li>
    widget_recent_entries a[aria-current] {
        /*  styles */
    }

Relevant standards:
2.4.4 Link Purpose (In Context) (Level A)
https://www.w3.org/TR/WCAG20/#navigation-mechanisms-refs
2.4.8 Location (Level AAA)
https://www.w3.org/TR/WCAG20/#navigation-mechanisms-location

Attachments (6)

47094.1.diff (1.1 KB) - added by audrasjb 7 months ago.
Adds aria-current attribute to Recent Posts Widget
57185636-3e365f80-6e84-11e9-9be2-2a3e469758bf.png (247.0 KB) - added by melchoyce 7 months ago.
Screenshot for reference
47094.2.diff (2.4 KB) - added by audrasjb 6 months ago.
add aria-current='page' to wp_list_categories()
47094.3.diff (3.3 KB) - added by audrasjb 6 months ago.
Handle Archive widget as well
47094.diff (3.1 KB) - added by afercia 3 months ago.
47094.4.diff (3.2 KB) - added by audrasjb 2 months ago.
replaces is_single()&&get_the_ID() check with get_queried_object_ID() single check

Download all attachments as: .zip

Change History (21)

#1 @audrasjb
7 months ago

Also, at least Recent Posts, Pages, Archives, Categories, and Navigation Menu Widgets are concerned.

@audrasjb
7 months ago

Adds aria-current attribute to Recent Posts Widget

#2 @audrasjb
7 months ago

Recent Post Widget is fixed in 47094.1.diff.

Navigation Menu Widget and Page Widget are already ok.

Category Widget needs an update in wp_list_categories function.
Archives Widget needs an update in wp_get_archives function.

@melchoyce
7 months ago

Screenshot for reference

#3 @audrasjb
7 months ago

  • Keywords has-screenshots added

#4 @desrosj
6 months ago

  • Keywords has-patch added; needs-patch removed

#5 @audrasjb
6 months ago

  • Keywords needs-patch added; has-patch removed

This ticket still needs a patch to handle the 2 last widgets that should use this attribute ;)

Category Widget needs an update in wp_list_categories function.
Archives Widget needs an update in wp_get_archives function.

@audrasjb
6 months ago

add aria-current='page' to wp_list_categories()

@audrasjb
6 months ago

Handle Archive widget as well

#6 @audrasjb
6 months ago

  • Keywords has-patch dev-feedback needs-dev-note added; needs-patch removed

I believe 47094.3.diff handles all the use case for aria-current in Core Widgets.

This is tested with success on my side.
FYI Menu and Page Widgets were both already adding aria-current attribute.

Ping @afercia and @welcher for review.

Also, we should add some styles for the current items but I'll open a new ticket since it should be fixed in Bundled Themes Component.

I'm also adding needs-dev-note keyword.

Cheers,
Jb

#7 @audrasjb
3 months ago

  • Keywords commit wpcampus-report added; dev-feedback removed

I drafted a dev note for this ticket: https://docs.google.com/document/d/1WAHQVrrfY0xapf5j4H9LFY4tXIF9av4Rq_pw6rhicSY/edit?usp=sharing

Adding commit keyword.
I'll open other tickets to add support for a[aria-current] in Bundled Themes stylesheets as soon as this ticket can be committed in 5.3.

Cheers,
Jb

#8 @afercia
3 months ago

  • Keywords aria-current added

#9 @afercia
3 months ago

  • Keywords commit removed

Tested a bit the patch and noticed something to address for the Recent Posts widget. To reproduce:

  • add the Recent Posts and the Archives widget to your site
  • make sure to have 2-3 published post in August 2019
  • in any case, set the Recent Posts widget to display a number of posts that includes all the ones from August
  • go to the monthly Archive yoursite.test/2019/08
  • at this point, "August 2019" in the Archive widget will have the aria-current="page" attribute
  • however, also the oldest post from August in the Recent Posts widget will have the aria-current="page" attribute, which is incorrect because this is an archive page
  • seems related to the use of get_the_ID()
  • in 47094.diff I'm trying to avoid this checking also for is_single(), not sure if there are better ways to avoid the attribute gets printed out also in pages that aren't posts /Cc @audrasjb @SergeyBiryukov

Some additional minor adjustments:

  • Categories: in order to avoid to use an additional foreach I thought to use the existing one and then manipulate the link string. Something like: $link = str_replace( '<a', '<a aria-current="page"', $link );
  • Archives: use only one ternary
  • applied some coding standards

Some review and testing would be nice :)

@afercia
3 months ago

#10 @afercia
3 months ago

in 47094.diff​ I'm trying to avoid this checking also for is_single(), not sure if there are better ways to avoid the attribute gets printed out also in pages that aren't posts

I think one option could be using get_queried_object_id(), any thoughts welcome.

#11 @afercia
2 months ago

I'd like some feedback from devs more experienced than me about the two options. The current patch uses this check:

if ( is_single() && get_the_ID() === $recent_post->ID ) { ...

I think it could be simplified to:

if ( get_queried_object_id() === $recent_post->ID ) { ...

Pinging the Widgets component maintainers @welcher and @audrasjb.

Last edited 2 months ago by afercia (previous) (diff)

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


2 months ago

@audrasjb
2 months ago

replaces is_single()&&get_the_ID() check with get_queried_object_ID() single check

#13 @audrasjb
2 months ago

Sounds great @afercia ;-)

I successfully tested the patch and added get_queried_object_id() which is exactly what's needed here.
Patch refreshed in 47094.4.diff.

#14 @afercia
2 months ago

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

In 46163:

Accessibility: Add aria-current to the Archives, Categories, and Recent Posts widgets output.

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

Continues the introduction in core of the aria-current attribute after [41359] and following changes.

Props audrasjb, melchoyce.
Fixes #47094.

#15 @audrasjb
8 weeks ago

  • Keywords has-dev-note added; needs-dev-note removed
Note: See TracTickets for help on using tickets.