feat(a11y): ARIA labels, focus management, skip-nav, keyboard nav, contrast fix
All checks were successful
Deploy Feature Branch to Test / deploy (push) Successful in 23s

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
This commit is contained in:
Claw AI
2026-05-13 23:13:00 +00:00
committed by greggy
parent d609175b3c
commit 8b73603293
3 changed files with 181 additions and 41 deletions

View File

@@ -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;