Accessibility
This site is built to meet WCAG 2.1 level AA. Contrast was measured rather than estimated, and the measurements are written into the top of the site’s stylesheet as well as being published here.
Everything works from the keyboard
The compartment is the shape this whole site is made of, and every compartment opens on keyboard focus exactly as it opens on hover. Nothing is reachable only with a pointer. Focus is always visible: a two-pixel outline offset from the element.
A skip link is the first thing in the tab order on every page.
Colour is never the only signal
Compartments come in four states. Each state carries a written label and a lid pattern as well as a tone, so the states are distinguishable without colour vision:
- Not looked at yet — plain lid.
- Looked at — a single diagonal stroke.
- Goes by another name — a row of blocks.
- Started free — a fine dot pattern.
Measured contrast ratios
| Use | Combination | Ratio | Result |
|---|---|---|---|
| Body text | #262320 on #EAE6DD | 12.55 : 1 | Passes AA and AAA |
| Checked tone | #2F6A4E on #EAE6DD | 5.12 : 1 | Passes AA |
| Alias tone | #6C51A0 on #EAE6DD | 5.08 : 1 | Passes AA |
| Secondary text | #656058 on #EAE6DD | 5.01 : 1 | Passes AA |
| Trial tone, small text | #9A4C2E on #EAE6DD | 4.89 : 1 | Passes AA |
| Reversed text | #EAE6DD on #262320 | 12.55 : 1 | Passes AA and AAA |
| Text on a closed lid | #262320 on #B4ADA0 | 7.01 : 1 | Passes AA and AAA |
Two of the palette’s tones sit below the 4.5:1 floor for body-size text — the softer grey at 4.25:1 and the trial tone at 4.11:1. Neither is ever used for small text. Where those tones carry text, a darker derivation of the same tone is used, and both derivations are in the table above.
The two palest tones are used for hairlines and for the faces of compartments, never for text.
Text alternatives
- Every image has alternative text, and no information is carried by a picture alone.
- The compartment grid has a plain-text version listing every place, what tends to hide there, and the shape a line can take, so the grid is never the only way to read the list.
- Decorative background plates are marked as decorative and skipped by screen readers.
Printing
The printed sheet is a first-class part of this product, not an afterthought — a lot of people work through a list of this kind sitting in front of a paper statement. It prints in black and white, with real checkboxes, on one side of A4, and drops the navigation, the images and the buttons.
Motion
There is very little movement here, and what there is honours prefers-reduced-motion. Nothing flashes, nothing autoplays and nothing moves on its own for longer than a moment.
Other settings we respect
- Text scales to 200% without anything being lost or overlapping.
- The layout reflows to a single column and never needs sideways scrolling.
- Windows high contrast mode is handled explicitly.
What we know is not perfect
- Some of the illustration plates are dense, and their alternative text summarises them rather than describing every element. Where a plate carries meaning, the same meaning is in the surrounding text.
- The compartment grid is long. It has a plain-text equivalent, but on a screen reader the grid itself is still a lot to move through.
Tell us about a problem
If something here does not work for you, write to support@strategyisland.shop and say what you were trying to do and what happened. We reply within five working days. If you would rather telephone, +44 7782945875.