Nineteen Failures, Found First

The communication problem

A replatformed storefront was being prepared for launch, and accessibility was being treated as a widget to install rather than a property of the build. The question on the table was whether the overlay subscription carried across from the old site. The more useful question was whether the new markup was reachable at all by someone using a keyboard or a screen reader, and nobody had checked.

The design approach

Audit the new build against WCAG AA before launch rather than after, on the working storefront, and hand over every finding with its fix already prepared. Separate what was verified from what was only flagged, so the count could be trusted. Where a fix touched wording, stop and route it to Quality instead of editing it. The position taken was that an overlay sits on top of markup without changing it, so heading order, focus handling, labelling and contrast had to be corrected at the source, with the widget as a later layer rather than the answer.

The work

Nineteen verified WCAG AA failures with fixes prepared, four more flagged and marked as unverified, and a dotted ingredient list pattern rebuilt as a readable table for the product range.

• Focus escaped the mobile menu and the search overlay, trapping keyboard users behind them.
• The homepage carousel advanced on its own with no pause control.
• One page hid seven of its eight items from screen readers.
• Brand green measured 3.15 to 1 against its background, below the 4.5 to 1 minimum, with a darker shade tested to pass everywhere it was used.
• Drug Facts existed only inside label images, so assistive technology could not reach them.
• Dotted ingredient leaders were read aloud one dot at a time, and became a two column table with no wording changed.