[Sync to prerelease] Fix accessibility defects in the tool chooser tab strips - #2193
Open
github-actions[bot] wants to merge 1 commit into
Open
github-actions[bot] wants to merge 1 commit into
github-actions[bot] wants to merge 1 commit into
Conversation
* Add alt="" to decorative logo images in tool chooser strips 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). * Stop claiming tool chooser strips are ARIA tabs 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). (cherry picked from commit 0f0bd44)
Member
|
/deploy-preview |
3 tasks
Contributor
Author
📝 Preview Deployment🔍 Full site preview: https://deploy-preview-2193.quarto.org |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Sync of #2192 to
prerelease.Original PR
Fix accessibility defects in the tool chooser tab strips
Summary
Two defects in the three hand-written tool chooser strips (get-started, manuscripts, extensions):
altattribute. Each image sits next to link text that already names the tool, soalt=""marks it as decorative. Fixes axeimage-alt(WCAG 2.2 1.1.1, Level A).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 addedaria-current="page"to the active link. Fixes axearia-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
localStoragestill holds the choice