Accessibility
Last updated: July 19, 2026
This site targets WCAG 2.2 Level AA (which includes 2.1 AA), and it is tested that way — automatically, across every mode and theme. Accessibility here is built into the design rather than bolted on. What follows is what is in place, what is known to fall short, and how to report anything that gets in your way.
What's built in
Every one of these works in all four combinations — gremlin or professional mode, light or dark theme:
- Full keyboard operation. Every link, button, toggle, and the draggable sticker interactions work with Tab, Shift+Tab, Enter and Space. A skip-to-content link is the first thing Tab reaches on every page.
- Visible focus. A clear focus ring follows keyboard focus, with enough contrast to see in every theme.
- AA color contrast. Normal text meets 4.5:1 and large text 3:1 — verified on every page in all four mode/theme combinations.
- Respects reduced motion. Turn on "reduce motion" in your operating system and all animation stops. Nothing is left hidden or mid-transition.
- A motion switch. The accessibility button in the bottom-left corner opens a small panel; flip "Animations" off there (or back on) without changing your operating-system setting. Your choice is remembered.
- A readable-font switch. In that same panel, "Readable font" swaps the whole site to Atkinson Hyperlegible — a typeface designed for low vision, with characters that don't blur together — plus looser spacing. It is self-hosted and remembered between visits.
- A way to hide the button. If the bottom-left accessibility button ever gets in the way of the text, open its panel and choose "Hide this button." That's remembered too — and you can always bring it back right here on this page.
- Two writing modes, two themes. Professional and gremlin voices, light and dark themes: pick whatever is easiest for you to read.
- Semantic structure. One main landmark per page, labeled navigation, a footer, a sensible heading order, and descriptive alternative text on informative images. Purely decorative flourishes are hidden from screen readers.
- Works without JavaScript. The content is plain HTML; the toggles and animations are enhancements on top.
How it's tested
Automated checks catch regressions; manual checks catch the rest.
- An automated axe-core audit runs against every page in all four combos and fails the build if a serious contrast issue appears, so it can't silently come back.
- Manual keyboard walk-throughs of each page and every interactive component.
- Screen-reader spot checks (VoiceOver).
- The WCAG 2.2 Level AA success criteria as the bar.
Where it still falls short
Honesty beats a clean-looking badge. Known gaps:
- Logo and brand-name colors. The company logos on the About page use each brand's real colors, and some don't reach 4.5:1. WCAG exempts logo and brand-name text from the contrast requirement; I've kept those marks on a white surface so they stay visible in dark mode, but I'm flagging it rather than hiding it.
- Decorative display type in gremlin mode. The big headings use a rounded display font for character. If it's hard to read, the readable-font toggle swaps everything — headings included — to Atkinson Hyperlegible.
- Third-party embeds. Content embedded from other services (for example a linked video) isn't fully under my control.
- The readable-font toggle covers text. Decorative icons and emoji stay as they are.
Tell me when something's broken
If anything on this site gets in your way, I want to know — I read my email and I fix real issues.
Email: sara@sarakay.me
It helps if you include the page URL, what happened, and the assistive technology you were using (if any).