Problem/Motivation

An axe-core accessibility audit of the Educare site template found a moderate WCAG 2.4.6 (Headings and Labels) heading-order violation repeated across the template: heading levels skip (e.g. a section <h2> followed directly by a card <h5>, or an <h1>→<h2>→<h5> gap). It was found on the homepage, /programs, a program page, a news article, /events, an event page and /about.

On the recipe/content side, two root causes: card and heading titles across several Canvas patterns (three-action cards, the event last-row cards, stories, and the footer) were hardcoded to a heading level chosen for visual size rather than for document outline (h5/h6, and h4 on the footer); and the FAQ accordion pattern shipped 24 placeholder headings reading "Your heading goes here", none of which had a level appropriate to their position. See also the related theme issue #3614488, which fixes the same audit finding on the Share component.

Steps to reproduce

  1. Install the Educare site template on a fresh site.
  2. Run an axe-core heading-order check (e.g. the Varbase functional testing suite's a11y step, or axe DevTools) on the homepage, /programs, a program page, a news article, /events, an event page and /about.
  3. Observe heading-order violations: card/heading titles skip levels, the footer heading skips from h1/h2 to h4, and the FAQ accordion's 24 placeholder headings break the outline.

Proposed resolution

Decouple the heading LEVEL from the visual SIZE, keeping visual size via a text-size class:

  • Card/heading titles in canvas.pattern.threeactionscard.yml, canvas.pattern.eventlastrow.yml and canvas.pattern.stories.yml: heading level h5/h6 → h3, size kept via a text-size class.
  • canvas.page_region.vartheme_bs5_educare.footer.yml: footer heading level 4 → 2, with a text_size: h4 class so it still looks the same.
  • The /events "Upcoming Events" heading: level 3 → 2, with a text_size: h3 class.
  • canvas.pattern.faq.yml and the affected content/canvas_page/*.yml entries: removed the 24 placeholder "Your heading goes here" FAQ headings.
  • recipe.yml updated to match.

Verified: axe heading-order is 0 across the 7 affected pages on a fresh install; card/heading visual sizes are unchanged; gitlab-ci-local is green on this repo.

Remaining tasks

  • ✅ File an issue about this project
  • ❌ Addition/Change/Update/Fix to this project
  • ❌ Testing to ensure no regression
  • ➖ Automated unit/functional testing coverage
  • ➖ Developer Documentation support on feature change/addition
  • ➖ User Guide Documentation support on feature change/addition
  • ➖ UX/UI designer responsibilities
  • ❌ Accessibility and Readability
  • ❌ Reviewed by a human
  • ❌ Code review by maintainers
  • ❌ Full testing and approval
  • ❌ Credit contributors
  • ❌ Review with the product owner
  • ❌ Update Release Notes
  • ❌ Release

User interface changes

  • N/A

API changes

  • N/A

Data model changes

  • N/A

Release notes snippet

  • Fixed heading-order accessibility issues by correcting card/heading levels and removing FAQ placeholder headings.

Issue fork educare-3614489

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

rajab natshah created an issue. See original summary.

  • rajab natshah committed 16870bd7 on 1.0.x
    fix: #3614489 Correct heading order on cards and remove FAQ placeholder...
rajab natshah’s picture

Assigned: Unassigned » josebc
Status: Active » Needs review
Issue tags: +educare-1.0.0-alpha1
rajab natshah’s picture

Assigned: josebc » mohammed j. razem
rajab natshah’s picture

Assigned: mohammed j. razem » Unassigned
Status: Needs review » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.