[wp-meta] [Making WordPress.org] #4123: Proposal to improve the main navigation menu accessibility

Making WordPress.org noreply at wordpress.org
Tue Jan 29 18:14:14 UTC 2019

#4123: Proposal to improve the main navigation menu accessibility
 Reporter:  afercia  |      Owner:  (none)
     Type:  defect   |     Status:  new
 Priority:  normal   |  Milestone:
Component:  General  |   Keywords:
 Several [https://www.w3.org/TR/wai-aria-practices-1.1/#html5-sectioning-
 elements HTML5 sectioning elements] automatically create
 [https://www.w3.org/TR/wai-aria-1.1/#landmark_roles ARIA landmark

 Landmark regions are exposed to assistive technologies and allow users to
 quickly find information in a page. Ideally, all content in a web page
 should be wrapped within landmark regions. For now, I'd like to propose to
 focus on the navigation menu.

 In this specific case it's important to know that `<nav>` elements are
 mapped to an ARIA `role=navigation`. Therefore, `<nav>` elements are
 perceived by screen readers and users can jump to them using dedicated
 keyboard shortcuts.

 In the wp.org network, some sections don't use `<nav>` elements at all.
 For example, the home page (screenshot from Safari and VoiceOver):


 Other sections do use navigation landmarks but not for the main menu. For
 example, the Themes section has two of them:


 Same in the Plugin section sub-pages:


 For clarity, these are respectively:
 - a `<nav>` element with a `role="navigation"`: it was common practice to
 repeat the role even if redundant, to support old browsers assistive
 - a `<div>` element with a `role="navigation"`, which is equivalent to a

 Besides technical details, the most important navigation (the main one)
 doesn't use a navigation landmark. Wrapping the main menu in a `<nav>`
 element would be a good, simple, improvement.

 Note: when in a page there are multiple landmarks of the same type, it's
 important to use an `aria-label` to help users to distinguish them. This
 is also what WordPress core and the bundled themes do.

 - wrap the existing main menu markup in a `<nav aria-label="Main menu">`
 - where present, add to the secondary navigation an `aria-label="Secondary
 menu"` (or any better wording)
 - the toolbar already uses an `aria-label="Toolbar"`, no need for any

 - modernize the markup: remove `role="navigation"` and just use a `<nav>`

 Note about the wording:
 When screen readers encounter a `<nav>` element or a `role="navigation"`,
 they already announce "navigation": it's recommended to not use this word
 in the aria-label because it would be announced twice.

Ticket URL: <https://meta.trac.wordpress.org/ticket/4123>
Making WordPress.org <https://meta.trac.wordpress.org/>
Making WordPress.org

More information about the wp-meta mailing list