Accessibility as creativity

Go ahead and press the three buttons below. The same event turns from a field notebook into a night instrument and then into a municipal notice, and through all of it the heading, the list, the price, the reserve button, and the live status stay exactly where they are. Only the paint moves.

Accessibility has a reputation as the department of no — the late review that sands every design down to beige. I think this little lab argues the opposite case: bolt the meaning down first and you can afford to be reckless with everything else. Color, type, density, borders, and spatial emphasis all stay open, and the facts stop being collateral damage in every aesthetic pass.

Public programme

Saturday 19 September · 21:00

After dark at the observatory

A small-group evening for learning the autumn sky, using the rooftop telescope, and reading a star chart without an app.

Rooftop telescope session
Printed sky map included
Step-free route to the dome

Ticket€12

12 places left

Field notes. Warm paper, botanical restraint, and a reading-first serif hierarchy. The event region keeps the same roles, names, source order, button, and status.

The same event region rendered as field notes, a night signal, and a civic notice.

One spoken page#

Under all three skins sits one semantic subtree: a labelled region holding the programme label, date, heading, summary, three details, price, button, and status message. Switching the treatment swaps a set of class names and touches nothing else.

observatory-event.htmlhtml

<section aria-labelledby="event-title" aria-describedby="event-summary">  <p>Public programme</p>  <p>Saturday 19 September · 21:00</p>  <h3 id="event-title">After dark at the observatory</h3>  <p id="event-summary">A small-group evening for learning the autumn sky.</p>  <ul>    <li>Rooftop telescope session</li>    <li>Printed sky map included</li>    <li>Step-free route to the dome</li>  </ul>  <p>Ticket €12</p>  <button type="button">Reserve a place</button>  <p role="status">12 places left</p></section>

Browsers derive roles, names, states, and relationships from native HTML and ARIA according to the Core Accessibility API Mappings — the region takes its name from the heading, the button stays a button, the status keeps announcing reservation changes. That contract is settled before a single pixel is painted.

The tree before the pixels used the same idea as a repair, an intended tree keeping a screenshot-driven build from shedding semantics. Here the repaired document gets a better job: design surface instead of frozen screenshot.

Three visual arguments#

The CSS regroups without ever replacing the list. Field notes stacks the three details as numbered notebook lines, night signal rearranges the same items into instrument panels, and the civic notice drives heavy rules between them. A screen reader meets one list with three items every time, because the visual grammar comes from layout and paint rather than from alternate DOM branches.

Treatment	Primary voice	Detail structure	Action treatment
Field notes	Serif title and paper tones	Details read as a numbered notebook list	Rounded dark reserve button
Night signal	Uppercase display type against deep blue	Details become three instrument-like panels	Mint control isolated in its own module
Civic notice	Date and title share a hard public grid	Heavy rules divide the schedule	Square black action beside the price

Each treatment changes hierarchy and spatial language while drawing from the same elements.

The fixed document also keeps the comparison honest. Sneak in a second call to action, or drop the step-free route because it crowds the grid, and you have changed the proposition, not the style. With the document pinned, the visual system has to do all of the expressive work itself.

Interaction lives inside the shared subtree too. Reserving a place disables the one real button, renames it “Place reserved,” and updates the status to “Place held for 10 minutes” — and that state survives switching treatments, so each design has to style the awkward disabled control it actually has instead of inventing a prettier success screen.

Whether the three versions are equally pleasant to read is a question I have made no attempt to answer. The lab isolates one variable: substantial visual disagreement does not require semantic churn. Preference and usability still need evidence from people using the rendered pages.

The tree has a narrow jurisdiction#

You can hold the invariant in a test. Playwright's ARIA snapshots compare the accessible structure after each switch, and the assertion is deliberately strict about the named region, list contents, button, and status:

same-tree.spec.tsts

for (const theme of ["Field notes", "Night signal", "Civic notice"]) {  await page.getByRole("button", { name: theme }).click();  await expect(page.getByRole("region", {    name: "After dark at the observatory",  })).toMatchAriaSnapshot(`    - region "After dark at the observatory":      - heading "After dark at the observatory" [level=3]      - list:        - listitem: Rooftop telescope session        - listitem: Printed sky map included        - listitem: Step-free route to the dome      - button "Reserve a place"      - status: 12 places left  `);}

What a passing snapshot cannot do is approve the design. Contrast, visible focus, reflow, target size, and reading order all need their own checks — WCAG separates use of color from focus appearance and meaningful sequence precisely because a tree settles none of them.

The civic treatment makes the date impossible to miss, and its yellow band still looks a little like a depot warning. The snapshot reports the same region, heading, list, button, and status as the quiet field-notes version. On whether that yellow reads as urgent or merely loud, the tree has no opinion.