Discussion - Design pattern to identify and have a consistent navigation for a set of related pages about a common task

[duboisp]

Hi,

This is to open up a discussion about to develop and have a consensus on a design pattern to identify and have a consistent navigation for a set of related pages (sub-section) about a common task

The original propose solution require to use of two (2) heading level 1 (h1) and there is some technical concern about a such pattern.

Context:
CRA in collaboration with TBS have done a optimization project to improve the service initiation template. They have chosen to improve the Child Benefit pages.

Discussion goal:
The goal of this discussion is to define an HTML pattern that are going to be recognized as valid by other web accessibility expert and will work for users accessing that content with an assistive technology.

This discussion would assume the visual and the interaction pattern for mobile and desktop illustrated by the prototype would remain similar.

This discussion is to define how the visual and the interaction pattern can be technically articulated, coded and styled. That regardless how the prototype was originally coded or modified.

This discussion is focused on the design pattern for how a set of related pages could be named and navigated in a consistent manner. If you have other concern which is not related to this aspect, please open a new github issue.

For whatever proposed solution it must be conform to WCAG 2.1 Level AA, conform to W3C specification and be currently functional to users.

Note on the propose pattern:
I was been told that CRA has completed some usability research but they haven't published the result yet or I might simply currently don't where I can retrieve those UX research result/report.

Original proposed pattern:

Link:

• Generic - Section menu index: https://test.canada.ca/cra/section-menu-design/section-menu-index.html
• Generic - Section menu page 3: https://test.canada.ca/cra/section-menu-design/section-menu-pg3.html
• Service initiation index page: https://test.canada.ca/canada-child-benefit-2/post-validation/revenue-agency/services/child-family-benefits/canada-child-benefit.html
• Service initiation sub-page: https://test.canada.ca/canada-child-benefit-2/post-validation/revenue-agency/services/child-family-benefits/canada-child-benefit/apply.html

Code form the generic prototype

<main property="mainContentOfPage" class="container">
  <aside class="gc-nav">

    <h1 property="name" id="wb-cont-nav">Overarching topic/product name</h1>

    <nav aria-label="Section menu">
      <p class="h3 mrgn-tp-0 hidden-xs hidden-sm">Sections (or "Steps" etc.)</p>
      <ul class="gc-navseq">
        <li class="completed"><a href="section-menu-pg1.html" class="hidden-xs hidden-sm">Specific page name #1</a><a href="section-menu-pg1.html#wb-cont-nav" class="hidden-md hidden-lg">Specific page name #1</a></li>
        <li class="completed"><a href="section-menu-pg2.html" class="hidden-xs hidden-sm">Specific page name #2</a><a href="section-menu-pg2.html#wb-cont-nav" class="hidden-md hidden-lg">Specific page name #2</a></li>
        <li class="active"><a class="hidden-xs hidden-sm">Specific page name #3</a><a class="hidden-md hidden-lg">Specific page name #3</a></li>
        <li><a href="section-menu-pg4.html" class="hidden-xs hidden-sm">Specific page name #4</a><a href="section-menu-pg4.html#wb-cont-nav" class="hidden-md hidden-lg">Specific page name #4</a></li>
        <li><a href="section-menu-pg5.html" class="hidden-xs hidden-sm">Specific page name #5</a><a href="section-menu-pg5.html#wb-cont-nav" class="hidden-md hidden-lg">Specific page name #5</a></li>
        <li><a href="section-menu-pg6.html" class="hidden-xs hidden-sm">Specific page name #6</a><a href="section-menu-pg6.html#wb-cont-nav" class="hidden-md hidden-lg">Specific page name #6</a></li>
      </ul>
    </nav>
  </aside>

  <section class="gc-nav-section">

    <h1 property="name" id="wb-cont">Specific page name #3</h1>

    <h2 class="h3 mrgn-tp-md">On this page</h2>
    <ul>
      <li><a href="#h_1">First heading</a></li>
      <li><a href="#h_2">Second heading</a></li>
      <li><a href="#h_3">Third heading</a></li>
    </ul>
    <h2 id="h_1">First heading</h2>
    <p>Lorem ipsum dolor sit amet.</p>
    
    ... content of the page ...

    <ul class="pager">
      <li class="previous"><a href="section-menu-pg2.html" rel="prev">Specific page name #2</a></li>
      <li class="next"><a href="section-menu-pg4.html" rel="next">Specific page name #4</a></li>
    </ul>
  </section>
 
  ... pre-footer content ...

</main>

Code from the child benefit prototype

