Methods a11y: multiple H1's on single page

[jasnakai]

A description of the work

This issue pertains to the Methods site views with the method cards.
Each method card has 3 h1's. Although it is technically allowable to have multiple h1's on the same view for better UX and accessibility, we should keep it to one per view.

W3C Headings guidance: https://www.w3.org/WAI/tutorials/page-structure/headings/

Point of contact on this issue

Jason Nakai: @jasnakai

Acceptance Criteria

No response

[jasnakai]

This is 90% complete. Working on an issue with passing a parameter to multi level templates. Once that is done, the PR will be ready for review.

[jasnakai]

I ran into an issue of the hard coded headings in the MD files. I believe this can be handled using macros. I need to look into it further but, at first glance, it appears that this will work. I will post an update when I know more.

[jasnakai]

Still looking into using macros to handle this issue. The updates work on all HTML headings but do not extend to headings created in the MD files using the hash syntax (# = h1, ## = h2, ...).
Contact @jasnakai for more info is needed.

[cannandev]

It looks like the only H1 that should be on the pages should be the category (for example, Discover or Validate). The other headings can be bumped down one level. This change doesn't require any logic to change the H1 to H2 when multiple cards are present. Just an rewrite of the HTML elements. I have a PR open with the changes to the html templates and the markdown files in #473. @jasnakai If there are other related issues, please open a separate ticket.

Preview URL

[cannandev]

Copying some important comments here from the #473 ticket.

from @jasnakai

Hello @cannandev! The bump down of the Card Headings from h1 to h2 works for the category view. However, when viewing a single card, the card title should be an h1 and the category heading should become a non-heading element since it is more of a breadcrumb in this instance. Also, when the single card view uses the "Validate" or "Discover" text as an h1, it becomes an usability/accessibility issue since discrete views shouldn't have the exact same h1 heading.
Another issue I ran into while working on this was that the updates to the heading levels in the HTML snippets only addresses the left panel of the cards while the right side is all handled in the MD files.
Lastly, this may just be semantics, the "Phase" and "Timing" headings are not really headings but more metadata. As such, I think this should be changed to a description list which is used to markup metadata.
Just some thoughts I had while working on this.

from @cannandev

Thanks for the context @jasnakai. That information about the category being a breadcrumb was key to understanding the issue. I'm concerned about adding macros and logic in the markdown files and the impact that will have for future content managers that have no Liquid/HTML experience. We should take a step back and revisit these templates. This way we can keep all logic in the templates, including section headers, and leave markdown for simple text.

I'm going to close this issue and copy your comment into the original #447 ticket. Thanks!