WCAG for Ecommerce

WCAG 2.4.7 Focus Visible — Show Keyboard Focus

Keyboard users must be able to see where focus is as they move through the interface.

For D2C teams, this is not just a standards question. It is a revenue-path question. When a WCAG criterion fails on a product page, filter interface, or checkout form, it creates both customer friction and legal exposure.

Scan Your Store Free →

What this means in plain English

Keyboard users must be able to see where focus is as they move through the interface.

On ecommerce sites, this criterion matters because shoppers are rarely reading one clean article. They are evaluating products, interacting with filters, switching variants, reviewing shipping promises, and moving through forms under time pressure. When the underlying accessibility rule breaks, the buying journey breaks with it.

Why it matters for ecommerce

Header navigation

filter drawers

coupon links

checkout buttons

ADA complaints against online stores usually do not focus on abstract theory. They focus on failed tasks: a user cannot understand a product image, cannot interpret a discount, cannot complete a form, or cannot recover from an error. That is why even one overlooked success criterion can create outsized legal and commercial risk.

How to check if you comply

Manual test

Tab through every page and watch whether focus indicators are obvious in default, hover, dark mode, and campaign styles.

Automated test

Automated scans can flag some CSS problems, but visual verification is necessary because focus indicators may exist yet still be too subtle to use.

How to fix violations

Use strong outlines or focus styles that stay visible across backgrounds, states, and themes.

:focus-visible {
  outline: 3px solid #22d3ee;
  outline-offset: 3px;
}

The best fix is usually at the component level. If the problem lives in a reusable product card, accordion, swatch selector, or form field, repair the shared component once instead of chasing the same violation page by page.

Common mistakes stores make

outline: none without replacement
focus ring same color as background
hover-only styling with no focus style
focus hidden under sticky headers or overlays

These mistakes recur because ecommerce teams optimize for speed, visual merchandising, and third-party integrations. Accessibility gets treated as cleanup work instead of release quality, so the same defect reappears with every new campaign or theme update.

Why this matters legally

In 2025, 8,667 ADA lawsuits were filed across federal and state courts. Plaintiff firms do not need every WCAG failure to build pressure. They only need enough reproducible barriers to show that disabled shoppers cannot access the same buying journey. That makes criteria like WCAG 2.4.7 Focus Visible — Show Keyboard Focus commercially and legally material, not academic.

FAQs

Why do stores remove focus outlines?

Usually for aesthetic reasons, but removing them without a strong replacement creates an immediate usability failure.

Is a tiny color shift enough?

Usually not. The focus indicator should be unmistakable, especially in dense commerce interfaces.

What areas need the strongest focus visibility?

Navigation, variant selectors, filters, forms, cart, and checkout controls.