openclawd/SnapAPI
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
Details

Browse source 
- 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
Download patch file Download diff file Expand all files Collapse all files

10
public/use-cases/pdf-reports.html
View file

@ -86,9 +86,14 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
.nav-mobile{display:block}
.footer-grid{grid-template-columns:1fr}
}
.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>
@ -102,6 +107,9 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
<button class="nav-mobile" onclick="document.querySelector('.nav-links').classList.toggle('show')" aria-label="Menu">☰</button>
</div>
</nav>
</header>
<main id="main-content">
<article class="article">
<div class="container">
@ -188,6 +196,8 @@ convert thumbnail.webp -resize 400x250 thumbnail-sm.webp</pre></div>
</div>
</article>
</main>
<footer>
<div class="footer-grid">
<div class="footer-brand"><h4>📸 SnapAPI</h4><p>The EU-hosted screenshot API for developers. Convert any URL to a pixel-perfect image with a simple API call.</p></div>

10
public/use-cases/social-media-previews.html
View file

@ -86,9 +86,14 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
.nav-mobile{display:block}
.footer-grid{grid-template-columns:1fr}
}
.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>
@ -102,6 +107,9 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
<button class="nav-mobile" onclick="document.querySelector('.nav-links').classList.toggle('show')" aria-label="Menu">☰</button>
</div>
</nav>
</header>
<main id="main-content">
<article class="article">
<div class="container">
@ -177,6 +185,8 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
</div>
</article>
</main>
<footer>
<div class="footer-grid">
<div class="footer-brand"><h4>📸 SnapAPI</h4><p>The EU-hosted screenshot API for developers. Convert any URL to a pixel-perfect image with a simple API call.</p></div>

10
public/use-cases/website-monitoring.html
View file

@ -86,9 +86,14 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
.nav-mobile{display:block}
.footer-grid{grid-template-columns:1fr}
}
.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>
@ -102,6 +107,9 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
<button class="nav-mobile" onclick="document.querySelector('.nav-links').classList.toggle('show')" aria-label="Menu">☰</button>
</div>
</nav>
</header>
<main id="main-content">
<article class="article">
<div class="container">
@ -194,6 +202,8 @@ curl -X POST https://snapapi.eu/v1/screenshot \
</div>
</article>
</main>
<footer>
<div class="footer-grid">
<div class="footer-brand"><h4>📸 SnapAPI</h4><p>The EU-hosted screenshot API for developers. Convert any URL to a pixel-perfect image with a simple API call.</p></div>