Accessibility audit: www.w3.org

Sample report. Real scan output on the W3C WAI "Before and After Demonstration" site, which is built with deliberate accessibility barriers for testing tools. It is not an audit of a client, and it is not a statement about W3C.

1. Executive summary

The issues that most block people using screen readers, keyboards or low vision are:

Fixing the shared templates (header, navigation, footer, cards, forms) clears most instances at once, because the same rule fails on many pages. Section 5 gives the fix per issue with code.

2. Scope and limits (read this)

This is not a compliance certificate, an accessibility statement or legal advice. Whether a site meets the European Accessibility Act, the ADA or any other law is a legal and manual-testing question.
Automated checks cover roughly 30-40% of WCAG success criteria. Tools such as axe-core detect missing names, contrast, ARIA misuse and structure; they cannot judge whether alt text is accurate, whether the focus order makes sense, whether error messages help, whether captions are correct or whether a flow works with a screen reader.
Not included: manual keyboard and screen-reader testing, PDFs, video caption review, authenticated areas (checkout, account), mobile apps, cognitive and content review.
The audit covers the pages listed in section 6 only; pages are sampled across site templates.

What was checked: axe-core 4.10 rules for WCAG 2.0/2.1/2.2 A and AA plus best practice; and Keencrest extra checks: alt-text quality heuristics, positive tabindex, visible focus change on up to 40 controls per page, focus moving against reading order, hover-state text contrast on up to 14 links and buttons per page, non-descriptive link text and unannounced new-window links. Items without a WCAG number are best practice, not WCAG failures. Heuristic findings need a human look before a fix.

3. Issues by WCAG success criterion

4. Issues by template

5. Findings and fixes, by severity

WCAG SC	Name	EN 301 549	Issue types	Elements
1.1.1	Non-text Content	9.1.1.1	image-alt, extra.alt-quality	312
1.4.3	Contrast (Minimum)	9.1.4.3	color-contrast	24
2.4.3	Focus Order	9.2.4.3	extra.focus-order	1
2.4.4	Link Purpose (In Context)	9.2.4.4	link-name, extra.generic-link-text	52
2.5.8	Target Size (Minimum)	9.2.5.8	target-size	45
3.1.1	Language of Page	9.3.1.1	html-has-lang	10
4.1.2	Name, Role, Value	9.4.1.2	select-name, label, link-name	82
Best practice	Not a WCAG failure		region, landmark-one-main, extra.new-window, empty-table-header	330

Template (path group)	Pages	Issue types	Elements
`/WAI/*`	15	14	808

criticalImages must have alternative text

Rule image-alt · WCAG 1.1.1 (EN 301 549 9.1.1.1) · 10 pages · 300 elements · rule reference

Fix: Every informative image needs a text alternative that conveys its purpose. Decorative images get an empty alt.

<img src="team.jpg" alt="The support team at the Berlin office">
<img src="divider.svg" alt="">

Example on https://www.w3.org/WAI/demos/bad/before/home.html
Selector: img[src$="border_left_top.gif"] · Element does not have an alt attribute

<img src="./img/border_left_top.gif" width="10px" height="10px">

Example on https://www.w3.org/WAI/demos/bad/before/home.html
Selector: img[src$="border_top.gif"] · Element does not have an alt attribute

<img src="./img/border_top.gif" height="10px">

criticalSelect element must have an accessible name

Rule select-name · WCAG 4.1.2 (EN 301 549 9.4.1.2) · 10 pages · 12 elements · rule reference

Fix: Selects need a label.

<label for="country">Country</label><select id="country">...</select>

Example on https://www.w3.org/WAI/demos/bad/before/home.html
Selector: select · Element does not have an implicit (wrapped) <label>

<select onchange="location.href = this.value;">

Example on https://www.w3.org/WAI/demos/bad/before/annotated/home.html
Selector: select · Element does not have an implicit (wrapped) <label>

<select onchange="location.href = this.value;">

criticalForm elements must have labels

Rule label · WCAG 4.1.2 (EN 301 549 9.4.1.2) · 2 pages · 22 elements · rule reference

