Remove role="navigation" from `nav` elements

[ilovewpcom]

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

Trac ticket: https://core.trac.wordpress.org/ticket/54054

[costdev]

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

[mukesh27]

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

[costdev]

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.

[joedolson]

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)

[alexstine]

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.

[costdev]

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?

[mukesh27]

PR looks good to me.

Let's wait for other dev feedback on PR.

Milestone set to 5.9

[joedolson]

This patch reaches well beyond the original ticket scope - removing all role=navigation is definitely broader than just removing it from posts navigation. I think that's reasonable, and the patch looks sound, but I'm going to change the ticket name & re-raise this in an accessibility meeting before moving to commit.

[joedolson]

In 51967:

General: Remove role="navigation" from nav elements.

Role="navigation" was required for assistive technology to recognize HTML5 element's native ARIA roles while HTML5 and ARIA were being introduced. With the deprecation of IE11, the role attribute is only required when mapping elements that don't have native role.

Props costdev, mukesh27.
Fixes #54054.

[TobiasBg]

Just to make sure: Where the changes to package.json intentional? The commit message doesn't explain them.

[joedolson]

Whoops. Will fix that.

[joedolson]

In 51974:

Build/Test Tools: Restore changes to package.json.

Reverts changes to package.json and package-lock.json accidentally committed in [51967].

Props tobiasbg.
Fixes #54054.

[SergeyBiryukov]

In 52000:

Build/Test Tools: Restore the https URL for browserify-aes.

Follow-up to [51967], [51974].

See #54054.

[audrasjb]

Dev note published: ​https://make.wordpress.org/core/2022/01/04/miscellaneous-core-changes-in-wordpress-5-9/

Committed via https://core.trac.wordpress.org/changeset/51967.

[sabernhardt]

The bundled themes update note also mentions this change:
​https://make.wordpress.org/core/2022/01/05/bundled-theme-updates-with-wordpress-5-9/