Skip to content

a11y: margin citations have role="listitem" with no role="list" parent #14755

Description

@cwickham

I have:

  • searched the issue tracker for similar issues
  • installed the latest version of Quarto CLI
  • formatted my issue following the Bug Reports guide

Bug description

With citation-location: margin, HTML output contains bibliography entries with role="listitem" but no role="list" ancestor. ARIA requires that listitem is contained by a list parent. axe-core reports this as aria-required-parent (critical impact, WCAG 2.0 A, SC 1.3.1 Info and Relationships).

The cause is in the margin relocation, not in the bibliography markup:

  • Pandoc's citeproc emits valid markup: <div id="refs" class="csl-bib-body" role="list"> wraps each <div class="csl-entry" role="listitem">.
  • referenceMarginProcessor copies each csl-entry into a new plain <div class="no-row-height column-margin column-container"> next to its citation.
  • Quarto then removes div#refs, so no role="list" element remains in the page.

Effect on assistive technology. The margin placement is CSS-only, so in DOM order the relocated entry directly follows the sentence that contains the citation. A screen reader reads the entry at that point, so the content is reachable. But the orphaned role="listitem" makes the announcement unpredictable: screen readers differ on whether to announce a list item, and there is no list context to announce. The citation link (role="doc-biblioref") points to a plain <div> that is not focusable, so the link does not move keyboard focus. This describes the rendered markup — we did not test specific screen readers.

Until this is fixed, the accessible choice is to not set citation-location: margin. The default (citation-location: document) keeps the bibliography as a valid role="list".

The problem is visible on quarto.org: an axe-core 4.10 scan flags #ref-xie2018 on Article Layout.

Note: an AI assistant helped investigate this issue, grounded in a local clone of quarto-cli (per CONTRIBUTING.md, "Using AI tools to investigate").

Steps to reproduce

Render this document with quarto render reprex.qmd:

---
title: "Margin citation reprex"
format:
  html:
    axe:
      output: document
bibliography: refs.bib
citation-location: margin
---

See @xie2018.

with this refs.bib:

@book{xie2018,
  title = {R Markdown: The Definitive Guide},
  author = {Xie, Yihui and Allaire, J.J. and Grolemund, Garrett},
  year = {2018},
  publisher = {Chapman and Hall/CRC}
}

Then open reprex.html in a browser. The axe check appends its report to the end of the document.

Actual behavior

The axe report shows one violation:

Critical · WCAG 2.0 A (1.3.1): Ensure elements with an ARIA role that require parent roles are contained by them

Certain ARIA roles must be contained by particular parents

#ref-xie2018

The flagged element and its container in the rendered HTML:

<div class="no-row-height column-margin column-container"><div id="ref-xie2018" class="csl-entry" role="listitem">
Xie, Yihui, J. J. Allaire, and Garrett Grolemund. 2018. <em>R Markdown: The Definitive Guide</em>. Chapman; Hall/CRC.
</div></div>

The page contains one role="listitem" and zero role="list".

Expected behavior

The relocated bibliography entry has valid ARIA list semantics. Either the margin container carries role="list", or the entry does not carry role="listitem". The axe check reports no violation.

Your environment

  • IDE: Positron 2026.08.0 build 213 (rendered with Quarto CLI in the terminal)
  • OS: macOS 26.5.2 (build 25F84)

Quarto check output

Quarto 1.10.18

[✓] Checking environment information...
      Quarto cache location: /Users/charlottewickham/Library/Caches/quarto

[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.10.0: OK
      Dart Sass version 1.101.0: OK
      Deno version 2.7.14: OK
      Typst version 0.15.1: OK

[✓] Checking versions of quarto dependencies......OK

[✓] Checking Quarto installation......OK
      Version: 1.10.18
      Path: /Applications/quarto/bin


[✓] Checking tools....................OK
      TinyTeX: v2026.04
      Chrome Headless Shell: 150.0.7871.115
      VeraPDF: 1.28.2


[✓] Checking LaTeX....................OK
      Using: TinyTex
      Path: /Users/charlottewickham/Library/TinyTeX/bin/universal-darwin
      Version: 2026


[✓] Checking Chrome Headless....................OK
      Using: Chrome Headless Shell installed by Quarto
      Path: /Users/charlottewickham/Library/Application Support/quarto/chrome-headless-shell/chrome-headless-shell-mac-arm64/chrome-headless-shell
      Version: 150.0.7871.115


[✓] Checking basic markdown render....OK


[✓] Checking R installation...........OK
      Version: 4.6.0
      Path: /Library/Frameworks/R.framework/Versions/4.6/Resources
      LibPaths:
        - /Users/charlottewickham/Documents/posit/quarto-web-accessibility-checking-ideas/renv/library/macos/R-4.6/aarch64-apple-darwin23
        - /Users/charlottewickham/Library/Caches/org.R-project.R/R/renv/sandbox/macos/R-4.6/aarch64-apple-darwin23/46003b10
      knitr: 1.51
      rmarkdown: 2.31


[✓] Checking Knitr engine render......OK


[✓] Checking Python 3 installation....OK
      Version: 3.12.2
      Path: /Users/charlottewickham/.pyenv/versions/3.12.2/bin/python3
      Jupyter: 5.9.1
      Kernels: python3


[✓] Checking Jupyter engine render....OK


[✓] Checking Julia installation...

Activity

added
bugSomething isn't working
htmlIssues with HTML and related web technology (html/css/scss/js)
on Aug 7, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    accessibilitybugSomething isn't workinghtmlIssues with HTML and related web technology (html/css/scss/js)

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions