[Sync to prerelease] Accessibility fixes for the gallery page#2098
Merged
Conversation
* fix(gallery): give card images alt text for accessible link names Gallery cards are image-only links; they used the (empty) tile.description as alt, so each link had no accessible name (axe link-name, WCAG 2.4.4 / 4.1.2 — ~89 across the page). Add per-entry alt: to gallery.yml and fall back in gallery.ejs to the alt (or title + subtitle) instead of description. * fix(gallery): alt text for carousel images and a real page heading Remaining axe findings on the gallery page beyond the card links: - carousel images had no alt (image-alt, WCAG 1.1.1) and their wrapping links had no accessible name (link-name, 2.4.4/4.1.2). Add alt: per item in carousel.yml (reusing the gallery's descriptions where the image is shared) and pass it through carousel.R. - the 'Gallery' title was a styled div, so the page had no level-one heading (page-has-heading-one). Give it role=heading aria-level=1 — a markdown/HTML h1 gets promoted into the hidden title-block header here. Rebuilds the gallery freeze (carousel is executed R); no axe in the freeze. Verified with the axe checker: image-alt, link-name, page-has-heading-one all clear on the gallery page. (cherry picked from commit fddcebf)
Member
|
/deploy-preview |
Contributor
Author
📝 Preview Deployment🔍 Full site preview: https://deploy-preview-2098.quarto.org 🔄 Modified Documents
|
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 #2097 to
prerelease.Original PR
Accessibility fixes for the gallery page
Fixes accessibility (axe-core) violations on the gallery page.
Changes
link-name, WCAG 2.4.4 / 4.1.2). The gallery cards are image-only links that used an emptydescriptionasalt. Added per-entryalt:togallery.ymland updatedgallery.ejsto fall back toalt(or title/subtitle) instead ofdescription.image-alt, WCAG 1.1.1) and their wrapping links had no accessible name (link-name). Addedalt:per item incarousel.yml(reusing the gallery's descriptions where the image is shared) and threaded it throughcarousel.R.page-has-heading-one). The "Gallery" title was a styleddiv; gave itrole="heading" aria-level="1". A markdown heading /<h1>gets promoted into the page's hidden title-block header, so an ARIA heading keeps it both visible and semantic.Includes the rebuilt
_freezefor the gallery page (the carousel is executed R).Verification
Checked with axe-core across desktop/mobile × light/dark —
image-alt,link-name, andpage-has-heading-oneall clear on the page. The remainingaria-allowed-roleon the navbar toggler is site-wide navbar chrome, not gallery-specific.Draft while the approach is reviewed.