Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix H1 headers on method cards #473

Closed
wants to merge 4 commits into from
Closed

Conversation

cannandev
Copy link
Contributor

@cannandev cannandev commented Feb 8, 2024

Changes proposed in this pull request:

  • Make sure the method category is the only H1 on the page. For example, Discover or Validate. (method-card.html)
  • Make sure the method category is the only H1 on the "See all cards" page (method-category.html).
  • Change PHASE and TIMING H1s to H2 elements
  • Bump down other headings down one level (H2 to H3, etc) for each card front panel (method.html) and back panel (*.md)
  • Update CSS to match styles as designed.

Security considerations

No security considerations, since this is just html and markdown files.

Acceptance criteria (for Reviewer)

  • HTML outline will show only one H1 on a single card and a collection of cards.
  • Styles look the same, even though the headings have been bumped down.

Preview URL of one card

Preview URL of one card collection

Using the headingsMap tool:
Before
image

After
image

@cannandev cannandev requested a review from a team as a code owner February 8, 2024 06:17
@cannandev cannandev linked an issue Feb 8, 2024 that may be closed by this pull request
@cannandev cannandev changed the title 447 fix h1 headers ca Fix H1 headers on method cards Feb 8, 2024
@jasnakai
Copy link
Collaborator

jasnakai commented Feb 8, 2024

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.

@cannandev
Copy link
Contributor Author

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!

@cannandev cannandev closed this Feb 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Methods a11y: multiple H1's on single page
2 participants