From 9fe59d4867babe07e71bf8e36adcdfcb1d701354 Mon Sep 17 00:00:00 2001 From: Hoid Date: Tue, 3 Mar 2026 15:04:55 +0100 Subject: [PATCH] feat: add WCAG 2.1 AA accessibility landmarks and skip-to-content link - Wrap nav in
landmark on all pages - Wrap content in
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 --- public/404.html | 8 +- public/blog.html | 10 + public/blog/screenshot-api-performance.html | 10 + public/blog/why-screenshot-api.html | 10 + public/changelog.html | 10 + public/compare.html | 10 + public/guides/quick-start.html | 10 + public/impressum.html | 10 + public/index.html | 10 + public/pricing.html | 10 + public/privacy.html | 10 + public/terms.html | 10 + public/usage.html | 8 +- public/use-cases/pdf-reports.html | 10 + public/use-cases/social-media-previews.html | 10 + public/use-cases/website-monitoring.html | 10 + src/routes/__tests__/accessibility.test.ts | 46 +++++ src/services/__tests__/browser.test.ts | 199 ++++++++++++++++++++ 18 files changed, 399 insertions(+), 2 deletions(-) create mode 100644 src/routes/__tests__/accessibility.test.ts create mode 100644 src/services/__tests__/browser.test.ts diff --git a/public/404.html b/public/404.html index b3c5ade..6dc30ad 100644 --- a/public/404.html +++ b/public/404.html @@ -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} + +
-
+
+
404

Page Not Found

diff --git a/public/blog.html b/public/blog.html index 09866ce..4851054 100644 --- a/public/blog.html +++ b/public/blog.html @@ -60,10 +60,15 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var( .footer-col a:hover{color:var(--text)} .footer-bottom{max-width:1180px;margin:0 auto;padding-top:24px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:.8rem;color:var(--muted)} @media(max-width:768px){.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} + +
+
+ +
@@ -101,6 +109,8 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
+
+
diff --git a/public/blog/screenshot-api-performance.html b/public/blog/screenshot-api-performance.html index 71f412d..837362c 100644 --- a/public/blog/screenshot-api-performance.html +++ b/public/blog/screenshot-api-performance.html @@ -65,10 +65,15 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var( .footer-col a:hover{color:var(--text)} .footer-bottom{max-width:1180px;margin:0 auto;padding-top:24px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:.8rem;color:var(--muted)} @media(max-width:768px){.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} + +
+
+ +
Home / Blog / Screenshot API Performance
@@ -165,6 +173,8 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
+
+
diff --git a/public/blog/why-screenshot-api.html b/public/blog/why-screenshot-api.html index 90597a9..ff6be72 100644 --- a/public/blog/why-screenshot-api.html +++ b/public/blog/why-screenshot-api.html @@ -65,10 +65,15 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var( .footer-col a:hover{color:var(--text)} .footer-bottom{max-width:1180px;margin:0 auto;padding-top:24px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:.8rem;color:var(--muted)} @media(max-width:768px){.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} + +
+
+ +
Home / Blog / Why You Need a Screenshot API
@@ -181,6 +189,8 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
+
+
diff --git a/public/changelog.html b/public/changelog.html index fd7018f..991b815 100644 --- a/public/changelog.html +++ b/public/changelog.html @@ -90,9 +90,14 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var( .nav-links.show{display:flex} .nav-mobile{display:block} } + +.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} + +
+
+ +
@@ -220,6 +228,8 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
+ +

📸 SnapAPI

The EU-hosted screenshot API for developers. Convert any URL to a pixel-perfect image with a simple API call.

diff --git a/public/compare.html b/public/compare.html index 3fe5301..6ee3091 100644 --- a/public/compare.html +++ b/public/compare.html @@ -89,9 +89,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} + +
+
+ +
@@ -195,6 +203,8 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
+
+

📸 SnapAPI

The EU-hosted screenshot API for developers. Convert any URL to a pixel-perfect image with a simple API call.

diff --git a/public/guides/quick-start.html b/public/guides/quick-start.html index f27e6ce..4f11bf7 100644 --- a/public/guides/quick-start.html +++ b/public/guides/quick-start.html @@ -88,9 +88,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} + +
+
+ +
@@ -203,6 +211,8 @@ screenshot = client.take(
+
+

📸 SnapAPI

The EU-hosted screenshot API for developers. Convert any URL to a pixel-perfect image with a simple API call.

diff --git a/public/impressum.html b/public/impressum.html index 8872189..4472001 100644 --- a/public/impressum.html +++ b/public/impressum.html @@ -69,10 +69,15 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var( .footer-grid{grid-template-columns:1fr} .nav-links{display:none} } + +.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} + +
+
+ +
@@ -141,6 +149,8 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
+
+