Accessibility

Philosophy

Accessibility is not a feature; it is a quality of the work — like structure or restraint. Kanso teaches that beauty lies in the removal of confusion and the exclusion of non-essential elements. A barrier to access is the most non-essential element of all. An interface that excludes people is not minimalist; it is merely incomplete.

Color Contrast

All text/background pairings must meet WCAG 2.1 AA (≥ 4,5:1 for normal text, ≥ 3:1 for large text). The primary pairings in this system comfortably exceed AA and reach AAA.
The Hai (#A0A09C) muted grey is below the 4.5:1 threshold on Washi backgrounds (~2.7:1). Use it only for decorative or large text (≥ 18 px)—never for essential body content.
Non-text elements (icons, borders, form controls) must meet ≥ 3:1 against their background.
Test all color pairings for deuteranopia, protanopia, and tritanopia. The Beni crimson hue may appear darker/muddier to color-blind users—ensure it is never the sole indicator of meaning. Pair color with shape, position, or text.

Focus Indicators

All interactive elements must display a visible focus ring on keyboard navigation. Focus ring: 2 px solid Beni, 2 px offset on light backgrounds; Washi on dark backgrounds. Never remove outline without an equivalent replacement.

Light background — Beni focus ring

unfocused

Dark background — Washi focus ring

unfocused

:focus-visible {
  outline: 2px solid var(--color-beni);
  outline-offset: 2px;
}

Touch Targets

All interactive elements must have a minimum touch target of 44 × 44 px (WCAG 2.5.8). Icon buttons must include sufficient padding even if the visible icon is 24 × 24 px.

24 × 24 px icon button44 × 44 px target (dashed)

16 × 16 px inline icon44 × 44 px target (dashed)

All functionality must be operable via keyboard alone. Tab order follows the visual reading order (top-to-bottom, left-to-right).
Skip-to-content link as the first focusable element on every page.
Modal and overlay components must trap focus within themselves when open, and return focus to the trigger element on close.
The Japanese poem scroll must not hijack scroll—it moves with the user’s natural scroll, not instead of it.

Alt Text Patterns

Image type	Pattern	Example
Decorative image	alt=""	Texture, rule, background pattern — empty alt, role="presentation"
Cover / hero	alt="[Subject + context]"	alt="Autumn leaves on a stone path, Kyoto"
Diagram / chart	alt="[Data summary]"	alt="Bar chart: spacing scale from 4 px to 128 px"
Screenshot / code	alt="[Purpose + key detail]"	alt="Terminal showing pnpm build output with no errors"
Portrait photo	alt="[Full name]"	alt="Stefan Imhoff"
Icon (standalone)	aria-label="[Action]" role="img"	<SearchIcon aria-label="Search" role="img" />
Icon + visible label	aria-hidden="true"	<SearchIcon aria-hidden="true" /> Search

Captions and Transcripts

If video or audio content is introduced in the future, all media must include:

Synchronized captions (not auto-generated without review).
A text transcript is available on the same page.
A pause/stop control for any auto-playing media.

Localization

The site is primarily in English. Japanese text (the poem, occasional phrases) is marked with lang="ja" on the relevant element so screen readers switch pronunciation context.
German haiku are marked with lang="de".
All Japanese aesthetic terms used in the UI (if any) are accompanied by their English meaning on first use.
Right-to-left (RTL) support is not required at this time, but the grid and spacing system is designed with logical properties (margin-inline, padding-block) to simplify future adaptation.