The same six interactions, built twice

A controlled sample, not a client site. Six components where the real failures cluster in online stores - a size-guide dialog, a material filter, a carousel, a newsletter form, a gift-wrapping switch and an add-to-cart confirmation - built first with the mistakes those components usually ship with, then rebuilt so they work with a keyboard and a screen reader.

What to notice in 60 seconds

1. Open the size guide. Focus stays on the button you pressed, one Tab reaches Close, and the next walks out of the dialog to the filter behind it. Escape does nothing.
2. Reach the material filter and press Enter, then the arrow keys. It only responds to a mouse.
3. The carousel advances every three seconds with no way to pause it, and its three dots have no names.
4. Submit the newsletter empty. The error is red text with nothing announced and focus stays where it was.
5. Try to reach the gift-wrapping switch with Tab. It is not in the tab order at all, and it has no state anyone can hear.

The automated layer

Scanned with axe-core and pa11y, the broken page gives up one automated failure - low contrast on the gift-wrapping label - and the fixed page gives none. The six failures listed above are invisible to both engines, and that gap is the part being sold.