From 9e146ac1ebd86aa93dab793a0f24cbcb98ca4441 Mon Sep 17 00:00:00 2001 From: Claw AI Date: Wed, 13 May 2026 23:13:00 +0000 Subject: [PATCH] feat(a11y): ARIA labels, focus management, skip-nav, keyboard nav, contrast fix Accessibility improvements per WCAG 2.1 AA: - Skip-to-content link (TA-1) - ARIA landmarks and roles for nav, main, sections, footer (TA-2) - Accordion keyboard navigation + aria-expanded (TA-3) - Lightbox focus trap + focus management + dialog role (TA-4) - Gallery grid items keyboard accessible (TA-5) - Improved alt texts for all images (TA-6) - Focus-visible styles for all interactive elements (TA-7) - Darker --stone color for WCAG AA contrast compliance (TA-8) Fix #18 --- css/haus-schleusingen.css | 50 +++++++++++++++++++++- haus-schleusingen.html | 83 +++++++++++++++++++----------------- js/haus-schleusingen.js | 90 +++++++++++++++++++++++++++++++++------ 3 files changed, 170 insertions(+), 53 deletions(-) diff --git a/css/haus-schleusingen.css b/css/haus-schleusingen.css index 865fa87..8c12668 100644 --- a/css/haus-schleusingen.css +++ b/css/haus-schleusingen.css @@ -1,7 +1,55 @@ +/* SKIP LINK */ +.skip-link { + position: absolute; + left: -9999px; + top: 0; + background: var(--accent); + color: var(--white); + padding: 0.75rem 1.5rem; + font-size: 0.85rem; + font-weight: 500; + z-index: 200; + text-decoration: none; + transition: none; +} + +.skip-link:focus { + left: 0; + outline: 2px solid var(--white); + outline-offset: 2px; +} + +/* FOCUS VISIBLE */ +*:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; +} + +.lightbox-close:focus-visible { + outline: 2px solid var(--white); + outline-offset: 2px; +} + +button:focus-visible, +a:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; +} + +.grid-item:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; +} + +.floor-header:focus-visible { + outline: 2px solid var(--accent); + outline-offset: -2px; +} + :root { --cream: #f5f0e8; --warm: #e8dfd0; - --stone: #9e9485; + --stone: #7a7062; --dark: #1c1a17; --charcoal: #2e2b26; --accent: #8b6914; diff --git a/haus-schleusingen.html b/haus-schleusingen.html index 7ecedfc..fd51db5 100644 --- a/haus-schleusingen.html +++ b/haus-schleusingen.html @@ -9,7 +9,8 @@ -