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
- Install the Educare site template on a fresh site.
- 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.
- 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.ymlandcanvas.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 atext_size: h4class so it still looks the same.- The /events "Upcoming Events" heading: level 3 → 2, with a
text_size: h3class. canvas.pattern.faq.ymland the affectedcontent/canvas_page/*.ymlentries: removed the 24 placeholder "Your heading goes here" FAQ headings.recipe.ymlupdated 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
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
Comment #4
rajab natshah✅ Released educare-1.0.0-alpha1
Comment #5
rajab natshahComment #6
rajab natshah