One page: the CityLights demo content of the W3C Before and After Demonstration inaccessible home page (https://www.w3.org/WAI/demos/bad/before/home.html). The W3C wrapper around the demo (yellow header with "Skip to inaccessible demo page", demo navigation, and footer) is out of scope.
About this sample: the page audited is a public teaching demo built by the W3C Web Accessibility Initiative to be inaccessible on purpose. It is not a real business. This report is not legal advice and is not a certification of compliance.
Summary
We tested one page against WCAG 2.2 AA using axe-core 4.13, Lighthouse 12.8, a WAVE-style visual review, and a manual keyboard pass reasoned from the page's code and confirmed in a browser.
The page has 3 critical, 5 serious, and 2 moderate issues (plus 1 minor item outside scope). Keyboard users cannot follow 14 of 20 links, the image-only menu has no names for screen readers, and the quick menu navigates away on the first arrow key press.
Automated tools flagged 8 axe-core rule failures and gave a Lighthouse accessibility score of 53/100. The most serious barrier, focus being thrown away, was found only by manual testing.
Most fixes are small and mechanical: delete onFocus="blur();", add alt text and a lang attribute, label the quick menu, and use real headings. Reflow needs a layout rework.
Issues by severity
Severity
Issues
Meaning
critical
3
blocks some people from using the page or completing a task
Manual keyboard test (axe-core has no rule for this)
Where
14 of the 20 links in the demo content: the left navigation (Home, News, Tickets, Survey), the three news headlines, the three "more" arrows, both "Click here" links, and both "Read More..." links. Each has onFocus="blur();".
Why it matters
When a keyboard user tabs to one of these links, the page immediately removes focus from it. Pressing Enter then does nothing. In our test, focusing the News link and pressing Enter left us on the home page. People who use a keyboard, switch device, or voice control that relies on focus cannot follow these links at all.
How to fix
Delete the onFocus="blur();" attributes. Never remove focus from an element when it receives it. If the outline was removed for looks, restyle it instead.
Before
<a href="news.html" onFocus="blur();">Heat wave linked to temperatures</a>
Left navigation: 4 links whose only content is an image of text with no alt attribute (nav_home.gif, nav_news.gif, nav_facts.gif, nav_survey.gif). News stories: 3 "more" arrow links whose image has alt="".
Why it matters
A screen reader announces these as "link" with no name, or reads out the file name or URL. A blind visitor can't tell which link goes to News and which to Tickets, and voice control users can't say the link's name to click it.
How to fix
Use real text links for navigation (better), or give each image alt text that matches the words in the image. For the arrows, give each link a name that says where it goes.
3. Quick menu has no label and jumps to a new page when you arrow through it
critical · 3.2.2 On Input (A); 4.1.2 Name, Role, Value (A); 3.3.2 Labels or Instructions (A)
Found by
axe-core select-name; manual keyboard test
Where
The "QUICKMENU ---->" drop-down in the top banner (<select onchange="location.href = this.value;">).
Why it matters
The drop-down has no label, so a screen reader just says "combo box". Worse, keyboard users move through options with the arrow keys, and each arrow press fires onchange. In our test, one press of the down arrow navigated away to the first option's page, so keyboard users can never reach the other 14 options.
How to fix
Give the select a visible label and only navigate when the person presses a Go button. Better still, replace it with an ordinary list of links.
4. Images are missing text alternatives, or have wrong or unhelpful ones
serious · 1.1.1 Non-text Content (A)
Found by
axe-core image-alt (33 images); manual review
Where
33 <img> elements have no alt attribute. Most are layout spacers and borders (border_*.gif, marker2_*.gif, blank_5x5.gif). Meaningful images without alt: the weather icon (top_weather.gif, a sun behind a cloud) and the two right-column photos (teaser_right1.jpg, a singer on a dark stage; teaser_right2.jpg). The three news photos are CSS background images with title="image", so there is no text alternative at all. The hotline image shows "(1) 269 C-H-O-K-E" but its alt says "1234 56789". The logo's alt text is a 60-word visual description. Bullet images have alt="bullet".
Why it matters
Screen readers read out missing-alt images as file names ("border underscore left underscore top dot gif"), dozens of times on this page. Meanwhile, information that matters is lost or wrong: a blind visitor who wants artichoke advice would be given the wrong phone number.
How to fix
Decorative images: alt="" (or move them into CSS). Meaningful images: short alt text that gives the same information. Content photos: use <img> with alt, not CSS backgrounds. Logo: alt="CityLights: your access to the city". Phone number: use real text.
<img src="./img/border_top.gif" height="10" alt="">
<p>Artichoke advice hotline: (1) 269 C-H-O-K-E</p>
<img src="./img/panda-sm.jpg" alt="[describe the photo's point in the story]">
5. Page language is not set
serious · 3.1.1 Language of Page (A)
Found by
axe-core html-has-lang; Lighthouse
Where
The <html> element has no lang attribute.
Why it matters
Screen readers use the language to choose pronunciation. Without it, a reader set to another language may read English text with the wrong accent and rules, making it hard to understand. Browser translation and spell-check also rely on it.
How to fix
Add the page language to the html element.
Before
<HTML>
After
<html lang="en">
6. No headings or page structure in the demo content
serious · 1.3.1 Info and Relationships (A); 2.4.6 Headings and Labels (AA)
Found by
Manual DOM review (0 heading elements in the demo); axe-core region and landmark-one-main (best practice)
Where
"Welcome to CityLights", "Elsewhere on the Web", the three news headlines, and the "Free Penguins" and "More City Parks" teasers all look like headings but are styled paragraphs, <b>, or <font> text. The layout is built with nested tables. There is no <main>, <nav>, or other landmark.
Why it matters
Screen reader users commonly move through a page by heading or landmark to find what they need. With no headings and no landmarks, they have to listen to the whole page from the top, including dozens of spacer images.
How to fix
Mark up visual headings as real headings in a logical order, use landmarks for the main areas, and replace layout tables with CSS layout.
Before
<p class="headline">Welcome to CityLights</p>
<TABLE WIDTH=780px ...> ... </TABLE>
After
<header>...</header>
<nav aria-label="Main">...</nav>
<main>
<h1>Welcome to CityLights</h1>
<section aria-labelledby="news-h"><h2 id="news-h">Latest news</h2>
<h3>Heat wave linked to temperatures</h3> ...
</section>
</main>
7. Content does not reflow on narrow screens or at high zoom
serious · 1.4.10 Reflow (AA)
Found by
Manual test in a 320 px wide viewport (equivalent to 400% zoom on a 1280 px screen)
Where
Whole page. Fixed-width tables (WIDTH=800px and 780px) force a page width of 800 px; at 320 px wide the page needs sideways scrolling to read every line.
Why it matters
People with low vision who zoom in, and anyone on a small phone, must scroll left and right for every line of text, which is slow and makes it easy to lose your place.
How to fix
Remove fixed pixel widths and use a responsive CSS layout that stacks columns on narrow screens.
Navigation labels (nav_*.gif), the phone number (telefon_white_bg.gif), and the "CITYLIGHTS" banner text.
Why it matters
Text in images blurs when zoomed, can't be restyled by people who change fonts or colors to read comfortably, and can't be copied or translated. Logos are an allowed exception; the menu and phone number are not.
How to fix
Use real HTML text styled with CSS for navigation and the phone number.
Before
<img src="./img/nav_news.gif">
After
<a href="news.html" class="nav-link">News</a>
10. Link text that doesn't say where it goes
moderate · 2.4.4 Link Purpose (In Context) (A)
Found by
Manual review
Where
Two "Click here" links (Killer bees, Onions) and two "Read More..." links in the right column. The "Click here" links also open a new window without warning.
Why it matters
Screen reader users often pull up a list of links to scan a page. A list with "Click here, Click here, Read More..., Read More..." tells them nothing. An unexpected new window can disorient people, especially when the Back button stops working.
How to fix
Make the link text describe the destination, and say when a link opens a new window (or don't open one).
<a href="../offsite.html">Killer bee safety information (external site)</a>
11. Small adjacent links in the W3C wrapper (out of scope, noted for completeness)
minor · 2.5.8 Target Size (Minimum) (AA)
Found by
axe-core target-size
Where
The "Report" links in the W3C demo navigation, outside the CityLights page.
Why it matters
Small, tightly packed targets are hard to hit for people with tremors or limited dexterity.
How to fix
Not part of the audited page. Listed so the axe-core results reconcile with this report.
Method and limits
Automated scan
axe-core 4.13.0 via @axe-core/playwright, rule tags wcag2a/aa, wcag21a/aa, wcag22aa and best-practice, run on the live page in Chrome (headless), October 24, 2026.
Lighthouse
Lighthouse 12.8.2 accessibility category. The W3C site served an automated-traffic check page to Lighthouse's headless browser, so Lighthouse was run against a byte-for-byte local copy of the page and its images and stylesheets (fetched with wget) served from localhost.
WAVE methodology
Visual review of the same items WAVE highlights: alt text, structure, contrast, links, and form labels. The WAVE tool itself was not run.
Manual keyboard pass
Reasoned from the DOM, then confirmed with scripted keypresses in Chrome via Playwright: tab sequence from the start of the demo, Enter on a focused link, arrow key on the quick menu.
Reflow
Page loaded in a 320 × 640 CSS pixel viewport; document width measured (800 px).
Not covered
Screen reader listening session (not performed for this sample; findings that affect screen readers are inferred from the code), mobile devices, other pages of the demo.
Next steps
Fix the three critical issues first (items 1 to 3). They are small code changes.
Add alt text and the page language, and fix contrast (items 4, 5, 8).
Plan the structural rework: headings, landmarks, and a responsive layout (items 6, 7).
Re-test with a keyboard and a screen reader after fixes.
