WordPress.org

Make WordPress Core

Opened 7 weeks ago

Last modified 40 hours ago

#54054 reviewing enhancement

Remove role="navigation" from the markup of the the_posts_pagination() function

Reported by: ilovewpcom Owned by: joedolson
Milestone: 5.9 Priority: normal
Severity: normal Version:
Component: General Keywords: has-patch
Focuses: accessibility, coding-standards Cc:

Description

According to HTML5 documentation, adding role="navigation" to a <nav> element is unnecessary (and not permitted).
It should be added to elements like <div> instead, when using the semantically correct <nav> is not possible.

Meanwhile this is the HTML markup for the the_posts_pagination() function, which comes through the _navigation_markup() function in the /wp-includes/link-template.php file.

    $template = '
    <nav class="navigation %1$s" role="navigation" aria-label="%4$s">
        <h2 class="screen-reader-text">%2$s</h2>
        <div class="nav-links">%3$s</div>
    </nav>';

References:
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Navigation_Role
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav

Change History (12)

This ticket was mentioned in PR #1648 on WordPress/wordpress-develop by costdev.


7 weeks ago

  • Keywords has-patch added

#2 @costdev
7 weeks ago

  • Focuses accessibility coding-standards added

The PR removes all instances of role="navigation" on nav elements, including in the base themes.

#3 @mukesh27
7 weeks ago

  • Keywords close added
  • Version 5.8 deleted

Hi thanks for the ticket.

@costdev thanks for the patch.

Same ticket like #48920. Let's wait for other dev to check till now let's mark it close

#4 @costdev
7 weeks ago

Yeah @mukesh27 the related ticket highlights the same issue in another area - both areas (and more) are covered by this patch, nice find!

The WebAIM survey mentioned in the related ticket is an older version - WebAIM has newer results.

IE11 screen reader usage (WebAIM):
2017: 23.3%
2019: 10.9%
2021: 3.3%

Many screen reader developers are recommending the newer browsers now. For those that don't recommend any particular browser, the screen readers seem to function in at least some of the modern browsers.

It might be worth a discussion (?) about what % usage is the acceptable cut-off point to bring things in line with HTML5 documentation.

Edit: As WordPress no longer supports IE11, I would propose that this ticket be kept open, resolving the issue raised by #48920 and all other cases of role="navigation" on nav elements as well.

Last edited 6 weeks ago by costdev (previous) (diff)

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


6 weeks ago

#6 @joedolson
6 weeks ago

The primary problem with assistive technology support for the native HTML5 elements was directly related to IE - even if the assistive technology supports native landmark elements, that support is only meaningful if the browser also supports them, since otherwise the information wouldn't be added to the accessibility tree that the AT interacts with.

So, in my opinion, with the removal of IE11 support, it's reasonable to also remove role attributes on landmark elements throughout WordPress. There may be some situations where this will reduce accessibility, but they would be vanishingly rare.

The accessibility-ready theme guidelines stopped requiring the use of both the role attribute and the native element in January 2021. (https://make.wordpress.org/themes/handbook/review/accessibility/required/#aria-landmark-roles)

#7 @alexstine
6 weeks ago

I always got confused in regards to where I should use roles or just HTML5 elements so I used them both. However, if there is no longer a negative effect that could be caused by some browsers/screen readers not fully supporting the native HTML5 elements, this has my support to drop the roles. It makes the code a bit cleaner and simpler.

#8 @costdev
6 weeks ago

  • Keywords close removed

Thanks for the feedback @joedolson! I'm removing close now that we've reached a stage where all instances of role="navigation" on nav elements can now be removed. I believe the ticket is ready for a milestone and the PR ready for commit if a committer can take this further?

Last edited 6 weeks ago by costdev (previous) (diff)

#9 @mukesh27
6 weeks ago

  • Milestone changed from Awaiting Review to 5.9

PR looks good to me.

Let's wait for other dev feedback on PR.

Milestone set to 5.9

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


3 weeks ago

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


40 hours ago

#12 @joedolson
40 hours ago

  • Owner set to joedolson
  • Status changed from new to reviewing
Note: See TracTickets for help on using tickets.