Accessibility audit report
WCAG groups every requirement under four principles — content must be Perceivable, Operable, Understandable and Robust.
Pages tested
The pages covered by this audit.
- Home riversidebooks.example/
- Browse books riversidebooks.example/browse
- Book detail riversidebooks.example/book/the-lighthouse
- Cart & checkout riversidebooks.example/cart
- Contact riversidebooks.example/contact
Findings & fixes
Ordered by priority. Start at the top.
The Add to cart, + and − controls are icon-only buttons with no text a screen reader can announce. A blind customer using 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.
- <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>
The grey menu and footer links sit at about 2.9:1 against white — below the 4.5:1 minimum. People with low vision, or anyone on a phone in sunlight, struggle to read them.
- color: #9aa4b2; /* 2.9:1 */ + color: #4b5563; /* 7.0:1 — passes AA */
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.
- <input type="email" placeholder="Email"> + <label for="email">Email</label> + <input id="email" type="email" autocomplete="email">
Cover images on the browse and detail pages have empty alt text. A screen reader skips them, so a blind shopper browsing by cover gets an unlabelled list of "image, image, image".
- <img src="lighthouse.jpg" alt=""> + <img src="lighthouse.jpg" alt="The Lighthouse by V. Marsh — cover">
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.
- :focus { outline: none; } + :focus-visible { outline: 3px solid #294557; outline-offset: 2px; }
How this audit was conducted
This audit followed my standard 10-working-day method — the same checklist every time, so nothing is skipped. 37 of 37 best-practice checks were verified.