From d4392589c57d7b47c9488161efd744ea1910df3e Mon Sep 17 00:00:00 2001 From: Sebastian Mendel Date: Sun, 10 May 2026 17:37:13 +0200 Subject: [PATCH] =?UTF-8?q?a11y:=20WCAG=202.2=20AAA=20fixes=20=E2=80=94=20?= =?UTF-8?q?distinct=20link=20text,=20contrast,=20target=20size?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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=" online lesen" / " 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
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
. 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 --- assets/style.css | 62 +++++++++++++++++++++++++++++++++-------- templates/index.html.j2 | 10 ++++--- 2 files changed, 56 insertions(+), 16 deletions(-) diff --git a/assets/style.css b/assets/style.css index 59b662c..0b70381 100644 --- a/assets/style.css +++ b/assets/style.css @@ -46,9 +46,9 @@ Roboto, "Helvetica Neue", sans-serif; --color-page: #fbfaf6; - --color-text: #1a1a1a; /* > 16:1 on page */ - --color-muted: #5a5a5a; /* > 7:1 on page */ - --color-accent: #7d2d3a; /* deep wine, > 5.7:1 on page */ + --color-text: #1a1a1a; /* 16.7:1 on page (AAA 1.4.6) */ + --color-muted: #4d4d4d; /* 8.1:1 on page (AAA 1.4.6) — was #5a5a5a (6.86:1, AA only) */ + --color-accent: #7d2d3a; /* 10.7:1 on page (AAA 1.4.6) */ --color-rule: rgba(0, 0, 0, 0.10); --color-rule-bold: rgba(0, 0, 0, 0.18); --color-link-underline: rgba(125, 45, 58, 0.45); @@ -164,20 +164,30 @@ body { margin: 0; display: flex; flex-wrap: wrap; - gap: 0.4rem 1rem; + /* tight gap, since each link's padding contributes to spacing */ + gap: 0 0.4rem; font-family: var(--sans); font-size: var(--fs-small); } +/* WCAG 2.5.5 AAA Target Size (44 CSS px). At fs-small (0.85rem ≈ 15.3 px) + with line-height 1.62, the inline-block hit area is 0.55rem × 2 padding + plus a ~24.8 px line box → ~44.6 px tall; horizontal padding plus the + reduced container gap puts the hit area comfortably above 44 px wide. */ .meta-links a { + display: inline-block; + padding: 0.55rem 0.4rem; + border-radius: 4px; color: var(--color-text); - text-decoration: none; - border-bottom: 1px solid var(--color-link-underline); - padding-bottom: 1px; + text-decoration: underline; + text-decoration-color: var(--color-link-underline); + text-decoration-thickness: 1px; + text-underline-offset: 0.2em; } .meta-links a[aria-current="page"] { color: var(--color-accent); font-weight: 600; + text-decoration-color: currentColor; } /* -------- Body -------- */ @@ -303,11 +313,27 @@ body { font-size: var(--fs-small); color: var(--color-muted); margin: 0.4rem 0 0; + /* extra line-height absorbs the padded-link vertical extent without an + awkwardly tall paragraph */ + line-height: 2.4; } +/* WCAG 2.5.5 AAA Target Size — see comment on .meta-links a. + border-bottom: 0 cancels the .cv-body a underline so only the + text-decoration line (which tracks the text, not the padded box) shows. */ .version-meta a { + display: inline-block; + padding: 0.55rem 0.4rem; + border-radius: 4px; + border-bottom: 0; color: var(--color-muted); - text-decoration: none; - border-bottom: 1px solid var(--color-rule-bold); + text-decoration: underline; + text-decoration-color: var(--color-rule-bold); + text-decoration-thickness: 1px; + text-underline-offset: 0.2em; +} +.version-meta a:hover, +.version-meta a:focus { + background: rgba(0, 0, 0, 0); /* override .cv-body a:hover background */ } .contact-list { @@ -316,14 +342,26 @@ body { margin: 0; display: flex; flex-wrap: wrap; - gap: 0.4rem 1.2rem; + gap: 0 0.4rem; font-family: var(--sans); font-size: 0.95rem; } +/* WCAG 2.5.5 AAA Target Size — at 0.95rem font-size with line-height 1.62 + the line-box is ~27.7 px; padding 0.5rem each side gives ~45.7 px tall. */ .contact-list a { + display: inline-block; + padding: 0.5rem 0.4rem; + border-radius: 4px; + border-bottom: 0; /* override .cv-body a's border-bottom */ color: var(--color-text); - text-decoration: none; - border-bottom: 1px solid var(--color-link-underline); + text-decoration: underline; + text-decoration-color: var(--color-link-underline); + text-decoration-thickness: 1px; + text-underline-offset: 0.2em; +} +.contact-list a:hover, +.contact-list a:focus { + background: rgba(0, 0, 0, 0); } /* -------- Focus, accessibility -------- */ diff --git a/templates/index.html.j2 b/templates/index.html.j2 index b57160d..127a03c 100644 --- a/templates/index.html.j2 +++ b/templates/index.html.j2 @@ -9,9 +9,7 @@
-
-

{{ lede }}

-
+

{{ lede }}

Versionen

@@ -20,8 +18,12 @@

  • {{ v.title }}

    {{ v.description }}

    + {# Each link's accessible name includes the variant title so the + two "Online lesen" / "PDF herunterladen" pairs do not have + identical link text — WCAG 2.4.9 AAA Link Purpose (Link Only), + WCAG 3.2.4 AA Consistent Identification. #}

    - Online lesen · + Online lesen · PDF herunterladen