# Website Accessibility Audit ## E-commerce Product Detail Page — AA --- ### CARD 1 — EXECUTIVE SUMMARY The highest-impact likely gap is the **"Add to Cart" control**, which is implemented as a non-interactive element (e.g. `<div>`) with an `onclick` handler instead of a `<button>`. This simultaneously fails **2.1.1 Keyboard** and **4.1.2 Name, Role, Value**, and it sits on the page's single most commercially critical action — completing a purchase. Keyboard-only and screen-reader users are likely unable to discover or activate this control at all. Of the 16 applicable AA criteria checked against this description, **4 are LIKELY GAP**, **0 are LIKELY COMPLIANT**, and **12 (75%) are CANNOT DETERMINE FROM TEXT ALONE** — this description is too sparse (no color values, no carousel markup, no form markup, no dynamic-behavior detail) to assess most of the page. This audit should be treated as a starting triage, not a conformance picture. --- ### CARD 2 — POUR PRINCIPLE COVERAGE MAP | Principle | Criteria Checked | Likely Gaps | Cannot-Determine Count | |---|---|---|---| | PERCEIVABLE | 6 | 2 | 4 | | OPERABLE | 5 | 1 | 4 | | UNDERSTANDABLE | 3 | 0 | 3 | | ROBUST | 2 | 1 | 1 | --- ### CARD 3 — CRITERION CHECKLIST | WCAG Criterion | POUR Principle | Status | Evidence | Note | |---|---|---|---|---| | 1.1.1 Non-text Content | PERCEIVABLE | LIKELY GAP | Image carousel described as having no alt text | Screen-reader users get no description of the product images shown in the carousel | | 1.3.1 Info and Relationships | PERCEIVABLE | CANNOT DETERMINE FROM TEXT ALONE | Carousel's underlying markup/structure (list semantics, slide grouping, ARIA roles) not described | Cannot verify whether carousel structure is programmatically conveyed without seeing markup | | 1.4.1 Use of Color | PERCEIVABLE | LIKELY GAP | In-stock/out-of-stock status described as color-only | Users who cannot perceive color (color-blind, low-vision, some screen-reader configurations) have no way to distinguish stock status | | 1.4.3 Contrast (Minimum) | PERCEIVABLE | CANNOT DETERMINE FROM TEXT ALONE | No hex/RGB values or described visual relationship given for any text or UI element | Requires a contrast-checking tool against actual rendered colors | | 1.4.10 Reflow | PERCEIVABLE | CANNOT DETERMINE FROM TEXT ALONE | No layout/responsive behavior described | Requires live testing at 400% zoom / narrow viewport | | 1.4.11 Non-text Contrast | PERCEIVABLE | CANNOT DETERMINE FROM TEXT ALONE | No color/boundary values given for buttons, carousel controls, or status indicator | Requires a contrast-checking tool against actual rendered UI component colors | | 2.1.1 Keyboard | OPERABLE | LIKELY GAP | "Add to Cart" built from a non-interactive element with an onclick handler; no keyboard handler described | Keyboard-only users likely cannot focus or activate this control, blocking the core purchase action | | 2.1.2 No Keyboard Trap | OPERABLE | CANNOT DETERMINE FROM TEXT ALONE | Carousel's keyboard focus behavior not described | Requires live keyboard testing of carousel navigation | | 2.4.3 Focus Order | OPERABLE | CANNOT DETERMINE FROM TEXT ALONE | Tab order across carousel, status indicator, and Add to Cart not described | Requires live keyboard tab-order testing | | 2.4.7 Focus Visible | OPERABLE | CANNOT DETERMINE FROM TEXT ALONE | No focus-indicator styling described | Requires live keyboard testing / visual inspection of focus states | | 2.5.3 Label in Name | OPERABLE | CANNOT DETERMINE FROM TEXT ALONE | Whether the Add to Cart control has an accessible name matching its visible text is not described | Requires inspecting the accessible name via dev tools or a screen reader | | 3.2.4 Consistent Identification | UNDERSTANDABLE | CANNOT DETERMINE FROM TEXT ALONE | No information on other pages/components for comparison | Requires cross-page review | | 3.3.1 Error Identification | UNDERSTANDABLE | CANNOT DETERMINE FROM TEXT ALONE | Behavior when adding an out-of-stock item, or other error states, not described | Requires live testing of error/edge-case flows | | 3.3.2 Labels or Instructions | UNDERSTANDABLE | CANNOT DETERMINE FROM TEXT ALONE | Any size/quantity/variant selectors on the page are not described | Requires markup or live inspection of form controls | | 4.1.2 Name, Role, Value | ROBUST | LIKELY GAP | "Add to Cart" element lacks native button semantics (role, keyboard focusability, state) | Screen-reader users may not perceive the control as interactive or actionable at all | | 4.1.3 Status Messages | ROBUST | CANNOT DETERMINE FROM TEXT ALONE | Whether an "item added" confirmation is announced to assistive technology is not described | Requires screen-reader testing (e.g. NVDA/VoiceOver) of the add-to-cart action | --- ### CARD 4 — GAP IMPACT DIAGNOSTIC **1.1.1 Non-text Content** | Factor | Score | Status | Rationale | |---|---|---|---| | Criterion Clarity | High | Objective | Presence/absence of alt text is binary and directly stated | | User Impact Breadth | High | Broad | Affects all screen-reader users evaluating the product visually | | Workaround Availability | Low | Limited | No stated alternative text description of what the images show | | Assistive Technology Impact Severity (OPERATIONAL EXTENSION — NOT PART OF THE WCAG CONFORMANCE LEVEL) | HIGH | Operational | Product images are central to the purchase decision on this page type; without alt text, AT users cannot evaluate the product visually at all | **1.4.1 Use of Color** | Factor | Score | Status | Rationale | |---|---|---|---| | Criterion Clarity | High | Objective | Description explicitly states status is color-only | | User Impact Breadth | Moderate | Broad | Affects color-blind and low-vision users specifically | | Workaround Availability | Low | Limited | No text/icon equivalent described alongside the color cue | | Assistive Technology Impact Severity (OPERATIONAL EXTENSION — NOT PART OF THE WCAG CONFORMANCE LEVEL) | HIGH | Operational | Misreading stock status can lead to failed checkout attempts or wasted effort on unavailable items — a functional, commercial-impact failure | **2.1.1 Keyboard** | Factor | Score | Status | Rationale | |---|---|---|---| | Criterion Clarity | High | Objective | Non-interactive element with only an onclick handler is a well-established anti-pattern | | User Impact Breadth | High | Broad | Affects all keyboard-only users and most screen-reader/switch-device users | | Workaround Availability | Low | Limited | No alternate path to add the item to cart is described | | Assistive Technology Impact Severity (OPERATIONAL EXTENSION — NOT PART OF THE WCAG CONFORMANCE LEVEL) | HIGH | Operational | Likely blocks the page's single core commercial action entirely for affected users, not merely degrading it | **4.1.2 Name, Role, Value** | Factor | Score | Status | Rationale | |---|---|---|---| | Criterion Clarity | High | Objective | Element lacks native button role, name, and state exposure | | User Impact Breadth | High | Broad | Screen-reader users may not even recognize this as an interactive control | | Workaround Availability | Low | Limited | No alternate accessible route to the control's function is described | | Assistive Technology Impact Severity (OPERATIONAL EXTENSION — NOT PART OF THE WCAG CONFORMANCE LEVEL) | HIGH | Operational | Compounds directly with 2.1.1 — the control may be entirely invisible to screen-reader users as something actionable | **Core Impact Reading:** All four confirmed gaps carry HIGH Assistive Technology Impact Severity, but they are not equivalent in consequence. The Add to Cart control's two gaps (2.1.1, 4.1.2) represent a hard functional blocker on the page's primary conversion action — this is qualitatively worse than a degraded-but-completable experience. The color-only stock indicator creates a risk of incorrect purchase decisions rather than an outright block. The missing carousel alt text degrades product evaluation and buyer confidence without necessarily preventing the transaction itself. --- ### CARD 5 — HIGH-IMPACT GAPS RANKED 1. **2.1.1 Keyboard** — "Add to Cart" not operable by keyboard; likely blocks the core transaction outright for affected users. 2. **4.1.2 Name, Role, Value** — Same control also lacks semantics needed for AT users to even perceive it as interactive; compounds gap #1. 3. **1.4.1 Use of Color** — Stock status conveyed by color alone; risk of failed or mistaken purchase attempts. 4. **1.1.1 Non-text Content** — Carousel images lack alt text; degrades product evaluation but does not block the transaction path. --- ### CARD 6 — CANNOT-VERIFY-FROM-TEXT LIST | Criterion | What Would Resolve It | |---|---| | 1.3.1 Info and Relationships | Inspect actual carousel DOM/markup or run an automated scanner (e.g. axe, WAVE) | | 1.4.3 Contrast (Minimum) | Contrast-checking tool (e.g. WebAIM Contrast Checker) against actual rendered colors | | 1.4.10 Reflow | Live browser testing at 400% zoom / 320px viewport width | | 1.4.11 Non-text Contrast | Contrast-checking tool against actual UI component/boundary colors | | 2.1.2 No Keyboard Trap | Live keyboard-only testing of carousel navigation | | 2.4.3 Focus Order | Live keyboard tab-order walkthrough | | 2.4.7 Focus Visible | Live keyboard testing / visual inspection of focus indicator styling | | 2.5.3 Label in Name | Inspect accessible name via browser dev tools or a screen reader | | 3.2.4 Consistent Identification | Cross-page review of comparable components | | 3.3.1 Error Identification | Live testing of error/edge-case flows (e.g. attempting to add an out-of-stock item) | | 3.3.2 Labels or Instructions | Inspect markup or live-test any variant/quantity form controls | | 4.1.3 Status Messages | Screen-reader testing (e.g. NVDA, JAWS, VoiceOver) of the add-to-cart confirmation | --- ### CARD 7 — FIX RECOMMENDATIONS | Gap | Suggested Fix | Effort (Low/Med/High) | |---|---|---| | 1.1.1 Non-text Content | Add descriptive alt text to each carousel image (e.g. "Blue cotton t-shirt, front view") | Low | | 1.4.1 Use of Color | Add a text label (e.g. "In Stock" / "Out of Stock") alongside or instead of the color cue, optionally with an icon | Low | | 2.1.1 Keyboard | Replace the non-interactive element with a native `<button>`; if it must remain a non-button element, add `role="button"`, `tabindex="0"`, and `keydown` handling for Enter/Space | Medium | | 4.1.2 Name, Role, Value | Same fix as above — using a native `<button>` resolves both 2.1.1 and 4.1.2 together | Low–Medium | --- ### CARD 8 — PAGE-TYPE PRIORITY NOTE For an e-commerce product page, the Add to Cart gaps (2.1.1, 4.1.2) are the top priority in practice: this control gates the page's entire revenue-generating purpose, and a total block here is worse than a degraded experience anywhere else on the page. The color-only stock indicator is second priority — it risks incorrect purchase decisions and cart abandonment, a direct commercial cost. The missing carousel alt text is third — it weakens buyer confidence and product evaluation but doesn't halt the transaction path itself. This ranking reflects impact severity only; it did not change which criteria were checked. --- ### CARD 9 — TESTING ESCALATION NOTE Before treating this page as AA-conformant, run an automated scanner (e.g. axe, WAVE, or Lighthouse) against the live rendered page, and conduct manual testing with real assistive technology — at minimum keyboard-only navigation and at least one screen reader (NVDA, JAWS, or VoiceOver) — particularly to verify the Add to Cart control's actual keyboard operability and announced name/role/state, and to confirm whether stock status and add-to-cart confirmations are conveyed non-visually. --- ### CARD 10 — METHOD NOTE This audit is a triage aid based solely on the text description provided, not a conformance certification. Findings are organized under WCAG's four principles (Perceivable, Operable, Understandable, Robust), with an added Assistive Technology Impact Severity dimension used only to reorder priority in Card 5 — it never altered any criterion's underlying LIKELY GAP / LIKELY COMPLIANT / CANNOT DETERMINE status. The stated page type (e-commerce product page) shaped which of the identified gaps matter most in practice (Card 8) but did not narrow which criteria were checked — all 16 applicable AA criteria assessable from this description were evaluated. Because the description omits color values, markup, and dynamic behavior, three-quarters of applicable criteria could not be assessed at all. Automated scanning tools and testing with real assistive-technology users remain the only way to fully verify conformance. --- **VERDICT: GAPS IDENTIFIED — the "Add to Cart" control's lack of keyboard operability and proper name/role/value semantics is the highest-impact gap, likely blocking the page's core purchase action for keyboard-only and screen-reader users; the color-only stock indicator and unlabeled carousel images are secondary but confirmed gaps, and most other AA criteria could not be assessed from this description alone.**