WCAG 2.1 AA for your online store: 3 real failures found by scanning a live HTML page
WCAG 2.1 AA for your online store: 3 real failures found by scanning a live HTML page WCAG 2.1 AA is the practical baseline behind most legal accessibility frameworks (EN 301 549 in the EU, Section 508 and ADA case law
WCAG 2.1 AA for your online store: 3 real failures found by scanning a live HTML page
WCAG 2.1 AA is the practical baseline behind most legal accessibility frameworks (EN 301 549 in the EU, Section 508 and ADA case law in the US). Most articles about it stay abstract. This one doesn't: below are 3 real, reproducible findings from scanning the storefront HTML of a live small-business online shop (elementor/WooCommerce stack), plus the actual CSV output of the scan.
Finding 1 — links that go nowhere (2.4.4, Level A)
<a id="elementor-menu-cart__toggle_button" href="#" aria-expanded="false">
The visible text next to this link is a price (0,00 EUR), not an action. href="#" means the link has no real destination — it depends entirely on JS to do anything, and a screen reader user tabbing to it hears a price, not "open cart". Fix: use a <button> element for JS-only actions, or give the anchor a real aria-label describing the action ("Open shopping cart").
Finding 2 — aria-hidden on interactive content (1.3.1 / 4.1.2, Level A)
<div class="elementor-menu-cart__container" aria-hidden="true"> ... cart contents and controls ... </div>
Two blocks in this page carry aria-hidden="true" while containing interactive controls and real text content. This pattern is valid if the panel is collapsed and the attribute toggles via JS when it opens — but it's a failure if the attribute stays fixed regardless of state, because it silently removes the whole cart from assistive tech even when visually open. You can't confirm which case you're in from static HTML alone: it needs a manual check with the panel open in a real browser.
Finding 3 — contrast and keyboard focus: what a scanner can't tell you
The same scan found 0 duplicate IDs (good, no automated tool needed) but explicitly could NOT evaluate:
- 1.4.3 Color contrast (AA) — needs computed colors after CSS cascades, not visible in raw HTML.
- 2.1.1 / 2.4.7 Keyboard + focus visible (A/AA) — needs real Tab/Enter interaction in a browser.
- Screen reader verification — needs NVDA/JAWS/VoiceOver operated by a person.
Any tool (ours included) that claims to "pass" these from static HTML alone is lying to you. A trustworthy automated report says NO EVALUADO / NOT EVALUATED for what it genuinely can't check, instead of guessing.
The actual CSV this scan produced
Here's the real output, not a mockup: informe_muestra_caprichosboutiqueonline.csv — 8 criteria checked, each marked PASA / FALLO CONFIRMADO / CANDIDATO A REVISAR / NO EVALUADO, with the exact HTML element and a plain-language explanation for each row. This is the same format you get if you order the audit below.
If you want this done on your own store
We run this scan (7+ WCAG 2.1 AA criteria, EN 301 549 mapping) against your storefront HTML and hand you back a report exactly like the CSV above — what fails, what passes, what needs a manual check, and the concrete fix for each. $99, one-time, full refund if we can't access your site.
👉 Order the EAA/WCAG audit — $99
Questions before buying? Reply here or check the report format above first.
Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes — full credit and traffic to the original publisher.