You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
a11y: scrollable code blocks and output pre lack tabindex=0 (keyboard inaccessible) #14378
When code blocks or cell output overflow the viewport width they become scrollable, but Quarto doesn't add tabindex="0" — so keyboard-only users cannot scroll to see the hidden content. The fix should conditionally add tabindex="0" when the element's scrollWidth exceeds its clientWidth, or unconditionally for .sourceCode / .cell-output pre.
{
"id": "scrollable-region-focusable",
"impact": "serious",
"tags": ["cat.keyboard", "wcag2a", "wcag211", "wcag213", "TTv5", "TT4.a", "EN-301-549", "EN-9.2.1.1", "EN-9.2.1.3"],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": [
{
"impact": "serious",
"html": "<div class=\"cell-output-display\">",
"target": [".cell-output-display"],
"failureSummary": "Fix any of the following:\n Element should have focusable content\n Element should be focusable"
}
]
}
Activity
cwickham commentedon Aug 7, 2026
This violation also applies to
.cell-output-display, the container for rendered cell output (tables, SVGs, widgets).At a 390 px viewport, a 10-column
kable()is enough:axe 4.10 reports (Quarto 1.10.18, 390×844 viewport):
{ "id": "scrollable-region-focusable", "impact": "serious", "tags": ["cat.keyboard", "wcag2a", "wcag211", "wcag213", "TTv5", "TT4.a", "EN-301-549", "EN-9.2.1.1", "EN-9.2.1.3"], "description": "Ensure elements that have scrollable content are accessible by keyboard", "help": "Scrollable region must have keyboard access", "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI", "nodes": [ { "impact": "serious", "html": "<div class=\"cell-output-display\">", "target": [".cell-output-display"], "failureSummary": "Fix any of the following:\n Element should have focusable content\n Element should be focusable" } ] }Group the scrollable-region labels with the other accessible names
Make overflowing code and output keyboard-accessible (quarto-dev#14816)