Fix: Every form control needs a programmatically associated label.

<label for="email">Email address</label>
<input id="email" type="email" autocomplete="email">

Example on https://www.w3.org/WAI/demos/bad/before/survey.html
Selector: input[value="1"] · Element does not have an implicit (wrapped) <label>

<input class="align" type="radio" name="res" value="1">

Example on https://www.w3.org/WAI/demos/bad/before/survey.html
Selector: input[value="2"] · Element does not have an implicit (wrapped) <label>

<input class="align" type="radio" name="res" value="2">

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

Rule target-size · WCAG 2.5.8 (EN 301 549 9.2.5.8) · 15 pages · 45 elements · rule reference

Fix: Interactive targets should be at least 24x24 CSS px or have enough spacing (WCAG 2.2).

.icon-btn { min-width: 24px; min-height: 24px; padding: 6px; }

Example on https://www.w3.org/WAI/demos/bad/before/home.html
Selector: .inaccessible > .report[href$="home.html"] · Target has insufficient size (94px by 20px, should be at least 24px by 24px)

<a href="./reports/home.html" class="report"><span class="hidden">Inaccessible Home Page </span> Report</a>

Example on https://www.w3.org/WAI/demos/bad/before/home.html
Selector: .accessible > .report[href$="home.html"] · Target has insufficient size (94px by 20px, should be at least 24px by 24px)

<a href="../after/reports/home.html" class="report"><span class="hidden">Accessible Home Page </span> Report</a>

seriousLinks must have discernible text

Rule link-name · WCAG 2.4.4, 4.1.2 (EN 301 549 9.2.4.4, 9.4.1.2) · 10 pages · 48 elements · rule reference

Fix: Links need discernible text. Add visible text, or an aria-label for icon-only links.

<a href="/cart" aria-label="Shopping cart, 2 items"><svg aria-hidden="true">...</svg></a>

Example on https://www.w3.org/WAI/demos/bad/before/home.html
Selector: #home > a[onfocus="blur();"] · Element is in tab order and does not have accessible text

<a href="javascript:location.href='home.html';" onfocus="blur();"><img name="nav_home" src="./img/nav_home.gif" width="88" height="27" hspace="15" border="0px"></a>

Example on https://www.w3.org/WAI/demos/bad/before/home.html
Selector: #news > a[onfocus="blur();"] · Element is in tab order and does not have accessible text

<a href="javascript:location.href='news.html';" onfocus="blur();"><img src="./img/nav_news.gif" name="nav_news" width="90" height="21" hspace="12" border="0px"></a>

serious<html> element must have a lang attribute

Rule html-has-lang · WCAG 3.1.1 (EN 301 549 9.3.1.1) · 10 pages · 10 elements · rule reference

Fix: Set the page language on the root element.

<html lang="en">

Example on https://www.w3.org/WAI/demos/bad/before/home.html
Selector: html · The <html> element does not have a lang attribute

<html>

Example on https://www.w3.org/WAI/demos/bad/before/annotated/home.html
Selector: html · The <html> element does not have a lang attribute

<html>

seriousElements must meet minimum color contrast ratio thresholds

Rule color-contrast · WCAG 1.4.3 (EN 301 549 9.1.4.3) · 6 pages · 24 elements · rule reference

Fix: Text needs a contrast ratio of at least 4.5:1 (3:1 for large text) against its background. Darken the text or lighten the background.

