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
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:
parent
e04d0bb283
commit
9fe59d4867
18 changed files with 399 additions and 2 deletions
|
|
@ -26,9 +26,14 @@ nav{padding:16px 24px;border-bottom:1px solid var(--border);display:flex;align-i
|
|||
.btn-secondary{border:1px solid var(--border);color:var(--text-secondary)}
|
||||
.btn-secondary:hover{border-color:var(--primary);color:var(--text)}
|
||||
footer{padding:24px;text-align:center;color:var(--text-secondary);font-size:.8rem;border-top:1px solid var(--border)}
|
||||
|
||||
.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>
|
||||
<a href="/" class="logo">📸 SnapAPI</a>
|
||||
<div class="nav-links">
|
||||
|
|
@ -37,7 +42,8 @@ footer{padding:24px;text-align:center;color:var(--text-secondary);font-size:.8re
|
|||
<a href="/#pricing">Pricing</a>
|
||||
</div>
|
||||
</nav>
|
||||
<main class="content">
|
||||
</header>
|
||||
<main id="main-content" class="content">
|
||||
<div>
|
||||
<div class="error-code">404</div>
|
||||
<h1 class="error-title">Page Not Found</h1>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue