View Full Executive Developer By page
Skip to report
Accessibility audit report

Digital accessibility audit

Prepared for Riverside Books (sample) · riversidebooks.example

10 July 2026Joe Gullo
EAA WCAG 2.2 AA EN 301 549
Overall score 74 / 100 Close — a few blockers to clear
How to read this Critical — blocks people now Serious Moderate Minor Dotted terms open the glossary
Executive summary

What I found, in plain language

Riverside Books is well-built and most of your pages are already in good shape — clear headings, a working keyboard path, and a readable layout. Five issues, though, stop some people from getting through checkout and finding books.

The most urgent: the add-to-cart and quantity controls have no name a screen reader can read, so a blind customer can't tell what they do. Fix that first — it directly blocks a sale. The rest are quick, well-understood fixes your developer can clear in a day or two.

Score by principle

WCAG groups every requirement under four principles — content must be Perceivable, Operable, Understandable and Robust.

Perceivable 68% · 2 issues
Operable 71% · 1 issue
Understandable 82% · 1 issue
Robust 60% · 1 issue
Scope

Pages tested

The pages covered by this audit.

Where to start

Fix these first

The highest-impact issues, quickest wins first. Clear these and your score climbs the fastest.

  1. Critical
    Cart buttons have no accessible name Cart & checkout
    Effort: low
  2. Serious
    Navigation and footer text is too low-contrast Site-wide / all pages
    Effort: low
  3. Serious
    Contact and checkout fields have no labels Contact
    Effort: medium
  4. Moderate
    Book cover images have no text alternative Browse books
    Effort: low
  5. Moderate
    No visible focus indicator when tabbing Site-wide / all pages
    Effort: low

Findings & fixes

Ordered by priority. Start at the top.

Critical A-01

Cart buttons have no accessible name

WCAG 4.1.2 · A
In plain terms

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.

Screen reader users; voice-control users who say a control's name
Cart & checkout
The 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

WCAG 1.4.3 · AA
In plain terms

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.

Low-vision users; anyone in bright light
Site-wide / all pages
The 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

WCAG 3.3.2 · A
In plain terms

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.

Screen reader users; people with memory or attention difficulties
Contact
The 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

WCAG 1.1.1 · A
In plain terms

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".

Screen reader users
Browse books
The 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

WCAG 2.4.7 · AA
In plain terms

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.

Keyboard-only users; people with motor disabilities
Site-wide / all pages
The fix 
- :focus { outline: none; }
+ :focus-visible { outline: 3px solid #294557; outline-offset: 2px; }
Impact: medium Effort: low
Credit where it's due

What's already working well

15 of 20 checks passed · 75%

A few examples:

  • The page is organized so people can jump between sections
  • Content is read aloud in a sensible order
  • Links make sense on their own (not just “click here”)
  • Errors are explained in words, not just color
View the other 11 passing checks
  • Error messages say how to fix the problem
  • Updates like “added to cart” are read aloud to screen-reader users
  • Everything can be used with a keyboard alone
  • Keyboard users never get stuck in one place
  • Pressing Tab moves through the page in a logical order
  • A “skip to content” link lets people jump past the menu
  • Buttons and links are big enough to tap easily
  • The page states which language it's written in
  • Buttons, icons and form outlines are easy to see
  • The page still works zoomed in or on a narrow phone
  • The cookie / consent banner can be used by keyboard and screen reader
Method

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.

See my full audit methodology →

Want an audit like this for your site?

This is a sample. Book a free 15-minute call and I'll walk you through what a real audit of your site would cover.

Book a free 15-minute call