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

[Making WordPress.org]

#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
 regions].

 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):

 [[Image(http://cldup.com/t4blUGv__m.jpg)]]

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

 [[Image(http://cldup.com/IVXr0-FKBL.jpg)]]

 Same in the Plugin section sub-pages:

 [[Image(http://cldup.com/h7w1Zs2jNd.jpg)]]

 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
 technologies
 - a `<div>` element with a `role="navigation"`, which is equivalent to a
 `<nav>`

 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.

 Suggested:
 - 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
 change

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

 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