Sample VPAT Report — Acme Commerce Platform

Overall conformance

Partially

WCAG 2.2 AA

Findings by severity

Critical: 3
High: 8
Medium: 12
Low: 9
Passed: 54

Key findings

The site is close to AA-conformant but has three critical failures blocking keyboard users and users of assistive technology. All three are fixable without redesign. Contrast and focus-visible regressions suggest a design-token policy gap worth addressing at the system level.

Detailed findings

CriticalWCAG 1.4.3 · Level AA

Contrast (Minimum)

Does Not Support

Product title text on the promotional banner uses #8a8a8a on #b3b3b3, a contrast ratio of 1.35:1. WCAG 2.2 AA requires at least 4.5:1 for normal text. Affects 14 product listing pages.

Remediation

Darken the title color to #333333 (12.6:1) or lighten the banner to #f5f5f5 (8.8:1).

Affected:/products/collections/summer/collections/sale

CriticalWCAG 2.1.1 · Level A

Keyboard

Does Not Support

The image carousel on the home page cannot be navigated with the keyboard. Arrow keys do nothing and the Tab key skips the carousel entirely.

Remediation

Add keyboard event handlers for arrow keys, make the carousel container focusable with tabindex=0, and expose role=region with an accessible name.

Affected:/

CriticalWCAG 4.1.2 · Level A

Name, Role, Value

Does Not Support

The custom dropdown menu in the account header uses <div> elements without ARIA. Screen readers announce it as generic text with no indication it is interactive.

Remediation

Use a native <button> for the trigger and a <ul role=menu> for the list, or apply the ARIA authoring practices combobox pattern.

Affected:/account/checkout

HighWCAG 2.4.7 · Level AA

Focus Visible

Partially Supports

Custom buttons in the checkout flow remove the default focus ring without providing a replacement. The primary navigation does expose a visible ring.

Remediation

Add focus-visible:outline or focus-visible:ring-2 to every custom button. Do not use outline:none without a replacement.

Affected:/checkout/shipping/checkout/payment

HighWCAG 3.3.2 · Level A

Labels or Instructions

Partially Supports

The newsletter signup form uses placeholder text in place of labels. Placeholders disappear on focus and are not reliably announced by assistive tech.

Remediation

Add a visible <label> element associated with the input via for/id. Keep the placeholder only as supplementary hint text.

Affected://blog

MediumWCAG 1.3.1 · Level A

Info and Relationships

Partially Supports

The product grid uses a <table> for layout on the comparison page. Assistive tech announces spurious row/column relationships.

Remediation

Replace the layout table with CSS Grid. Reserve <table> for tabular data.

Affected:/compare