Skip to content
Ratnesh's notebook
All projects
ReactWCAGPerformance2022

Skriti — Accessible Storefront

A WCAG-compliant responsive e-commerce storefront, with a 30% load time reduction from code splitting and image optimisation. The accessibility work turned out to improve the experience for everybody.

Overview

Skriti is an e-commerce storefront where accessibility was a requirement rather than a retrofit. That framing changed the build. When WCAG compliance is in the brief from the start, it stops being a checklist you fail at the end and becomes a set of constraints that quietly improve the design.

What I built

  • A responsive storefront — catalogue, product pages, cart and checkout — that works from small phones up.
  • WCAG compliance throughout: semantic structure, keyboard-navigable flows, visible focus states, sufficient contrast, and images that actually describe themselves.
  • 30% faster loads through code splitting and image optimisation.

Things worth remembering

Accessibility is mostly just doing it properly. The large majority of the work was using the right element, labelling controls honestly, and not destroying focus outlines for aesthetic reasons. Very little of it was specialist. Most of it is what careful markup looks like anyway.

Keyboard navigation finds your design bugs. Tabbing through a checkout flow surfaces every place the visual order and the document order have drifted apart. Several layout problems I’d have called “fine” were revealed as confusing the moment I stopped using a mouse.

Fast and accessible pull in the same direction. Semantic HTML is smaller than a pile of divs. Properly sized images are quicker. The two goals rarely fought each other.

Back to all projects