Accessibility audit

Sample — https://www.w3.org/WAI/demos/bad/before/home.html · WCAG 2.2 Level AA

Sitehttps://www.w3.org/WAI/demos/bad/before/home.html
Date2026-09-07
Pages tested10
Pages found19
StandardWCAG 2.2 AA
Test engineaxe-core 4.10.2
This is a sample. The site audited here is the W3C Web Accessibility Initiative's Before and After Demonstration — a training site W3C built deliberately inaccessible so that tools can be tested against it. We use it as our sample so that no real company's failures become our marketing. Your report has exactly this structure, with your site's findings in it.

Summary

31/100
Accessibility score · UrgentAn indicator of how much is wrong and how badly, not a certificate. 100 means our tests found nothing.
7Problems to fix
276Total instances
3critical
4serious

We tested 10 pages against WCAG 2.2 AA and found 7 distinct problems, appearing 276 times in total. 3 are critical and 4 are serious - these are the ones that stop someone completing a task rather than merely annoying them.

Good news first: 5 of these are site-wide - the same defect repeated on most pages, almost always from one shared template or component. Fixing it once fixes it everywhere. Those are marked site-wide below and are where your first hour is best spent.

Findings, worst first

Ranked by severity first, then by how much of the site is affected.

Images must have alternative text

#1
critical site-wide 6 of 10 pages 183 instances WCAG 1.1.1 fix: under an hour
What it meansImages have no text alternative, so screen-reader users get nothing - or hear the file name read out.
Who it affectsBlind and low-vision users using a screen reader.
How to fix itAdd alt text describing the image's purpose. If it is decorative, use an EMPTY alt so it is skipped entirely.
<!-- meaningful -->
<img src="team.jpg" alt="The support team at the Leeds office">

<!-- decorative: empty alt, NOT missing alt -->
<img src="divider.svg" alt="">
Where
img[src$="border_left_top.gif"] — on 6 pages
img[src$="border_top.gif"] — on 6 pages
img[src$="border_left.gif"] — on 6 pages
+ 19 further variant(s) of the same problem.

Select element must have an accessible name

#2
critical site-wide 6 of 10 pages 7 instances WCAG 4.1.2 fix: minutes
What it meansA dropdown has no accessible name.
Who it affectsScreen-reader and voice-control users.
How to fix itAssociate a <label for> with the select's id.
<label for="country">Country</label>
<select id="country" name="country">...</select>
Where
select — on 6 pages
select[name="cc"] — on 1 page

All touch targets must be 24px large, or leave sufficient space

#3
serious site-wide 10 of 10 pages 25 instances WCAG 2.5.8 fix: half a day
What it meansTap targets are smaller than 24x24px and too close together (a WCAG 2.2 addition).
Who it affectsUsers with tremor or limited dexterity, and anyone on a phone.
How to fix itGive interactive elements at least 24x24px of hit area - padding counts.
.icon-btn { min-width: 24px; min-height: 24px; padding: 8px; }
Where
.inaccessible > .report[href$="home.html"] — on 6 pages
.inaccessible > .page[href$="home.html"] — on 4 pages
a[href$="#annot_06"] — on 1 page
+ 4 further variant(s) of the same problem.

Links must have discernible text

#4
serious site-wide 6 of 10 pages 30 instances WCAG 2.4.4 WCAG 4.1.2 fix: under an hour
What it meansA link has no readable text, so it is announced as just "link".
Who it affectsScreen-reader users, who often navigate by pulling up a list of links.
How to fix itGive the link real text. For icon-only links add a visually hidden label or aria-label.
<!-- broken: icon only -->
<a href="/cart"><svg .../></a>

<!-- fixed -->
<a href="/cart" aria-label="View your basket"><svg aria-hidden="true" .../></a>
Where
#home > a[onfocus="blur();"] — on 6 pages
#news > a[onfocus="blur();"] — on 6 pages
#tickets > a[onfocus="blur();"] — on 6 pages
+ 3 further variant(s) of the same problem.

Elements must meet minimum color contrast ratio thresholds

#5
serious 4 of 10 pages 14 instances WCAG 1.4.3 fix: under an hour
What it meansText does not stand out enough from its background to be readable.
Who it affectsLow-vision users, older users, and anyone on a phone in sunlight.
How to fix itWCAG 2.2 AA needs 4.5:1 for normal text and 3:1 for large text (18.66px bold or 24px+). Darken the text or lighten the background until it passes.
/* 2.3:1 - fails */
.muted { color: #9aa0a6; background: #ffffff; }

/* 4.6:1 - passes */
.muted { color: #6b7177; background: #ffffff; }
Where
tr[height="25px"]:nth-child(2) > td[bgcolor="#A9B8BF"][width="150px"] > font[color="#41545D"][size="2"] > b — on 3 pages
table[width="250px"] > tbody > tr[bgcolor="#A9B8BF"] > td:nth-child(1) > b > font[color="41545D"] — on 1 page

<html> element must have a lang attribute

#6
serious site-wide 6 of 10 pages 6 instances WCAG 3.1.1 fix: minutes
What it meansThe page does not declare what language it is in.
Who it affectsScreen-reader users - the wrong voice/pronunciation gets used for the whole page.
How to fix itSet a lang attribute on the <html> element. One line, fixes the whole page.
<html lang="en-GB">
Where
html — on 6 pages

Form elements must have labels

#7
critical 1 of 10 pages 11 instances WCAG 4.1.2 fix: under an hour
What it meansA form input has no label, so nobody can tell what to type in it.
Who it affectsScreen-reader users, and users with cognitive differences who rely on persistent labels.
How to fix itUse a real <label for>. Placeholder text is NOT a label - it disappears when typing starts.
<!-- broken -->
<input type="email" placeholder="Email">

<!-- fixed -->
<label for="email">Email address</label>
<input type="email" id="email" name="email" autocomplete="email">
Where
input[value="1"] — on 1 page
input[value="2"] — on 1 page
input[value="3"] — on 1 page
+ 8 further variant(s) of the same problem.

Pages tested

PageRules failingInstances
Welcome to CityLights! [Inaccessible Home Page]646
Inaccessible Home Page Report12
Welcome to CityLights! [Annotated Inaccessible Home Page]651
Welcome to CityLights! [Inaccessible News Page]547
Welcome to CityLights! [Inaccessible Tickets Page]642
Welcome to CityLights! [Inaccessible Survey Page]644
Welcome to CityLights! [Inaccessible Template Page]638
Inaccessible News Page Report12
Inaccessible Tickets Page Report12
Inaccessible Survey Page Report12

Method and limits

Every page listed above was loaded in a real Chromium browser at 1280×900, given time for client-side rendering to settle, and tested with axe-core 4.10.2 against the WCAG 2.0, 2.1 and 2.2 Level A and AA rule sets. Best-practice rules that are not part of the standard were excluded deliberately, so nothing here is padding.

Identical defects repeated across pages were collapsed into one finding, so the counts reflect how much work there is to do rather than how many pages you have.

What this report cannot tell you. Automated testing reliably catches roughly a third of WCAG success criteria. It cannot judge whether alt text is accurate, whether focus order is logical, whether an error message is understandable, or whether a custom widget is genuinely operable by a screen reader. A clean automated report is not a compliance certificate, and this document does not claim to be one. It finds the machine-detectable problems, which is where every remediation programme should start - not where it should stop.
Generated 08 September 2026 · tested with axe-core 4.10.2 (axe-core, MPL-2.0).
Questions about anything in this report: suttonowen28@gmail.com