[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           |  Resolution:
 Keywords:  has-screenshots  |     Focuses:  accessibility, template
-----------------------------+--------------------------------------
Description changed by afercia:

Old description:

> 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.

New description:

 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 it's 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#comment:1>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform