Independent WCAG 2.1 AA testing
theaccessaudit.github.io · aaron@theaccessauditor.com

Accessibility audit of theaccessaudit.github.io/demo-store/

WCAG 2.1 Level A and AA · 4 pages tested · 17 October 2026

6 distinct issues were found across 4 pages, appearing 22 times in total. Of those, 6 are ranked critical or serious — the two levels axe-core reserves for barriers that stop a task rather than slow it down. Every entry below names the rule, the pages it appears on, the exact elements, and the fix.

3: Critical
3: Serious
0: Moderate
0: Minor

6 distinct issues, shown by severity above · 22 instances · 4 pages · engines: axe-core and IBM Equal Access

Findings

Grouped by rule and ordered by severity. Each entry names the pages it appears on, shows the exact elements involved, and links to the step-by-step fix for that rule — this section is written to be handed straight to whoever maintains the site.

01 critical Buttons a screen reader announces as just "button", with no purpose 10 instances across 4 pages · WCAG 4.1.2 (A) Who can fix it: your theme developer

For your developer Buttons must have discernible text button-name

Affected pages https://theaccessaudit.github.io/demo-store/ https://theaccessaudit.github.io/demo-store/mug.html https://theaccessaudit.github.io/demo-store/bowl.html https://theaccessaudit.github.io/demo-store/cart.html

button:nth-child(1)
<button>
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7">
          <circle cx="9" cy="9" r="6"></circle><path d="M13.5 13.5 18 18"></path>
        </svg>
      </button>

.icons > button:nth-child(2)
<button>
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7">
          <path d="M3 4h2l2 9h8l2-6H6"></path><circle cx="9" cy="16" r="1.2"></circle><circle cx="15" cy="16" r="1.2"></circle>
        </svg>
      </button>

button:nth-child(1)
<button>
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7">
          <circle cx="9" cy="9" r="6"></circle><path d="M13.5 13.5 18 18"></path>
        </svg>
      </button>

button:nth-child(2)
<button>
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7">
          <path d="M3 4h2l2 9h8l2-6H6"></path><circle cx="9" cy="16" r="1.2"></circle><circle cx="15" cy="16" r="1.2"></circle>
        </svg>
      </button>

button:nth-child(1)
<button>
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7">
          <circle cx="9" cy="9" r="6"></circle><path d="M13.5 13.5 18 18"></path>
        </svg>
      </button>

button:nth-child(2)
<button>
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7">
          <path d="M3 4h2l2 9h8l2-6H6"></path><circle cx="9" cy="16" r="1.2"></circle><circle cx="15" cy="16" r="1.2"></circle>
        </svg>
      </button>

.icons > button:nth-child(1)
<button>
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7">
          <circle cx="9" cy="9" r="6"></circle><path d="M13.5 13.5 18 18"></path>
        </svg>
      </button>

button:nth-child(2)
<button>
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7">
          <path d="M3 4h2l2 9h8l2-6H6"></path><circle cx="9" cy="16" r="1.2"></circle><circle cx="15" cy="16" r="1.2"></circle>
        </svg>
      </button>

Showing 8 of 10 affected elements. The accompanying JSON data file lists up to 25 per page for this rule.

Step-by-step fix for this rule (Deque University)

02 critical Images a screen-reader user cannot hear described 1 instance across 1 page · WCAG 1.1.1 (A) Who can fix it: you, in your store admin

For your developer Images must have alternative text image-alt

Affected pages https://theaccessaudit.github.io/demo-store/

article:nth-child(1) > img
<img class="ph" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%203'%3E%3Crect%20width='4'%20height='3'%20fill='%23ded5c8'/%3E%3C/svg%3E">

Step-by-step fix for this rule (Deque University)

03 critical Drop-down menus with no name, so a screen-reader user cannot tell what they choose 4 instances across 3 pages · WCAG 4.1.2 (A) Who can fix it: your theme developer

For your developer Select element must have an accessible name select-name

Affected pages https://theaccessaudit.github.io/demo-store/mug.html https://theaccessaudit.github.io/demo-store/bowl.html https://theaccessaudit.github.io/demo-store/cart.html

select
<select>
          <option>1</option><option>2</option><option>3</option>
        </select>

select
<select>
          <option>1</option><option>2</option><option>3</option>
        </select>

tr:nth-child(2) > td:nth-child(3) > select
<select><option>1</option><option>2</option></select>

tr:nth-child(3) > td:nth-child(3) > select
<select><option>1</option><option>2</option></select>

Step-by-step fix for this rule (Deque University)

04 serious Text is too faint against its background for many visitors to read 1 instance across 1 page · WCAG 1.4.3 (AA) Who can fix it: your theme developer

For your developer Elements must meet minimum color contrast ratio thresholds color-contrast

Affected pages https://theaccessaudit.github.io/demo-store/

span
<span class="badge">SALE</span>

Step-by-step fix for this rule (Deque University)

05 serious Links that a screen reader announces with no destination, just "link" 5 instances across 4 pages · WCAG 2.4.4, 4.1.2 (A) Who can fix it: your theme developer

For your developer Links must have discernible text link-name

a[href="#"]:nth-child(1)
<a href="#">
        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.6">
          <rect x="2" y="2" width="14" height="14" rx="4"></rect><circle cx="9" cy="9" r="3.2"></circle>
        </svg>
      </a>

a[href="#"]:nth-child(2)
<a href="#">
        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.6">
          <path d="M11 6h2V3h-2a3 3 0 0 0-3 3v2H6v3h2v6h3v-6h2l1-3h-3V6.7c0-.4.3-.7.7-.7Z"></path>
        </svg>
      </a>

a[href="#"]
<a href="#">
        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.6">
          <rect x="2" y="2" width="14" height="14" rx="4"></rect><circle cx="9" cy="9" r="3.2"></circle>
        </svg>
      </a>

a[href="#"]
<a href="#">
        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.6">
          <rect x="2" y="2" width="14" height="14" rx="4"></rect><circle cx="9" cy="9" r="3.2"></circle>
        </svg>
      </a>

a[href="#"]
<a href="#">
        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.6">
          <rect x="2" y="2" width="14" height="14" rx="4"></rect><circle cx="9" cy="9" r="3.2"></circle>
        </svg>
      </a>

Step-by-step fix for this rule (Deque University)

06 serious The page does not state its language, so screen readers may read it in the wrong accent 1 instance across 1 page · WCAG 3.1.1 (A) Who can fix it: your theme developer

For your developer <html> element must have a lang attribute html-has-lang

Affected pages https://theaccessaudit.github.io/demo-store/cart.html

html
<html>

Step-by-step fix for this rule (Deque University)

Keyboard walk

A scan reads markup. This section is different: a real browser pressed the Tab key through 4 pages and recorded what a visitor who cannot use a mouse actually experiences — what they can reach, where focus becomes invisible, whether it ever gets trapped, and whether the order of the page still makes sense. Real key presses are used rather than scripted focus, because a browser only shows its focus ring for genuine keyboard input; measuring the scripted kind would report missing focus indicators on sites that have perfectly good ones.

Coverage. 4 of 4 scanned pages walked, 62 interactive elements found and 53 of them reached by keyboard.

01 critical Controls a keyboard user cannot reach at all WCAG 2.1.1 · 3 pages Who can fix it: your theme developer

For your developer Interactive elements cannot be reached by keyboard

4 interactive element(s) were never focused by the Tab key: div "S", div "M", div "L", div "Add to cart".

Fix Use a real <button> or <a href> instead of a click handler on a <div> or <span>. If a custom control is unavoidable it needs tabindex="0", a role, and Enter/Space handling.

Affected pages https://theaccessaudit.github.io/demo-store/mug.html https://theaccessaudit.github.io/demo-store/bowl.html https://theaccessaudit.github.io/demo-store/cart.html

02 serious Keyboard users cannot see which link or button they are on WCAG 2.4.7 · 4 pages Who can fix it: your theme developer

For your developer No visible focus indicator

16 of 17 focusable elements look identical whether or not they have keyboard focus: a "The Access Audit", a "Northwind Ceramics", a "Shop", a "Mugs", a "Bowls", a "Cart", button, button, and 8 more. A keyboard visitor cannot tell where they are on the page.

Fix Remove any `outline: none` / `outline: 0` that is not immediately replaced by another visible indicator, and style :focus-visible explicitly — an outline with an offset, or a clear background or shadow change.

03 moderate Keyboard users have no shortcut past the menu WCAG 2.4.1 · 4 pages Who can fix it: your theme developer

For your developer No skip link before the navigation

The first thing the Tab key reaches is "a "The Access Audit"". On a page with 17 focusable elements, a keyboard or screen-reader visitor has to walk the whole header on every page before reaching the content.

Fix Add a link to #main as the first element in the body, visually hidden until it receives focus, and give the main content that id.

Pages scanned

URL	Issues on this page	Checks passed
`https://theaccessaudit.github.io/demo-store/`	4	15
`https://theaccessaudit.github.io/demo-store/mug.html`	3	11
`https://theaccessaudit.github.io/demo-store/bowl.html`	3	11
`https://theaccessaudit.github.io/demo-store/cart.html`	4	12

Independent second-engine cross-check

Every page was also tested with IBM's Equal Access engine — a second, independently developed accessibility checker. Running two engines catches issues either one alone would miss and confirms the findings above aren't one tool's opinion. The IBM engine flagged 50 violations across 4 pages, listed here for review. This number is not comparable to the total above. It is produced by IBM's IBM_Accessibility ruleset, which covers WCAG 2.1 A/AA plus IBM's own additional requirements, and its rule taxonomy differs from axe-core's — so the two counts measure different things and are never merged. The severity-ranked findings above remain the WCAG 2.1 A/AA result this audit is scoped to.

IBM rule	Count	Description
`svg_graphics_labelled`	15	The SVG element has no accessible name
`input_label_exists`	14	Form control element <button> has no associated label
`aria_eventhandler_role_valid`	9	The <div> element with 'onclick' does not have a valid ARIA role specified
`a_text_purpose`	5	Hyperlink has no link text, label or image with a text alternative
`aria_content_in_landmark`	4	Content is not within a landmark element
`img_alt_valid`	1	The image has neither an accessible name nor is marked as decorative or redundant
`text_contrast_sufficient`	1	Text contrast of 2.06 with its background is less than the WCAG AA minimum requirements for text of size 12px and weight of 700
`html_lang_exists`	1	Page detected as HTML, but does not have a 'lang' attribute

Machine readability

The same crawl that produced the findings above also records what a machine can read from each page: the structured data, the page titles, and the rules your site states for automated crawlers. These are not WCAG findings and are not part of the conformance result — they are listed because the crawl had already collected them, and because several of them are the same fix as an accessibility item above. An unnamed button is announced as "button" by a screen reader, and it is equally opaque to anything else reading the page.

What this does and does not tell you. It reports whether your pages are readable by a machine. It says nothing about whether any assistant or search engine will choose to use them — that is not something we control or can verify, and no part of this report should be read as a claim about it.

serious No structured data anywhere

None of the 4 pages scanned carry JSON-LD or microdata. Everything about who this business is has to be inferred from prose.

Fix Add an Organization or LocalBusiness block on the homepage first — name, URL, address, phone.

serious 2 pages share a title Also WCAG 2.4.2 Page Titled

"products — northwind ceramics" on 2 pages (https://theaccessaudit.github.io/demo-store/mug.html, https://theaccessaudit.github.io/demo-store/bowl.html)

Fix Write a distinct title per page — identical ones make the pages indistinguishable.

moderate No canonical URLs

None of the 4 pages scanned declares a canonical URL.

Fix Add <link rel="canonical"> to each page so duplicate paths resolve to one address.

moderate 3 pages share a meta description

"small-batch stoneware, thrown and glazed by hand in ojai, ca" on 3 pages (https://theaccessaudit.github.io/demo-store/, https://theaccessaudit.github.io/demo-store/mug.html)

Fix Write a distinct meta description per page — identical ones make the pages indistinguishable.

Where a finding actually lives

Not every finding is yours to fix. Some originate in your website platform's own components or in a third-party embed (a page builder's gallery control, a booking widget, a payment iframe) rather than in markup you control. They are real barriers for your users and they belong in this report, but the fix is raised with that vendor rather than made in your site. Where a finding sits in a component you cannot edit, it is flagged in the walkthrough and is never included in a remediation quote as though it were yours to fix.

What automated scanning cannot check

Automated engines reliably detect roughly half of WCAG issues. Full conformance also depends on the checks below, which require a human reviewer — they are listed here so this report never overstates what a scan alone proves.

Manual check	Why it matters
Keyboard-only navigation	Every interactive element must be reachable and operable without a mouse (WCAG 2.1.1)
Screen-reader task flows	Announcements, reading order, and form feedback in VoiceOver/NVDA (WCAG 4.1.2, 1.3.1)
Focus visibility & order	A visible focus indicator following a logical sequence (WCAG 2.4.3, 2.4.7)
Alt-text quality	A scan verifies alt text exists — a human verifies it is meaningful (WCAG 1.1.1)
Media captions & transcripts	Accuracy of captions on video/audio content (WCAG 1.2.x)
Zoom & reflow	Content usable at 200% zoom and 320 CSS px width without loss of content or functionality (WCAG 1.4.4 Resize Text, 1.4.10 Reflow)
Motion & auto-playing content	Anything that moves, blinks or scrolls for more than five seconds can be paused, stopped or hidden (WCAG 2.2.2)