TheCodeAtlas

TheCodeAtlas – A11y Form Checker (Universal Edition)

The A11y Form Checker is a powerful tool for analyzing and optimizing the accessibility of forms. It automatically detects problems with input fields, labels, buttons, mandatory fields, contrast, ARIA attributes and form structures - and makes them visible directly in the document.

With just one click you get:

a complete form accessibility check

an A11y score (0-100)

a clear list of all errors & notes

Markings directly in the form

Navigation to the problem area with a click

No server installation, no backend, no dependencies – the A11y Form Checker runs in:

✔ HTML/PHP
✔ WordPress
✔ Joomla
✔ Typo3
✔ Contao
✔ Drupal
✔ Shopware / WooCommerce
✔ Laravel, Symfony, Blade
✔ Twig/Smarty
✔ HuMo Genealogy
✔ even in iframes (if permitted)

Simply integrate – and scan directly.

✅ Main Features

🔍 Automatic form analysis

missing labels

Placeholder instead of label

Mandatory fields without aria-required

Buttons without text / without aria label

Fields without ID or with duplicate ID

poor contrast values

Forms without a submit button

Structural errors (fieldset, legend, grouping)

Tab order/focus issues (heuristic)

🧭 Interactive error list

Errors (red), notes (yellow), information (blue)

Click opens the affected field

Affected elements are visually highlighted

Flash effect for quick location

📊 A11y Form Score (0-100)

Automatic evaluation:

-5 points per mistake

-2 points per clue

minimum 0 points

shows quality and need for optimization

💡Universal Engine

works on all websites

doesn't need a framework

robust through try/catch

safe from browser restrictions

also works in dynamic pages (AJAX / SPA)

Error resistant

🎁 Bonus: A11y Structure Scan

The tool also recognizes typical structural stumbling blocks:

duplicate IDs

missing submit elements

missing groupings (fieldset/legend)

Buttons without meaningful labeling

autocomplete hints

Perfect for developers, agencies and quality control.

🧩 Compatibility

System/CMS compatible

HTML/PHP ✔ 100%
WordPress ✔
Typo3 ✔
Joomla ✔
Contao ✔
Drupal ✔
Shopware / WooCommerce ✔
Laravel / Symfony / Blade ✔
Twig / Smarty Templates ✔
HuMo Genealogy ✔ (automatic)
Static websites ✔

🔧 Technical information

CSS: ~4KB

JS: ~16KB

no cookies

no external fonts

GDPR compliant

LocalStorage optional (only the UI state)

📦 Installation

Just add two lines before </body>:

<link rel="stylesheet" href="/a11y-form-checker/form-checker.css">
<script src="/a11y-form-checker/form-checker.js" defer></script>


Done.

A “FC” button appears at the bottom right → click → start scanner.

🔗 Branding (license requirement)

The note:

“Powered by TheCodeAtlas – A11y Form Checker”

is an integral part of the license/terms of use.

➡ Removing, hiding or tampering is NOT permitted.

It must remain visible, regardless of the system.

💼 Ideal for

Company

Authorities & public institutions

Developers & Agencies

Shops + e-commerce

Blogs

private websites

Accessibility audits

SEO and quality checks

Customer contact forms

Price: 19,90 EUR


Screenshots

Demos
Demo
Demo: TheCodeAtlas A11y Form Checker
Demos
Addon