WordPress.org

Make WordPress Core

Opened 3 months ago

Closed 3 months ago

Last modified 3 months ago

#47722 closed defect (bug) (invalid)

aria-current is not implemented correctly

Reported by: epithetic Owned by: audrasjb
Milestone: Priority: normal
Severity: normal Version: 5.2.2
Component: Menus Keywords:
Focuses: ui, accessibility Cc:
PR Number:

Description

Hi,

Just noticed that aria-current isn't implemented correctly in WordPress 5.2.2 in the global navigation menu.

Issue description

aria-current="page" is incorrectly placed on the <a> in the global navigation.

As aria-current="page" is an enumerated type, it's intended to indicate the current place in a set, so for this to happen it needs to placed on the parent <li> that contains the <a> not the actual <a>.

Code sample taken from the main navigation.

<li id="menu-item-100" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-100"><a href="https://foxland.fi/demo/sanse//" aria-current="page">Home</a></li>

Expected markup.

<li id="menu-item-100" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-100" aria-current="page"><a href="https://foxland.fi/demo/sanse//" >Home</a></li>

See https://www.w3.org/TR/wai-aria-1.1/#aria-current

Change History (6)

#1 @audrasjb
3 months ago

  • Component changed from General to Administration
  • Owner set to audrasjb
  • Status changed from new to reviewing
  • Version set to 5.2.2

Hi and welcome to WordPress Core Trac! Thanks for opening this ticket,

The issue here is that we don't have any list-items because of legacy markup.

We'll try to discuss this ticket during next Friday bug scrub. Feel free to join on Make WordPress Slack team :-)

Cheers,
Jb

#2 @SergeyBiryukov
3 months ago

  • Component changed from Administration to Menus

Introduced in [42808].

#3 @afercia
3 months ago

  • Keywords reporter-feedback close added

@epithetic thanks for your ticket and welcome to Trac.

I'm not sure I fully understand how the fact the aria-current attribute is an enumerated type implies it should be set on the <li> element in a list containing links.

Enumerated type just means its expected values consist of a set of named values.

Reference:
https://www.w3.org/TR/wai-aria-1.1/#aria-current

Indicates the element that represents the current item within a container or set of related elements

Based on that, seems to me the fact the links are wrapped within <li> elements is not relevant.

See also the breadcrumbs example in the WAI-ARIA Authoring Practices 1.1, where the attribute is placed on the <a> element:
https://www.w3.org/TR/wai-aria-practices-1.1/#breadcrumb
https://www.w3.org/TR/wai-aria-practices-1.1/examples/breadcrumb/index.html

Worth also noting that placing it on the <li> element could make the attribute be ignored depending on the browser / screen reader combination and the navigation mode.

I may be missing something though, please do feel free to share more details.

#4 @epithetic
3 months ago

  • Resolution set to invalid
  • Status changed from reviewing to closed

Hang on, my bad, you're totally correct - apologies.

I'm running a beta of macOS Catalina and this wasn't being announced as expected for me with VO, so looks like a potential bug - I'll investigate further.

Closing ticket.

#5 @SergeyBiryukov
3 months ago

  • Keywords reporter-feedback close removed
  • Milestone Awaiting Review deleted

Thanks for the follow-up!

#6 @afercia
3 months ago

Thanks @epithetic. Note: if you were testing with Chrome (75), I'm afraid Chrome doesn't expose aria-current to assistive technologies. Safari 12.1.1 does.

Note: See TracTickets for help on using tickets.