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.
Conformance target: WCAG 2.2 Level AA
Tested with (accessibility support baseline)
- Chrome 127 · NVDA 2024.2 · Windows 11
- Safari 17 · VoiceOver · macOS 14
- Chrome (Android) · TalkBack 14 · Android 14
How the sample was chosen: A representative sample chosen per WCAG-EM Step 3: the key entry pages plus the complete purchase process, selected to cover each distinct page type (home, listing, product detail, cart/checkout, contact form) and the interactive components they share (navigation, search, forms, add-to-cart).
- 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
Grouped by page, most affected first.
Cart & checkout 1
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>
Site-wide / all pages 2
The gray 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 */
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; }
Contact 1
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">
Browse books 1
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 unlabeled list of "image, image, image".
- <img src="lighthouse.jpg" alt=""> + <img src="lighthouse.jpg" alt="The Lighthouse by V. Marsh — cover">
How this audit was conducted
This audit followed my standard 10-working-day method, evaluated against WCAG 2.2 Level AA using the W3C WCAG-EM methodology: a defined scope, a representative page sample, and a pass/fail outcome for each success criterion. 70 of 72 checks applied to this site's scope; the remaining checks cover features this site doesn't have.
See my full audit methodology →
Stage 1 · Getting started & first scan
- Held the kickoff call and agreed the work in writing Pass
- Agreed which pages to test Pass
- Agreed the accessibility standard to test against Pass
- Agreed the test environment — the browsers, assistive technology and operating systems the site will be checked with Pass
- Ran automated checks across the sample pages Pass
- Reviewed the automated results by hand and removed false alarms Pass
Stage 2 · Testing with screen readers
- Tested with VoiceOver (Apple's screen reader) Pass
- Tested with NVDA (a common Windows screen reader) Pass
- Tested with TalkBack (Android's screen reader) Pass
- The page is organized so people can jump between sections Pass
- Images have text descriptions for people who can't see them Fail
- Content is read aloud in a sensible order Pass
- Links make sense on their own (not just “click here”) Pass
Stage 3 · Forms and interactive parts
Stage 4 · Using the site with a keyboard
- Everything can be used with a keyboard alone Pass
- Keyboard users never get stuck in one place Pass
- It's always clear which item is selected Fail
- Pressing Tab moves through the page in a logical order Pass
- A “skip to content” link lets people jump past the menu Pass
- Buttons and links are big enough to tap easily Pass
Stage 5 · Video, language, color and cookie banner
- Videos have captions N/A
- Videos have a described version or a transcript N/A
- The page states which language it's written in Pass
- Text stands out clearly against its background Fail
- Buttons, icons and form outlines are easy to see Pass
- The page still works zoomed in or on a narrow phone Pass
- The cookie / consent banner can be used by keyboard and screen reader Pass
Stage 6 · Matching to the standard & your statement
- Matched every issue to the official accessibility rule it breaks Pass
- Rated each issue by how much it affects people Pass
- Wrote a clear fix for every issue Pass
- Drafted your accessibility statement, ready to publish Pass
Stage 7 · Wrap-up & handover
- Put the report together and checked it over Pass
- Booked the wrap-up call with your team Pass
- Handed over the report and accessibility statement Pass