Accessibility

How this site treats every visitor.

Accessibility isn't a checklist on this site — it's the design constraint that shaped most decisions. Below are six notes on the craft, followed by a formal conformance statement.

— 01 —

Color & contrast

Every text/background pair on the site is measured against WCAG 2.2 AA. Body text clears 7:1 (AAA) in both themes, and the muted-text utility never carries information that's lost without colour.

Ink on Paper · light body15.5:1 · AAA
Ink on Paper · dark body14.8:1 · AAA
Moss on Paper · light link8.8:1 · AAA
Moss on Paper · dark link8.1:1 · AAA

— 02 —

Keyboard navigation

The whole site is reachable and operable from a keyboard alone. Visible focus is mandatory, not optional — every interactive element shares the same focus ring, defined once in the design system as bk-focusable.

Try it: press Tab from the top of this page. The first focusable element is Skip to content — a hidden link that lets keyboard users bypass the SiteNav and jump straight to the main content.

Every link, button, and toggle on the site uses the same focus-visible outline (2px moss, 2px offset). Hover styles are aesthetic; focus styles are functional and never suppressed.

No known keyboard traps. Modal-style components (none currently) would require explicit focus-trap rules.

— 03 —

ARIA

Native HTML semantics first. ARIA only when HTML can't say it. Every attribute below earns its place — none of them duplicate what the browser already understands.

Used	Avoided
`aria-current="page"` on the active nav link	`role="button"` on real `<button>` elements
`aria-hidden="true"` on decorative SVGs and arrow glyphs	Wrapping landmarks in extra `role` attributes
`aria-label` on icon-only buttons (theme toggle, menu, logo link)	`aria-live` regions for static content
`aria-expanded` on the mobile-menu trigger	Hand-rolled tab/menu widgets when a native pattern exists

One labelled <nav> per landmark when multiple navigation regions exist on the same page.

— 04 —

Motion & reduced motion

The reveal animations across this site are a finishing touch, never a requirement. Users who set prefers-reduced-motion: reduce get none of them — content appears in its final state immediately, and every transition site-wide collapses to near zero.

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

Hover and focus transitions remain functionally instant (≤10ms under reduced motion) — no vestibular triggers, but the focus ring still draws cleanly.

— 05 —

Screen reader specifics

The experience for a screen-reader user should match the experience for a sighted one — no more, no less. Three patterns do most of the work.

Decorative

The arrow glyph next to email and button CTAs — visual only, hidden from assistive tech.

<span aria-hidden>↗</span>

Meaningful

The logo mark composes its visual parts but exposes a single labelled role to assistive tech.

<span role="img" aria-label="bekaert.dev"><span aria-hidden>…</span></span>

Icon-only

Theme toggle: visible icon, accessible name supplied via aria-label and current state via aria-pressed.

<button aria-label="Toggle theme" aria-pressed={isDark}>…</button>

The root <html lang="en"> attribute and per-page document titles let assistive tech announce the right voice and context from the first frame.

— 06 —

Performance as accessibility

A slow page is an inaccessible page. Three habits keep this site fast on the connections and devices that actually matter.

01
Core Web Vitals targets
LCP under 2.5s, INP under 200ms, CLS under 0.1. Monitored continuously, not audited at release.
02
Fluid typography
No horizontal scroll at 200% zoom, on any breakpoint. Layout uses clamp() for type and spacing instead of breakpoint jumps.
03
Font loading
System-stack fallback while custom fonts load — font-display: swap via next/font/google. No FOIT, no blocking.

Real-world performance is measured via Vercel Speed Insights — the only telemetry collected. See Privacy for what that means.

Conformance statement

Where this site stands.

Standard: WCAG 2.2 Level AA, EN 301 549, Référentiel général d'amélioration de l'accessibilité (RGAA) where applicable.
Status: Substantially conformant. Audited 29 April 2026 via accessibilitychecker.org: 95% score, 0 critical issues, 42 automated checks passed, 22 items reviewed manually.
Known issues: None currently reported.
Method: Self-assessment combining automated tooling (accessibilitychecker.org, Lighthouse, axe DevTools) with manual keyboard, screen-reader, and zoom verification.
Prepared: 29 April 2026.
Last reviewed: 29 April 2026.
Feedback: Email thomas@bekaert.dev for any accessibility report — I respond within 30 days.