Accessible by design
This blog meets WCAG 2.1 Level AA, verified with axe-core across 8 pages. Zero violations.
Who benefits
real accessibility for real people
Screen readers
Correct HTML semantics, ARIA roles and labels, focus managed after every navigation. Compatible with VoiceOver and NVDA.
Keyboard only
The entire interface is operable with Tab, Shift+Tab, Enter and Space. Skip link available. Focus always visible.
Low vision
Minimum 4.5:1 contrast throughout. 44×44px touch targets. No information conveyed by color alone.
Color blindness
States and information never rely solely on color — always paired with text, icons or pattern.
What AA guarantees
the four WCAG principles
Perceivable
4.5:1 contrast, descriptive alt text, semantic HTML structure.
Operable
Full keyboard navigation, visible focus, 44×44px touch targets.
Understandable
Language declared, forms with clear error messages, consistent navigation across pages.
Robust
Semantic HTML, correct ARIA, verified with axe-core + Playwright.
What we implemented
12 technical requirements
- Skip to content visible on focus
- Visible focus: 3px ring, 3px offset, ≥3:1 contrast
- Scroll padding top for fixed nav (WCAG 2.4.12)
- prefers-reduced-motion supported (MotionToggle)
- Stretched links — single link per card
- Semantic HTML: nav, main, header, footer, article
- ARIA: labels, roles, aria-current, aria-expanded
- Descriptive alt text on all images
- Forms: labels, error messages, accessible honeypot
- Language declared: lang attribute + hreflang ES/EN
- Verified contrast: 4.5:1 normal text, 3:1 UI
- Dialog with programmatic aria-label
Verified contrast
real color pairs from the site
| Light mode | Dark mode | |
|---|---|---|
| Body text | Aa 18.1:1 Passes AA | Aa 15.8:1 Passes AA |
| Accent / links | Aa 5.3:1 Passes AA | Aa 7.2:1 Passes AA |
| Secondary text | Aa 4.7:1 Passes AA | Aa 5.9:1 Passes AA |
Verified pages
8 routes · 0 violations each
-
/
Home
-
/blog
Blog
-
/work
Work
-
/cv
CV
-
/en
Home
-
/en/blog
Blog
-
/en/work
Work
-
/en/cv
CV
How we verify it
axe-core + playwright
Automated verification with axe-core v4 via Playwright against a local production build.
$ npm run test:a11y:axe