Concepts

Built here

• Dot matrix button

  An AI button whose icon is a grid of dots, seven by seven. It reads its own label and pictures the action: lines getting shorter for a summary, a staircase for next steps, bars for an analysis.

On CodePen

Each opens on CodePen, with its code.

• aria-ui (opens in a new tab)

  A working prototype of the aria-ui attribute I proposed at W3C TPAC 2023: a panel that switches a page’s color scheme, text size and contrast by swapping sets of design tokens.

• One-field address form (opens in a new tab)

  One field for a whole address, checked against a geocoding service as you type, in place of the usual five. Its pulse animation stops when reduced motion is set.

• Accessible loading (opens in a new tab)

  While a report is made, lines of a poem appear one at a time and are read out to screen readers, with a button that pauses both the animation and the poem.

• Button labels — recommended (opens in a new tab)

  A job application form whose buttons name their action, such as Submit application and Save as draft, beside a copy that uses generic words like Click here and OK.

  The other half: Button labels — avoid (opens in a new tab)

• Background patterns in Chart.js (opens in a new tab)

  A bar chart whose bars are told apart by pattern, squares, dots and diagonal lines, as well as by color, so it can be read without seeing color.

• Accommodation needs form (opens in a new tab)

  A workshop’s request form for access needs, from sign language interpretation and live captioning to a quiet space, with a live version built in Tally.

• WCAG tokens explorer (opens in a new tab)

  A browser for WCAG tokens, design tokens tied to the accessibility guidelines, loaded live from my wcag-tokens repository.