WCAG Violations in E-commerce Websites

Why E-commerce Websites Must Be Accessible

E-commerce sites face significant ADA Title III exposure. In 2023, over 4,000 ADA website lawsuits were filed, with retail e-commerce as the most targeted sector. Inaccessible checkout flows directly cost revenue.

The most common WCAG 2.1 AA violations found on e-commerce websites are listed below. Each violation includes the WCAG criterion, impact level, and exact fix code.

Color Contrast

Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds.

Fix: Increase the contrast ratio between text and its background. For normal text (< 18pt), use at least 4.5:1. For large text (≥ 18pt or 14pt bold), use at least 3:1. Use a contrast checker like WebAIM's tool to verify.

Image Alt Text

Ensures elements have alternate text or a role of none or presentation.

Fix: Add descriptive alt="" attributes to all tags. For decorative images, use alt="" (empty string). For complex images like charts, provide a full text alternative in a nearby paragraph.

Form Label

Ensures every form element has a label.

Fix: Add a element for each form input, or use aria-label or aria-labelledby attributes. Placeholder text alone is not sufficient as a label.

Button Name

Ensures buttons have discernible text.

Fix: Add descriptive text content to elements. For icon buttons, add aria-label="Description". For , add an alt attribute.

Full fix guide for Button Name →

Scrollable Region Focusable

Ensures scrollable regions are accessible by keyboard.

Fix: Add tabindex="0" to any element with overflow: auto or overflow: scroll that contains non-interactive content. This allows keyboard users to scroll the region.

Other Industry Accessibility Guides