<main property="mainContentOfPage" class="container" id="steps-navigation">
  <span tabindex="-1" id="apply" class="hidden-md hidden-lg"></span>

  <h1 property="name" id="wb-cont-section" class="wb-inv-xs wb-inv-sm">Canada Child Benefit</h1>

  <div class="row">
    <div class="col-md-4 col-md-push-8" id="steps-menu">
      <span tabindex="-1" id="can-apply" class="hidden-md hidden-lg"></span>
      <nav class="section-menu mobile">
        <h2 class="menu-title"><span class="wb-inv-md wb-inv-lg">Canada Child Benefit</span> <span class="wb-inv-xs wb-inv-sm">Sections</span></h2>
        <ul class="vertical-steps">
          <li class="completed"><a href="./who-can-apply.html#can-apply">Who can apply<span class="wb-inv"> - Canada Child Benefit</span></a></li>
          <li class="active"><a>Apply<span class="wb-inv"> - Canada Child Benefit</span></a></li>
          <li><a href="./how-much.html#how_much">How much you can get<span class="wb-inv"> - Canada Child Benefit</span></a></li>
          <li><a href="./payment-dates.html#dates">Payment dates<span class="wb-inv"> - Canada Child Benefit</span></a></li>
          <li><a href="./keep-getting-payments.html#payments">Keep getting your payments<span class="wb-inv"> - Canada Child Benefit</span></a></li>
          <li><a href="./contact.html#contact">Contact the <abbr title="Canada Revenue Agency">CRA</abbr><span class="wb-inv"> - Canada child benefit</span></a></li>
        </ul>
      </nav>
    </div>

    <div class="col-md-8 col-md-pull-4" id="steps-content">

    <h1 property="name" id="wb-cont">Apply</h1>

    <nav id="toc">
      <h2 class="h3 mrgn-tp-md">On this page</h2>
      <ul class="toc-nav">
        <li><a href="#When">When to apply</a></li>
        <li><a href="#How">How to apply</a></li>
        <li><a href="#additional">When you need to provide additional documents</a></li>
      </ul>
    </nav>

    <h2 id="When">When to apply</h2>
    <p>You should apply for the Canada child benefit (CCB) as soon as any of the following situations happen:</p>

    ... content of the page ...

    </div>
  </div>

  ... pre-footer content ...
  
</main>

Some formal reference to guide the discussion:

• Having multiple heading level 1 is possible according to the HTML5 specification when they are used along with sectioning content. Reference: https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements
• There are no implementations of the proposed outline algorithm in web browsers nor assistive technology [...] should not be used to convey document structure to users. Reference: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines

/cc @cfarquharson, @delisma, @bsouster

[duboisp]

My proposal consist in:

• Only have one heading level 1 (h1) to be use to identify one specific page within the set of pages
• Using and starting with an heading level 2 (h2) in the main section to identify the set of pages and provide a navigation.
• Changing the heading structure of the GCWeb global template
• Using JS or/and WAI-ARIA to ensure the code meaningful sequence is maintained when the view is switch between mobile and desktop. For conformity with SC 1.3.2

For example:

• The page header will be under one (1) heading level 2, instead of three (3) heading level 2 (Language toggle, search, top menu)
• The new heading level 2 in the page header would contain three (3) sub-heading level 3 corresponding at the previous heading level 2.
• The page footer will be under one (1) heading level 2, instead of two (2) heading level 2 (About government, About this site)
• The new heading level 2 in the page footer would contain two (2) sub-heading level 3 corresponding at the previous heading level 2.
• The main sectioning content will start with a navigation section where it will contains the identifier of the section and its navigable links
• The section identifier will be followed a list of navigable links that only relates to its section.
• The first heading encounter in the main sectioning content will be an heading level 2 which will correspond to the section identifier.
• After the navigation section, an heading level 1 will be provided to identify the content of the page.
• (optional) The heading level 1 would contains also the section heading only visible for screen reader user and it will useful to improve search indexation
• The title of the page will have the identifier use for the heading level 1 followed by the name of the section (first heading level 2 in the main element)

This proposal are major, which will break existing implementation of GCWeb.

[duboisp]

Comment received by email

Hi Pierre, great that we are opening the dialogue to hopefully get a sound resolution on how to implement a properly semantic structure.

I’m a bit confused by Mozilla’s phrasing about not using structure, but rather using rank. Which when clicking on the links, they still give you an example of multiple H1s….and using two H1s seems to be still correct as H1 is just simply the first type of “rank”, but doesn’t need to be the “only” rank. And I think it’s more about the fact that things like

etc. should not be used as the structure, but the headers are needed to support the structure of the page.

However, I find that some W3C and Mozilla statements can be open to different interpretations, so I could be mistaken.

Google supports multiple h1s.
https://www.youtube.com/watch?v=zyqJJXWk0gk&list=PLKoqnv2vTMUM9wKeb-Gvm8bgpFM72yiXw&index=13&linkId=74709949

And on the w3 page
https://dev.w3.org/html5/spec-LC/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements

They show an example with multiple h1s.

I think in the end, it’s all about how people with screen readers can use it and if they use it well. If it’s something that they are not used to…we can always look at aria-labels or invisible text/links to help support the navigation structure for them.

Chris Oakes
UX Design Specialist, UX Research and Design, Public Affairs Branch
Canada Revenue Agency / Government of Canada

[duboisp]

The discussion from the HTML specification about the outline algorithm is still unresolved, see: whatwg/html#83

Also, we would need to have a solution that support work for browsers as determined by the wet-boew design decision #2 Which currently include Firefox, Chrome, Safari, Edge and IE11

[lisafast]

Our TBS-CRA usability research was with phone users for Canada Child Benefit (16 participants). The design was successful in that people clearly understood their context, and were able to see more on their phone page than with the current very long large H1s in a service initiation page.

Based on that success, we tried the new design with desktop users in a study this month with 18 public servants. An example of that prototype is here: https://tbs-proto1.openplus.ca/en/landing/report-overpayment

I will leave the technical discussion to @delisma with gratitude.

[duboisp]

FYI - Still in progress
You can see the progress of my technical analysis impact on search result is here: https://wet-boew.github.io/wet-boew-documentation/research/2020-33-double-h1-impact-analysis.html

[GormFrank]

@duboisp Est-ce que cet issue peut être fermé?