/* before */ .muted { color: #999; }
/* after: 4.5:1 on white */ .muted { color: #767676; }

Example on https://www.w3.org/WAI/demos/bad/before/home.html
Selector: tr[height="25px"]:nth-child(2) > td[bgcolor="#A9B8BF"][width="150px"] > font[color="#41545D"][size="2"] > b · Element has insufficient color contrast of 3.88 (foreground color: #41545d, background color: #a9b8bf, font size: 9.8pt (13px), font weight: bold). Expected contrast ratio of 4.5:1

<b>Free Penguins</b>

Example on https://www.w3.org/WAI/demos/bad/before/home.html
Selector: tr[height="25px"]:nth-child(7) > td[bgcolor="#A9B8BF"][width="150px"] > font[color="#41545D"][size="2"] > b · Element has insufficient color contrast of 3.88 (foreground color: #41545d, background color: #a9b8bf, font size: 9.8pt (13px), font weight: bold). Expected contrast ratio of 4.5:1

<b>More City Parks</b>

moderateAll page content should be contained by landmarks

Rule region · Best practice · 15 pages · 309 elements · rule reference

Fix: Put all page content inside landmarks (header, nav, main, footer).

<header>...</header><nav>...</nav><main>...</main><footer>...</footer>

Example on https://www.w3.org/WAI/demos/bad/before/home.html
Selector: #logos · Some page content is not contained by landmarks

<p id="logos"><a href="https://www.w3.org/" title="W3C Home"><img alt="W3C logo" src="../img/w3c.png" height="48" width="72"></a><a href="https://www.w3.org/WAI/" title="WAI Home"><img alt="Web Accessibility Initiative (

Example on https://www.w3.org/WAI/demos/bad/before/home.html
Selector: h1 · Some page content is not contained by landmarks

<h1><span class="subhead">Inaccessible Home Page</span><span class="hidden"> -</span> Before and After Demonstration</h1>

moderateDocument should have one main landmark

Rule landmark-one-main · Best practice · 15 pages · 15 elements · rule reference

Fix: Wrap the primary content in a single main landmark.

<main id="content">...</main>

Example on https://www.w3.org/WAI/demos/bad/before/home.html
Selector: html · Document does not have a main landmark

<html>

Example on https://www.w3.org/WAI/demos/bad/before/reports/home.html
Selector: html · Document does not have a main landmark

<html lang="en">

moderateImage alt text looks low quality (file name, placeholder or redundant word)

Rule extra.alt-quality · WCAG 1.1.1 (EN 301 549 9.1.1.1) · 10 pages · 12 elements · Keencrest extra check

Fix: Replace file names, placeholders and redundant words in alt text with a short description of the image's purpose.

<img src="IMG_2041.jpg" alt="IMG_2041.jpg">
<!-- becomes -->
<img src="IMG_2041.jpg" alt="Customer unpacking a parcel">

Example on https://www.w3.org/WAI/demos/bad/before/home.html
Selector: td > div > a > img · alt is over 150 characters; move long descriptions to nearby text: "Red dot with a white letter 'C' that symbolizes a moon cresc"

<img src="./img/top_logo.gif" width="443px" height="86px" alt="Red dot with a white letter 'C' that symbolizes a moon crescent as well as the sun. This logo is followed by a black

Example on https://www.w3.org/WAI/demos/bad/before/annotated/home.html
Selector: td > div.annot_link_parent > a > img · alt is over 150 characters; move long descriptions to nearby text: "Red dot with a white letter 'C' that symbolizes a moon cresc"

<img src="../img/top_logo.gif" width="443px" height="86px" alt="Red dot with a white letter 'C' that symbolizes a moon crescent as well as the sun. This logo is followed by a black

moderateLink text is not descriptive out of context

Rule extra.generic-link-text · WCAG 2.4.4 (EN 301 549 9.2.4.4) · 2 pages · 4 elements · Keencrest extra check

Fix: Link text such as 'click here' or 'read more' has no meaning out of context. Make the text describe the destination.

<a href="/pricing">See pricing plans</a>

Example on https://www.w3.org/WAI/demos/bad/before/home.html
Selector: div > p > span > a · "Click here"

<a onfocus="blur();" href="../offsite.html" target="_blank">Click here</a>

Example on https://www.w3.org/WAI/demos/bad/before/home.html
Selector: div > p > span > a · "Click here"

<a onfocus="blur();" href="../offsite.html" target="_blank">Click here</a>

moderateKeyboard focus jumps against the visual reading order

Rule extra.focus-order · WCAG 2.4.3 (EN 301 549 9.2.4.3) · 1 pages · 1 elements · Keencrest extra check

Fix: Focus moved in a way that does not follow the visual reading order. Reorder the DOM instead of repositioning with CSS.

<!-- put the DOM in the same order users see it -->

Example on https://www.w3.org/WAI/demos/bad/before/annotated/home.html
Selector: td > div.annot_link_parent > span.annot_link.prev_sib > a · focus moves up the page by 513px

<a href="#annot_02" title="02: Image without any text alternative">02</a>

minorLink opens a new window without warning

Rule extra.new-window · Best practice · 2 pages · 4 elements · Keencrest extra check

Fix: Links that open a new window should say so.

<a href="..." target="_blank" rel="noopener">Annual report (opens in new tab)</a>

Example on https://www.w3.org/WAI/demos/bad/before/home.html
Selector: div > p > span > a · target=_blank

<a onfocus="blur();" href="../offsite.html" target="_blank">Click here</a>

Example on https://www.w3.org/WAI/demos/bad/before/home.html
Selector: div > p > span > a · target=_blank

<a onfocus="blur();" href="../offsite.html" target="_blank">Click here</a>

minorTable header text should not be empty

Rule empty-table-header · Best practice · 2 pages · 2 elements · rule reference

Fix: See the rule reference for the fix pattern.

Example on https://www.w3.org/WAI/demos/bad/before/tickets.html
Selector: th · Element does not have text that is visible to screen readers

<th style="padding-bottom:10px;"><img src="./img/headline_ticket_prices.gif" border="0"></th>

Example on https://www.w3.org/WAI/demos/bad/before/annotated/tickets.html
Selector: th · Element does not have text that is visible to screen readers

<th style="padding-bottom:10px;"><img src="../img/headline_ticket_prices.gif" border="0"></th>

6. Pages scanned

robots.txt was respected (0 URLs skipped). axe-core also reported 20 'needs review' items across these pages that cannot be decided automatically; they belong in the manual review.

Generated by Keencrest's audit tool for Your Agency. Keencrest is an AI-run business owned by Alex Lin; the scan is automated and reviewed by AI agents. Not legal advice.

URL	Title	Issue types	Elements
https://www.w3.org/WAI/demos/bad/before/home.html	Welcome to CityLights! [Inaccessible Home Page]	11	74
https://www.w3.org/WAI/demos/bad/before/reports/home.html	Inaccessible Home Page Report	3	40
https://www.w3.org/WAI/demos/bad/before/annotated/home.html	Welcome to CityLights! [Annotated Inaccessible Home Page]	12	82
https://www.w3.org/WAI/demos/bad/before/news.html	Welcome to CityLights! [Inaccessible News Page]	8	56
https://www.w3.org/WAI/demos/bad/before/tickets.html	Welcome to CityLights! [Inaccessible Tickets Page]	10	51
https://www.w3.org/WAI/demos/bad/before/survey.html	Welcome to CityLights! [Inaccessible Survey Page]	9	66
https://www.w3.org/WAI/demos/bad/before/template.html	Welcome to CityLights! [Inaccessible Template Page]	9	46
https://www.w3.org/WAI/demos/bad/before/reports/news.html	Inaccessible News Page Report	3	40
https://www.w3.org/WAI/demos/bad/before/reports/tickets.html	Inaccessible Tickets Page Report	3	40
https://www.w3.org/WAI/demos/bad/before/reports/survey.html	Inaccessible Survey Page Report	3	40
https://www.w3.org/WAI/demos/bad/before/reports/template.html	Inaccessible Template Report	3	40
https://www.w3.org/WAI/demos/bad/before/annotated/news.html	Welcome to CityLights! [Annotated Inaccessible News Page]	8	58
https://www.w3.org/WAI/demos/bad/before/annotated/tickets.html	Welcome to CityLights! [Annotated Inaccessible Tickets Page]	10	56
https://www.w3.org/WAI/demos/bad/before/annotated/survey.html	Welcome to CityLights! [Annotated Inaccessible Survey Page]	9	68
https://www.w3.org/WAI/demos/bad/before/annotated/template.html	Welcome to CityLights! [Annotated Inaccessible Template Page]	9	51