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
WCAG2AAstandard, 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 (noclamp()means noclamp()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.