WordPress.org

Make WordPress Core

Opened 3 months ago

Last modified 2 months ago

#47094 assigned defect (bug)

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 dev-feedback needs-dev-note
Focuses: accessibility Cc:

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 (4)

47094.1.diff (1.1 KB) - added by audrasjb 3 months ago.
Adds aria-current attribute to Recent Posts Widget
57185636-3e365f80-6e84-11e9-9be2-2a3e469758bf.png (247.0 KB) - added by melchoyce 3 months ago.
Screenshot for reference
47094.2.diff (2.4 KB) - added by audrasjb 2 months ago.
add aria-current='page' to wp_list_categories()
47094.3.diff (3.3 KB) - added by audrasjb 2 months ago.
Handle Archive widget as well

Download all attachments as: .zip

Change History (10)

#1 @audrasjb
3 months ago

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

@audrasjb
3 months ago

Adds aria-current attribute to Recent Posts Widget

#2 @audrasjb
3 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
3 months ago

Screenshot for reference

#3 @audrasjb
3 months ago

  • Keywords has-screenshots added

#4 @desrosj
2 months ago

  • Keywords has-patch added; needs-patch removed

#5 @audrasjb
2 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
2 months ago

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

@audrasjb
2 months ago

Handle Archive widget as well

#6 @audrasjb
2 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

Note: See TracTickets for help on using tickets.