# Digital accessibility audit — remediation issues

## [Critical] A-01: Cart buttons have no accessible name

**Labels:** `a11y` `severity:critical` `wcag:4.1.2`

**Where:** Cart & checkout

The **Add to cart**, **+** and **−** controls are icon-only buttons with no text a screen reader can announce. A blind customer using (glossaryterm: name-role-value text: a screen reader) hears only "button, button, button" and can't tell which one adds the book or changes the quantity — so they can't complete a purchase.

**Fix:**

```
- <button class="add"><svg aria-hidden="true">…</svg></button>
+ <button class="add" aria-label="Add The Lighthouse to cart">
+   <svg aria-hidden="true">…</svg>
+ </button>
```

_Impact: high · Effort: low_

---

## [Serious] A-02: Navigation and footer text is too low-contrast

**Labels:** `a11y` `severity:serious` `wcag:1.4.3`

**Where:** Site-wide / all pages

The grey menu and footer links sit at about 2.9:1 against white — below the (glossaryterm: color-contrast text: 4.5:1 minimum). People with low vision, or anyone on a phone in sunlight, struggle to read them.

**Fix:**

```
- color: #9aa4b2; /* 2.9:1 */
+ color: #4b5563; /* 7.0:1 — passes AA */
```

_Impact: medium · Effort: low_

---

## [Serious] A-03: Contact and checkout fields have no labels

**Labels:** `a11y` `severity:serious` `wcag:3.3.2`

**Where:** Contact

Several inputs use only placeholder text as their label. Placeholders vanish once you start typing, and most screen readers don't treat them as a real label — so people don't know what to enter, and can't check what they've typed.

**Fix:**

```
- <input type="email" placeholder="Email">
+ <label for="email">Email</label>
+ <input id="email" type="email" autocomplete="email">
```

_Impact: high · Effort: medium_

---

## [Moderate] A-04: Book cover images have no text alternative

**Labels:** `a11y` `severity:moderate` `wcag:1.1.1`

**Where:** Browse books

Cover images on the browse and detail pages have empty (glossaryterm: alt-text text: alt text). A screen reader skips them, so a blind shopper browsing by cover gets an unlabelled list of "image, image, image".

**Fix:**

```
- <img src="lighthouse.jpg" alt="">
+ <img src="lighthouse.jpg" alt="The Lighthouse by V. Marsh — cover">
```

_Impact: low · Effort: low_

---

## [Moderate] A-05: No visible focus indicator when tabbing

**Labels:** `a11y` `severity:moderate` `wcag:2.4.7`

**Where:** Site-wide / all pages

A custom stylesheet removes the browser's focus outline (`outline: none`) without adding one back. Keyboard users can't see which link or button they're on, so they get lost moving through the page.

**Fix:**

```
- :focus { outline: none; }
+ :focus-visible { outline: 3px solid #294557; outline-offset: 2px; }
```

_Impact: medium · Effort: low_

---