feat: add WCAG 2.1 AA accessibility landmarks and skip-to-content link
Some checks failed
Build & Deploy to Staging / Build & Deploy to Staging (push) Has been cancelled

- Wrap nav in <header> landmark on all pages
- Wrap content in <main id='main-content'> on all pages
- Add skip-to-content link (visually hidden, visible on focus)
- Add skip-link CSS styles
- Add 65 accessibility tests covering all 16 full-layout pages
- All 288 tests passing
This commit is contained in:
Hoid 2026-03-03 15:04:55 +01:00
parent e04d0bb283
commit 9fe59d4867
18 changed files with 399 additions and 2 deletions

View file

@ -59,9 +59,14 @@ button:disabled{opacity:.5;cursor:not-allowed}
.error-msg{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);border-radius:10px;padding:14px 18px;color:var(--red);font-size:.9rem;margin-bottom:16px;display:none}
footer{border-top:1px solid var(--border);padding:24px;text-align:center;font-size:.8rem;color:var(--muted);margin-top:auto}
@media(max-width:480px){.stats{grid-template-columns:1fr}.input-row{flex-direction:column}}
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:12px 24px;border-radius:0 0 8px 8px;font-weight:600;font-size:.9rem;z-index:1000;transition:top .2s}
.skip-link:focus{top:0}
</style>
</head>
<body>
<a href="#main-content" class="skip-link">Skip to content</a>
<header>
<nav><div class="nav-inner">
<a href="/" class="nav-logo">📸 <span>SnapAPI</span></a>
<div class="nav-links">
@ -69,8 +74,9 @@ footer{border-top:1px solid var(--border);padding:24px;text-align:center;font-si
<a href="/docs">API Docs</a>
</div>
</div></nav>
</header>
<main>
<main id="main-content">
<h1>Usage Dashboard</h1>
<p class="subtitle">Check your API usage for the current billing month.</p>