Checkout email field has no programmatic label
- Criterion
- WCAG 1.3.1
- Component
sections/checkout-contact- Token
- —
- Occurs in
- 3 states
- Evidence
- accessible name is empty; a screen reader announces “edit text”
3 of them block a purchase outright for a keyboard or screen-reader user.
| Issue | Where | Severity | Effort |
|---|---|---|---|
| Checkout email field has no programmatic label | Checkout · contact | ■Blocker | S |
| “Add to cart” 3.1:1 against white (4.5:1 required) | All product states | ▲Critical | S — one token |
| Focus ring hidden behind the sticky header | 12 states | ▲Critical | M |
| Token | Current | Suggested | Used by | Closes |
|---|---|---|---|---|
--color-foreground-secondary | #8A8A8A | #6B6B6B | helper text, placeholders, footer links | 148 |
--color-button-primary | #7BA7E0 | #3A6FBF | Add to cart, Checkout, Apply | 63 |
--color-sale-badge | #F5B5B5 | #C0392B | sale badges across collection & PDP | 27 |
| Component | Defect | States | Closes |
|---|---|---|---|
sections/product-form | variant buttons expose no pressed state | 9 | 41 |
snippets/price | sale price conveyed by colour alone | 17 | 32 |
sections/cart-drawer | quantity steppers have no accessible name | 6 | 18 |
| Group | States | Weighted findings |
|---|---|---|
| Browse | 6 | 41 |
| Product | 5 | 88 |
| Cart | 4 | 52 |
| Account | 3 | 34 |
| Checkout | 5 | 129 |
| Other | 2 | 27 |
A state is not a page: route × viewport × open layer × data × validation. The same URL with an open filter drawer, an empty basket and a rejected card is four states, and they fail differently. Desktop 1440 and mobile 390 throughout.
| Type | Pages | States | The pattern that repeats on every page of this type | Closes |
|---|---|---|---|---|
| Home | 1 | 3 | Hero slider autoplays with no pause control | 4 |
| Collection | 14 | 5 | Product cards are linked divs — no role, no focus order | 41 |
| Product | 212 | 6 | Variant swatches are unlabelled buttons; sale price is colour only | 96 |
| Cart drawer | 1 | 4 | Quantity steppers unnamed; total is not announced on change | 23 |
| Checkout — contact | 1 | 3 | Email field has no programmatic label | 11 |
| Checkout — shipping | 1 | 3 | Errors appear silently, no live region | 18 |
| Checkout — payment | 1 | 2 | Third-party frame; inventoried, not tested | 6 |
| Account | 6 | 4 | Order table exposes no table semantics | 27 |
| Search results | 1 | 3 | Result count never announced after filtering | 14 |
| Editorial | 38 | 2 | Headings skip from h1 to h4 | 19 |
| Total | 276 | 35 | 10 templates carry every defect above | 259 |
This is the whole argument of the audit, in one table. The store has 276 pages and 10 templates — so a defect is not found 276 times, it is found once, in the template, and closes everywhere at once. That is also why the price is per state and not per page: the state is what we open, the template is what gets fixed.
| Path | Verdict | What happens |
|---|---|---|
| Catalogue → product → cart → checkout | passes | reaches payment without a trap |
| Filter drawer | fails | focus stays behind the drawer; Escape does not close it |
| Variant picker | fails | arrow keys move nothing — the swatches are divs |
| Cart drawer | passes | focus returns to the trigger on close |
| Newsletter modal | fails | opens on a timer and steals focus mid-typing |
| Check | Verdict | Evidence |
|---|---|---|
| Order of reading matches order of seeing | pass | checked on 12 states with the rail collapsed |
| Errors are announced, not only coloured | fail | checkout errors appear silently; no live region |
| Every image carries a purpose or an empty alt | partial | 19 of 24 product images repeat the product name |
| Video has captions | n/a | no video on the tested states |
| Zoom to 200% loses nothing | fail | the sticky filter bar covers the first result row |
These five cannot be answered by any scanner. A machine can tell you an image has alt text; only a person can tell you the alt text is the word “image”.
| Frame | Type | Status | What to request from the vendor |
|---|---|---|---|
| Shop Pay — payment sheet | iframe | inventoried | Ask Shopify for their VPAT; the obligation stays with you as the merchant |
| Klarna — instalments widget | iframe | inventoried | Klarna publishes an accessibility statement; request the AA scope |
| Yotpo — reviews | iframe | inventoried | star rating conveyed by colour alone in the vendor markup |
We do not enter other people’s frames, and we say so before you ask. Under the EAA the obligation stays with the merchant either way — so the report tells you exactly what to request from each vendor, and by when.
| First 30 days | The 3 blockers and the button token Checkout becomes completable by keyboard and by screen reader |
| By day 60 | The 6 components and the remaining 2 tokens 312 of 371 weighted findings close |
| By day 90 | Manual review items, statement published, re-run A dated pass with a diff, and the acceptance round by a blind specialist |
Linden & Frost is working towards WCAG 2.1 level AA. As of the date of this assessment the following are known not to conform: the filter drawer traps keyboard focus, variant swatches are not operable by keyboard, and checkout validation errors are not announced. Third-party payment and review frames are supplied by Shopify, Klarna and Yotpo; we have requested their conformance information. Feedback: accessibility@lindenfrost-sample.example.
A statement that lists what does not work is worth more than one that claims everything does — and it is what the directive asks for. This draft is yours to publish, edit or ignore.
sections/checkout-contactsections/product-form--color-button-primarylayout/headerSample report over a fictional store — assembled to show the deliverable's structure and depth; the store does not exist and every number above is illustrative. The sections are the real ones: a run against a live store returns this document with your states, your tokens, your components and your register — the findings register here is shortened to three entries, where a real one runs to the full count named above. Qiksy is not a law firm; an audit is a technical assessment, not a certificate of conformance.