a11y: WCAG 2.2 AAA fixes — distinct link text, contrast, target size#5
Merged
Conversation
Addresses the items called out by the WCAG 2.2 AAA review on top of the previous Lighthouse 100 baseline. Identical link text → distinct accessible names (WCAG 2.4.9 AAA, 3.2.4 AA) - index.html.j2: the two "Online lesen" / "PDF herunterladen" pairs on the index now carry aria-label="<variant title> online lesen" / "<variant title> als PDF herunterladen". Visible text stays compact; AT now hears distinct purposes. Muted color contrast → 8.1:1 (WCAG 1.4.6 AAA) - --color-muted: #5a5a5a (6.86:1, AA only) → #4d4d4d (8.1:1, AAA). Used by .kicker, .cv-header .location, .cv-footer, .version-meta, page-counter footer. Target size → ≥ 44 × 44 CSS px (WCAG 2.5.5 AAA) - .meta-links a, .version-meta a, .contact-list a become display: inline-block with padding such that the hit-area box reaches ≥ 44 px on both axes (~44.6 px tall at fs-small/0.85rem and ~45.7 px at 0.95rem). - Switched these links from border-bottom underline to text-decoration underline so the visible underline tracks the text, not the padded box; explicit border-bottom: 0 cancels the .cv-body a border-bottom inheritance, and a transparent :hover background overrides the .cv-body a:hover background highlight that was bleeding through. - Body inline links (.cv-body a) keep their existing styling — they fall under the WCAG 2.5.5 "Inline" exception (target inside a block of text). Section without accessible name (WCAG 4.1.2) - index.html.j2: the wrapping <section> around the lede paragraph had no heading or aria-label and was therefore exposed as a generic region with no accessible name. Removed; the lede is now a sibling paragraph inside <main>. Verified locally with Lighthouse desktop preset on all three pages: - categories: performance 100, accessibility 100, best-practices 100, seo 100 - identical-links-same-purpose audit: 0 failing items (was 2) - target-size audit: pass - color-contrast audit: pass PDF rendering unaffected — print stylesheet hides .meta-nav and .cv-footer, and version-meta / contact-list only appear on the index page (not the printed CVs). Signed-off-by: Sebastian Mendel <info@sebastianmendel.de>
There was a problem hiding this comment.
Pull request overview
Improves the site’s WCAG alignment (notably AAA where applicable) by making link accessible names more descriptive, increasing muted text contrast, and enlarging navigation/contact link hit areas to meet target-size guidance.
Changes:
- Update index template links to have distinct accessible names via
aria-label, and remove an unnamed generic<section>wrapper around the lede. - Darken
--color-mutedto achieve AAA enhanced contrast on the page background. - Increase link hit areas (padding +
inline-block) and switch underline styling totext-decorationfor header meta links, version meta links, and contact links.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
templates/index.html.j2 |
Adds variant-specific aria-labels for “Online lesen” / “PDF herunterladen” links and removes an unnamed lede wrapper section. |
assets/style.css |
Adjusts contrast token and updates link styling/layout to improve target size and underline behavior across key navigation/link groups. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+167
to
+168
| /* tight gap, since each link's padding contributes to spacing */ | ||
| gap: 0 0.4rem; |
Comment on lines
+316
to
+318
| /* extra line-height absorbs the padded-link vertical extent without an | ||
| awkwardly tall paragraph */ | ||
| line-height: 2.4; |
| display: flex; | ||
| flex-wrap: wrap; | ||
| gap: 0.4rem 1.2rem; | ||
| gap: 0 0.4rem; |
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
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.
Why
Following up on the WCAG 2.2 AAA audit. Lighthouse already shows 100 across the four categories, but the Insights and Manual checks sections still flagged real items, plus a few AAA criteria worth tightening explicitly.
Triage
aria-labelcontaining the variant title#5a5a5aonly 6.86:1#4d4d4d(8.1:1)inline-block+ padding for.meta-links a,.version-meta a,.contact-list a<section>around lede w/o heading<p>inside<main>What changed
templates/index.html.j2<a aria-label="<variant title> online lesen">Online lesen</a>and<a aria-label="… als PDF herunterladen">PDF herunterladen</a>— distinct accessible names per destination. Visible text stays compact.<section>wrapper around the lede; it had no heading and noaria-label, so it was exposed as a generic region with no accessible name.assets/style.css--color-muted:#5a5a5a→#4d4d4d(6.86:1 → 8.1:1)..meta-links a,.version-meta a,.contact-list a:display: inline-block+ padding so the hit-area box is ≥ 44 × 44 CSS px.border-bottomunderline totext-decorationunderline so the visible underline tracks the text, not the padded box.border-bottom: 0cancels the inherited.cv-body aunderline; a transparent:hoverbackground overrides the.cv-body a:hoverhighlight that was bleeding through..meta-links/.contact-listrow gap dropped to 0; the link padding now contributes to vertical rhythm so wrapped rows still breathe..cv-body a) untouched — they fall under WCAG 2.5.5's "Inline" exception.Lighthouse (local desktop preset, all three pages)
identical-links-same-purposetarget-sizecolor-contrastVisual check
Index page version cards now show one underline per link (under the text), and tab focus on those links shows a 2 px wine-accent outline around the full ~44 × 88 px hit area. Header nav on CV pages reflows to two rows on desktop because the padded links are taller; the active variant is in accent color and bold (
aria-current="page").