Hand-Coded.
Accessible By Default.

Eleven user-facing accessibility controls — contrast, text size, spacing, motion, dyslexia-friendly type, reading guide — with preferences saved between visits. Try the panel.

• WCAG 2.2 AA, axe-core verified
• Full keyboard navigation
• Screen reader tested
• 79KB, zero dependencies

Demonstration build. Organization name and contact details are placeholders; the design, code, and accessibility implementation are the real work.

Price board with dot leaders instead of a card grid, and an animated barber pole that stops entirely under reduced-motion. Shop hours sit in the hero where a walk-in customer looks first.

• 0 axe-core violations
• Lowest contrast pair 5.31:1
• Escape closes the mobile menu
• 22KB, one stylesheet

Laid out like a drawing sheet. Services are a real scope table with row and column headers, which reflows to stacked blocks on a phone without losing the header association a screen reader needs.

• Semantic table, scoped headers
• Responsive table reflow
• Blueprint grid, no images
• 0 axe-core violations

Talavera tile band drawn entirely in CSS gradients, so it costs nothing to load and scales to any width. Menu prices, hours and step-free access details are all real text, not baked into an image.

• Decorative band in pure CSS
• Cobalt palette, 8.32:1
• Access details in the copy
• 0 axe-core violations

Editorial layout with one very large headline and a lot of air. Proves that a quiet, type-led design survives an accessibility audit without being flattened into a template.

• Two typefaces, clear roles
• Espresso on paper, 14.42:1
• Visible focus on every control
• 0 axe-core violations

Built around the card a cleaner leaves on the counter. Starting prices are stated plainly on the page rather than hidden behind a quote form, which is what people searching actually want to see.

• Prices visible, no gate
• Quote form with live validation
• Errors announced via role=status
• 0 axe-core violations

A colour swatch strip as the hero device. Soft, low-saturation palettes are where salon sites usually fail contrast — every swatch label here was measured, and the weakest sits at 6.29:1.

• All 7 swatch labels pass AA
• Soft palette, no contrast failures
• Hover gated to real pointers
• 0 axe-core violations

How I structure a small business build: pricing tables, accordion FAQ, bilingual intake routing, and structured data for local search.

• Hand-coded, no framework
• LocalBusiness schema
• Bilingual intake routing
• Responsive from 320px