quarto-dev / quarto-dev/quarto-cli
a11y: duplicate banner landmark from #quarto-header and #title-block-header
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 6k
- Forks
- 458
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 41
Description
Reported in #14373 via axe-core scan of a minimal Quarto website.
Repro: https://github.com/alexpghayes/quarto-accessibility-reprex
axe rule: landmark-no-duplicate-banner · impact: moderate · tag: best-practice
Target: <header id="quarto-header" class="headroom fixed-top quarto-banner ...">
The Quarto HTML template renders two top-level <header> elements: <header id="quarto-header"> for the navbar and <header id="title-block-header"> for the title block. Each implicitly carries role="banner", producing two banner landmarks on the same page. axe-core flags this as ambiguous for assistive tech.
This also drives landmark-unique for #quarto-header — splitting into a separate issue because the fix paths differ (restructure title-block placement vs label the navigation).
Part of #8706.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the minimal Quarto accessibility reproduction and inspect the HTML template that renders #quarto-header and #title-block-header. Run the axe-core checks for landmark-no-duplicate-banner and landmark-unique, then verify that the rendered page has one unambiguous banner landmark without introducing a new landmark issue.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- html
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 64/100