#accessibility
45 pieces filed under “accessibility”.
Hover states with purpose
Hover is the most abused state in interface design — decoration where it should teach. A taxonomy of hover states that do a job, plus the focus-parity rules.
Bottom sheets that don't fight the user
When a bottom sheet beats a modal on mobile web: drag affordances, scrim honesty, snap-point logic, keyboard and screen-reader behaviour, and anti-patterns.
Scrollytelling with restraint: narrative pages that respect the scrollbar
The production playbook for scrollytelling that earns its keep: a one-pin budget, chapter navigation, a designed reduced-motion variant, and a print-test honesty check.
Form architecture at scale: schemas, errors and autofills
Schema-first form engineering: shared zod validation, error copy as data, correct autofill tokens, and announcements that don't double-speak.
Sonic branding for studios without a jingle budget
Lightweight sonic identity without the six-figure jingle: the three-moment rule, UI sound principles, accessibility defaults, and one commissioned motif.
Keep your pages findable by Ctrl-F
Virtualisation silently breaks in-page search. The hidden=until-found and content-visibility toolkit, chunk-rendered long lists, and when a custom find box earns its keep.
Anchor navigation on long pages: TOCs that get used
Tables of contents are either the hardest-working furniture on a long page or pure decoration. How we design anchor navigation that earns its pixels.
When to build a voice interface (and when a form wins)
A decision framework for voice UI: where speech beats typing, turn-taking and latency design, barge-in patterns, transcription honesty, and voice privacy.
Focus-visible: designing the ring, not removing it
Keyboard focus styles are a design problem most teams delete instead of solve. How to design focus rings that are visible, beautiful and part of the identity system.
Focus states are a design system feature, not a browser default
Stop inheriting the browser's focus ring. Design it: tokens, 3:1 contrast on every surface, dark-theme variants, and the overrides that silently break keyboards.
A taxonomy of micro-interactions (and when to say no)
Hover states, cursor follow, scroll reveals and button physics — a working taxonomy with duration curves, quality tests, and reduced-motion fallbacks for every pattern.
Screen-reader testing: a 30-minute workflow for every release
Automated checks catch a third of accessibility problems. A repeatable 30-minute manual screen-reader script catches the rest — the workflow we run every release.
The highest-traffic UI nobody designs: forms
Forms are the most-used, least-designed UI on the web. A practitioner's guide to labels, validation timing, error copy, autofill and mobile keyboards.
Buying accessible software: a procurement playbook
A procurement playbook for accessibility: brief language that binds, evaluating claims beyond the VPAT, acceptance criteria that bite, and keeping standards after launch.
Drag handles, sliders and the affordance problem
Draggable UI fails quietly: nobody drags, keyboards can't, layouts forget themselves. How to build handles and sliders that people actually find, use and keep.
Print stylesheets: the forgotten design surface
Most web teams ship print CSS by accident. Here's @media print done properly: receipts, itineraries, tickets, page breaks, link URLs, and testing without a printer.
Data visualisation on marketing pages, honestly
Charts on marketing pages answer to different rules than dashboards. Honest axes, motion in service of comprehension, and the table that saves your accessibility audit.
Sticky elements that don't annoy anyone
Sticky headers, bars and CTAs must pay rent for the viewport they occupy. Height budgets, scroll-directional chrome, and the focus traps behind sticky UI.
Maps on the web: restraint and alternatives
A map is the most expensive component on most sites — in kilobytes, attention and accessibility. When a map earns it, how to design one that doesn't, and when a list wins.
Accessibility starts in the design file
Most accessibility rework is a design-file problem found too late. The annotations, contrast workflows and focus specs that stop retrofits before they start.
Keyboard shortcuts nobody finds
Most shipped shortcuts are discovered by accident or never. Legends, cheat sheets, teaching in context, remapping, and designing for the power user you'll have.
Sonic branding: the layer most products mute
UI sound is brand identity nobody briefs: sonic layers, notification tones, testing with accessibility in mind — and knowing when silence wins.
Accessibility is an engineering discipline, not a ticket queue
Treating accessibility as infrastructure: axe in CI, linting, component contracts, keyboard hierarchies, and who on the squad owns what. WCAG AA as a floor.
Colour systems that survive dark mode and rebrands
Literal palettes break the moment a brand shifts or dark mode ships. Here's the semantic colour architecture that has survived both — twice — on real client work.
Pull quotes and margin notes: editorial devices for the web
Pull quotes, asides and margin notes give long reads their rhythm. The semantic markup, the responsive survival tactics, and the restraint that keeps them editorial.
Brand colour beyond default blue
How to choose brand colour with intent: category colour maps, distinctiveness vs convention, accessibility as a brief, and testing colour in the wild.
Inclusive design beyond the checklist
Inclusive design past WCAG audits: inclusive language in UI copy, cognitive load budgets, SPA focus management, touch targets, and a critique criterion that sticks.
WCAG AA for product teams: the parts everyone gets wrong
The WCAG AA criteria that fail most in real products — contrast, focus visible, target size, keyboard traps — and the review rituals that keep them green.
Scrollytelling without the hostage-taking
Scroll-driven narrative can make complex data click — or trap readers in an unskippable slideshow. The pacing, exit lanes and motion fallbacks that keep it honest.
Motion that earns its keep (and the 160ms rule)
Our motion philosophy: the 160ms rule, an easing vocabulary of three curves, choreography limits, and prefers-reduced-motion as a design input, not a checkbox.
Designing forms people actually finish
Forms are where products lose users and revenue quietly. The field-economics, label copy, error writing and autofill respect we use to keep completion high.
Running an accessibility audit that leads to fixes
Most accessibility audits produce a PDF and no change. Our format — automated sweeps, manual journeys, a severity taxonomy, and fix-forward roadmaps.
Picking a brand palette is strategy wearing paint
A brand palette is a strategic decision before it is an aesthetic one. How we map competitors, treat accessibility as a creative constraint, and pick ownable colour.
Micro-interactions: the fine layer that makes interfaces feel expensive
Hover, pressed and focus states are where interface quality hides. Our working rules for micro-interactions: durations, material honesty, and when to cut motion.
Engineering keyboard-first interfaces
Roving tabindex, focus management without traps, shortcut systems users can actually discover, and the test setup that treats the keyboard as a primary input.
Switchyard: teaching a rail-ops board new manners
For a rail-ops platform, the board is the product. We rebuilt Switchyard's kanban with a full keyboard shuttle and warnings that mean it.
Case studyThe Corrowong Trust: an archive people actually browse
How we rebuilt a regional museum group's 180,000-item digital archive around wandering instead of database forms — and made it funding-proof.
Case studyKowa Health — unifying nine clinics onto one patient platform
Nine NZ primary-care clinics, five booking systems and a phone-heavy queue, unified into one patient portal co-designed with the receptionists who run it.
Case studyPrairie Mutual: claims that take six minutes, not six phone calls
A regional insurer replaced a fourteen-page claims PDF with a six-minute guided flow — and 'where is my claim?' calls fell by more than a third.
Case studyGlasshouse: a seat map people stopped dreading
A 384-seat theatre's box office was where sales went to die. We rebuilt it around an honest seat map, truthful timers and keyboard-first booking.
Case studyCopperline Mutual: a community bank that sounds human
How a voice overhaul and an accessibility-first platform rebuild helped a fictional mutual bank turn plain language into its sharpest competitive edge.
Case studyQuill Legal: a document platform lawyers actually enjoy
A legal-tech SaaS had a brilliant document-automation engine trapped in a 2016 UI. We redesigned the product end-to-end and shipped its design system, Precedent.
Case studyEasement Legal: a law firm site without the mahogany
A community legal centre replaced mahogany-and-gavel clichés with a plain-language service finder, honest fee tables and interpreter-first design.
Case studyGLADE: skincare e-commerce with nothing to hide
A skincare brand led with evidence instead of glow-washed photography. How ingredient transparency UX and honest PDPs changed what loyalty looks like.
Case studyPylon Health: telehealth that treats anxiety as a UX problem
How Brassfern rebuilt Pylon Health's telehealth booking flow around patient anxiety — plain-language triage, an honest waiting room, and dropouts that heal.