From a380d7e7fa010c8aa257b7bc144760d0497bb2f4 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 +++++++++++++++++++++- index.php | 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 68a09b1..ccb748d 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/index.php b/index.php index 7c2b817..146ca19 100644 --- a/index.php +++ b/index.php @@ -186,7 +186,8 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') { -