[wp-trac] [WordPress Trac] #47123: The post(s) navigation landmark needs to be labelled

[WordPress Trac]

#47123: The post(s) navigation landmark needs to be labelled
-------------------------------------+-----------------------------
 Reporter:  afercia                  |      Owner:  (none)
     Type:  defect (bug)             |     Status:  new
 Priority:  normal                   |  Milestone:  Awaiting Review
Component:  Bundled Theme            |    Version:
 Severity:  normal                   |   Keywords:  has-screenshots
  Focuses:  accessibility, template  |
-------------------------------------+-----------------------------
 Basically all the Bundled Themes use previous / next navigation in the
 single post and pagination links in the posts / comments archives.

 The markup output is responsibility of the core function
 `_navigation_markup`, which prints out an unlabelled `<nav>` element:

 {{{
 <nav class="navigation post-navigation" role="navigation">
 }}}

 == Why it is a problem

 This `<nav>` element defines an ARIA landmark by default: landmarks help
 assistive technology users to perceive the page main sections and jump
 through them. However, when a landmark is used more than once in a page,
 it needs to be distinguished from the other ones to let users understand
 ''what'' the landmark is about.

 For example, in Twenty Nineteen there may be up to 4 navigation landmark,
 plus the WordPress toolbar when logged in. These landmarks are well
 labelled except the post / posts navigation one. See screenshot from the
 VoiceOver landmarks list:

 [[Image(http://cldup.com/0ezXKyPlJS.png)]]

 Users won't have a clue what that landmark region is about.

 == Suggested solution

 To properly label this landmark, there's the need to add an `aria-label`
 attribute with a meaningful text. The following W3C examples clarify
 further:

 **W3C landmarks example with detailed instructions:**
 https://www.w3.org/TR/wai-aria-practices/examples/landmarks/
 > If a specific landmark role is used more than once on a web page, it
 should have a unique label.
 > Avoid using the landmark role as part of the label. For example, a
 navigation landmark with a label "Site Navigation" will be announced by a
 screen reader as "Site Navigation Navigation". The label should simply be
 "Site".

 **W3C example using equivalent HTML5 sectioning elements**
 e.g. main, nav, aside ... define ARIA landmarks by default
 https://www.w3.org/TR/wai-aria-practices/examples/landmarks/HTML5.html

 == Details
 `_navigation_markup` is used by other functions with different context:
 single views, archies, post, comments...:
 - `the_post_navigation()` / `get_the_post_navigatio()n`
 - `the_posts_navigation()` / `get_the_posts_navigation()`
 - `the_posts_pagination()` / `get_the_posts_pagination()`
 - `the_comments_navigation()` / `get_the_comments_navigation()`
 - `the_comments_pagination()` / `get_the_comments_pagination()`

 Therefore, the `aria-label` value should be meaningful for all these
 different cases.

 Note: in some cases, the `<nav>` element contains also a visually hidden
 heading, e.g.:
 `<h2 class="screen-reader-text">Post navigation</h2>`

 In these cases the worth evaluating to use `aria-labelledby` on the
 `<nav>` element, targeting the hidden heading. I'd like to hear the
 accessibility team thoughts on this. From a technical perspective, this
 would be a bit challenging, as `_navigation_markup` is used in different
 scenarios.

 Note: filing under the "Bundled Theme" component even if this is output by
 core, as it impacts themes templating. Please do feel free to assign to a
 more appropriate component if desired.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/47123>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform