Accessibility

The claim

Accessible features of this site

Color

Every color pair the design uses is checked against its WCAG minimum by a script that reads the values out of the stylesheet rather than restating them, so it cannot drift from what actually ships. Text pairs are held to 4.5:1, borders and focus rings to 3:1. It runs aspnpm contrast and exits non-zero on a failure.

Focus

One focus treatment, defined once, applied to everything: a two-tone ring whose inner band takes the color of whatever surface it sits on, so it stays visible against the page, a raised panel and a recessed one alike. It is drawn on :focus-visible, so a mouse press does not paint it but every keyboard arrival does.

Structure

Landmarks, one h1 per page and headings that descend without skipping. A skip link that is genuinely first in the tab order. Lists that are lists, and a curriculum vitae marked up as the description list it actually is.

Controls

The theme control is two presentations of one behavior. On a wide screen it is a two-segment group — a radiogroup ofradios built from buttons, so unlike a native radio group its arrow-key movement is implemented rather than inherited. On a phone it is a round button that flips, and its accessible name carries both the current state and what pressing it will do, because an icon can only show one of the two.

Motion

There is little of it, and what exists answers something you did. Every transition is disabled underprefers-reduced-motion.

Responsive layout

The layout adapts to the space available, which is what makes it readable on a phone as well as on a wide display. Anything genuinely wide — a diagram, a code block — scrolls inside its own box rather than pushing the page sideways.

Accessible units

Type and spacing are sized in rem rather than absolute pixels, so a reader who has raised the base font size in their browser or their operating system gets a larger site rather than a broken one.

How it was tested

Automated

Two scripts run on every build and both can fail it:pnpm contrast for color pairs, andpnpm audit:html over the generated HTML for landmark and heading structure, alternative text, unique ids, the skip link, and link text that reads as more than its destination. The components themselves come from my design system, where axe runs over every story in a real browser.

Keyboard

Every interactive element reached and operated from the keyboard alone, checking tab order, focus visibility and where focus lands after the control is used.

Zoom

400% in Chrome and Firefox, checking that the layout reflows to a single column and holds without a horizontal scrollbar.

Screen reader

A screen-reader extension in Chrome, page by page, listening to headings, landmarks, links and the theme control.

Devices

Real phones between 320 and 430 CSS pixels wide, rather than only a resized desktop window.

Additional information