The Alchemist's Accessibility Ledger

/accessibility

What this site targets, how it's checked, and what's still imperfect

Target & Method

This site targets WCAG 2.2 Level AA. That is a deliberate choice, not a vague aspiration: a themed, decorative, RPG-styled personal site can pass a real accessibility bar without flattening the decoration into a generic gray box, and this page exists to show the receipts rather than just assert it.

The fantasy skin stays on purpose. Where WCAG carves out an exemption for pure decoration or a logotype, it's used deliberately and audited — a color/border-color/fill usage manifest (committed to the repository) tracks every themed palette token and asserts, by script, that anything rendering real body text or a meaning-bearing boundary resolves to a token measured ≥4.5:1 (text) or ≥3:1 (non-text boundaries) — not by eye, and not rounded.

What's automated

  • A palette contrast test asserts every themed “ink” token clears WCAG's contrast minimums against the site's declared backgrounds, and that the HP/MP/ST/EXP stat-bar boundary and rarity chips carry a real text label rather than color alone.
  • A motion lint fails the build if any animation loops forever while auto-starting alongside other page content (WCAG 2.2.2) — this site's alchemy circle and ambient glyphs inscribe, flare, and settle within five seconds rather than spinning indefinitely; a reduced-motion preference removes the animation entirely.
  • axe-core, driven by pa11y-ci at the WCAG2AA standard, runs over every URL in this site's sitemap as a blocking GitHub Actions check on every change.

What's checked by hand

Automated tools catch roughly a third of accessibility issues — contrast, missing labels, and structural problems, mostly — and this site's automation is aimed squarely at that third, since a themed palette is exactly where it bites hardest. The rest is checked manually at milestones, not on every commit: a keyboard-only walk of the sigil navigation and every interactive element; a screen-reader pass (NVDA/VoiceOver) confirming the character sheet's HP/MP/ST bars narrate as meters and the EXP bar as a progressbar, with real values, not bare percentages; 400% zoom on the character sheet; forced-colors mode; and a colorblind simulation over the Laboratory's rarity tiers, confirming the tier reads from its label, never its color alone.

Known gaps, honestly

Nothing here is hidden because it's inconvenient. As of this page's last update:

  • A few gold-on-gradient accents on the About page's “ultimate ability” card and the closing call-to-action measure below 4.5:1 against their own dark background — found while auditing the rest of the palette, not yet redesigned (the light-surface ink tokens elsewhere on the site are tuned for cream/parchment, not this specific dark gradient, so fixing it needs a dedicated color choice, not a token swap).
  • The LinkedIn/GitHub/Dev.to icon links on the About page's hero use icon-fill colors light enough that no available text/icon color reaches 4.5:1 against them — the fill colors themselves need to darken, which hasn't happened yet.
  • The Laboratory's rarity color strip is a purely decorative, screen-reader-hidden accent today (the tier itself is conveyed by a real text label next to it, which works with or without JavaScript) — but the strip's own color still depends on JavaScript adding a class that matches its data attribute. Cosmetic only, not an information loss, but not fixed yet either.
  • Fluid, viewport-scaled type (CSS clamp()) isn't in use anywhere on the site yet — headings use fixed sizes with breakpoint overrides instead. Not a defect (no clamp() means no clamp() misuse), just not attempted.

This list will get shorter over time, not quieter.

Report something

If something here doesn't work with your screen reader, your keyboard, your browser's zoom, or anything else — that's the gap this page exists to surface. Mail hi@hlavezzo.me and it goes straight to a human, not a queue.