Accessibility fixes: nav link label, code-block contrast, footer link name#2095
Merged
Conversation
Contributor
📝 Preview Deployment🔍 Full site preview: https://deploy-preview-2095.quarto.org |
Contributor
|
Successfully created backport PR for |
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
1 participant
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.
Three independent accessibility fixes surfaced by an axe-core audit of the rendered site.
1. Add
aria-labelto the external-link icon on the nav "Blog" link (498cad3)The Blog navbar entry links out to the Posit blog with an external-link icon; the icon had no accessible text. Adds an
aria-labelso assistive tech announces it.2. Light-mode code-block background for contrast (
af1b20c)The site uses
a11ysyntax highlighting, whose token colors are tuned for the theme's own near-white background. Quarto's default code-block background is a semi-transparent gray that, over shaded sections, composited down to#eceef1and dropped the orange attribute token (#a55a00) to 4.44:1 — below WCAG AA (4.5:1).Fix pins
$code-block-bgto#eff2f5— the darkest tint of the site's cosmo blue-gray that keeps every a11y-light token ≥ 4.5:1 (the binding constraint is the red keyword#d91e18). Because WCAG contrast depends on luminance only, this stays pale regardless of hue. Dark mode was checked and already passes comfortably (7–13:1), so it's untouched.3. Fix empty footer link (
53b2924) —link-name, seriousThe footer had two separate links to
posit.co, one per theme (light/dark logo). Because the off-theme logo isdisplay:none, itsaltdidn't count toward the link's accessible name, leaving an empty focusable link in the tab order (fires in dark mode; would fire in light for the other link). Merged into a single link wrapping both logos, so exactly one visible, alt-bearing image names the link in either theme. Verified the accessible name resolves to "Posit" in dark mode.Screenshots — light-mode code block (fix #2)