Skip to content

Fix accessibility defects in the tool chooser tab strips - #2192

Merged
cwickham merged 2 commits into
mainfrom
fix/tool-chooser-alt
Sep 21, 2026
Merged

cwickham merged 2 commits into
mainfrom
fix/tool-chooser-alt

Conversation

@cwickham

Copy link
Copy Markdown
Member

Summary

Two defects in the three hand-written tool chooser strips (get-started, manuscripts, extensions):

  • Six logo images had no alt attribute. Each image sits next to link text that already names the tool, so alt="" marks it as decorative. Fixes axe image-alt (WCAG 2.2 1.1.1, Level A).
  • The strips carried role="tablist", but the children are page-navigation links, not ARIA tabs. Removed the tab roles, wrapped each list in a <nav> with an accessible name, moved a stray <h3> out of a <ul>, and added aria-current="page" to the active link. Fixes axe aria-required-children (WCAG 2.2 1.3.1, Level A, critical impact).

Also added aria-hidden="true" to the decorative Bootstrap icons in the extensions listing chooser, while touching that markup.

Test plan

  • Rendered affected pages and confirmed the tab strips look the same
  • Ran axe against one page per family; both signatures are gone, no new violations
  • Clicked through two tutorial pages; the active tab still latches and localStorage still holds the choice

The logo images sit inside links whose visible text already names the
tool (e.g. "Positron", "VS Code"), so a description would duplicate it
for screen readers. An empty alt marks them as decorative.

Fixes axe image-alt findings across 21 get-started/manuscripts pages.
WCAG 2.2 1.1.1 Non-text Content (Level A).
These are page-navigation links styled as tabs, not the ARIA tabs
pattern (their children don't switch panels in place). role="tablist"
required role="tab" children, which they never had — and role=tablist
required a <ul> to hold only <li>, but each strip's <ul> had a
directly-nested <h3>, which is invalid regardless of ARIA.

- Drop role="tablist"/"presentation"; the visual nav/nav-tabs/nav-link
  styling is untouched.
- Wrap each list in a <nav> with an accessible name.
- Move the get-started heading out of the <ul>, above it.
- Set aria-current="page" alongside the active class so assistive tech
  gets the same signal sighted users get from the styling.
- Mark the extensions listing chooser's decorative Bootstrap icons
  aria-hidden="true" while touching this markup.

Fixes axe aria-required-children findings across get-started,
manuscripts, and extensions pages. WCAG 2.2 1.3.1 Info and
Relationships (Level A).
@github-actions

Copy link
Copy Markdown
Contributor

📝 Preview Deployment

🔍 Full site preview: https://deploy-preview-2192.quarto.org

@cwickham
cwickham marked this pull request as ready for review September 21, 2026 21:44
@cwickham
cwickham merged commit 0f0bd44 into main Sep 21, 2026
3 checks passed
@cwickham
cwickham deleted the fix/tool-chooser-alt branch September 21, 2026 21:44
@github-actions

Copy link
Copy Markdown
Contributor

Successfully created backport PR for prerelease:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant