About

Approximately 96% of home pages have detectable WCAG 2.1 failures. Missing form labels, unassociated table headers, absent ARIA landmarks, and elements only reachable by mouse exclude users who rely on assistive technology. Manual remediation across a full codebase consumes hours and introduces human error. This converter parses raw HTML through a rule-based engine that detects 12 categories of accessibility deficiencies and applies deterministic fixes: associating label elements with inputs via generated id attributes, injecting scope and headers on table cells, adding role and tabindex to interactive elements lacking keyboard access, and enforcing lang attributes at the document root. The tool approximates conformance improvements assuming well-structured source markup. Malformed nesting or JavaScript-generated DOM nodes fall outside static analysis scope.

Formulas

The converter applies a deterministic rule pipeline. Each rule R_i is a function that traverses the parsed DOM tree T and returns a set of issues I_i along with a mutation function M_i.

T′ = M_n ∘ M_n−1 ∘ … ∘ M₁(T)

where T is the input DOM tree, M_i is the mutation for rule i, and T′ is the accessible output tree.

ID generation uses a collision-free scheme:

id = concat("hac-", tagName, "-", counter)

where counter is a monotonically increasing integer scoped to the conversion session, and tagName is the lowercase element name. The label association rule checks:

isOrphan(input) = ¬hasExplicitLabel(input) ∧ ¬hasImplicitLabel(input) ∧ ¬hasAriaLabel(input)

where hasExplicitLabel checks for a label[for] matching the input's id, hasImplicitLabel checks if the input is wrapped inside a label element, and hasAriaLabel checks for aria-label or aria-labelledby attributes.

Reference Data

Rule ID	WCAG Criterion	Level	Issue Detected	Auto-Fix Applied
R01	1.1.1 Non-text Content	A	img missing alt	Adds alt=""
R02	1.3.1 Info and Relationships	A	input without associated label	Generates id, links label[for]
R03	1.3.1 Info and Relationships	A	th missing scope	Adds scope="col" or scope="row"
R04	1.3.1 Info and Relationships	A	td without headers	Links headers to th ids
R05	2.1.1 Keyboard	A	onclick without tabindex	Adds tabindex="0" and role="button"
R06	2.4.1 Bypass Blocks	A	No skip navigation link	Inserts skip-to-main link
R07	2.4.6 Headings and Labels	AA	Heading hierarchy skipped	Reports warning (no auto-fix)
R08	3.1.1 Language of Page	A	html missing lang	Adds lang="en"
R09	4.1.2 Name, Role, Value	A	Landmark elements missing role	Adds appropriate ARIA role
R10	4.1.2 Name, Role, Value	A	required without aria-required	Adds aria-required="true"
R11	2.4.4 Link Purpose	A	target="_blank" without indication	Adds rel="noopener noreferrer" and sr-only text
R12	1.3.1 Info and Relationships	A	fieldset without legend	Reports warning (no auto-fix)
R13	4.1.1 Parsing	A	Duplicate id attributes	Appends unique suffix
R14	2.4.2 Page Titled	A	Missing title element	Inserts placeholder title
R15	1.3.5 Identify Input Purpose	AA	Input missing autocomplete	Suggests autocomplete value

Frequently Asked Questions

No. The HTML is parsed via the browser's DOMParser API, which creates an inert document. Script elements are present in the parsed tree but never executed. No event handlers fire. This makes the tool safe for analyzing untrusted markup. However, any DOM nodes generated by JavaScript at runtime in the original page will not exist in the static HTML you paste, so those nodes cannot be analyzed.

Some older assistive technologies and browser combinations do not fully map implicit ARIA roles from HTML5 landmark elements. Adding explicit role="navigation" to <nav> or role="main" to <main> provides a redundant fallback that costs nothing in modern browsers but ensures coverage on legacy screen readers. This practice aligns with WCAG 2.1 Technique ARIA11. You can disable this rule if your target environment only includes modern user agents.

The converter identifies <th> elements in the first row and first column of each <table>. It assigns scope="col" to header cells in <thead> and scope="row" to first-column headers. For complex tables with colspan or rowspan, it generates unique id values for each <th> and builds headers attribute strings on each <td> referencing the relevant column and row header ids. Tables nested more than 2 levels deep are flagged for manual review.

The converter only adds attributes; it does not remove or modify existing ones except when resolving duplicate id values. Added attributes include role, tabindex, aria-required, alt, scope, headers, lang, and rel. If your JavaScript selects elements by id and a duplicate id is suffixed, that reference may break. The issue report flags every such change so you can update selectors accordingly.

No. Automated tools catch roughly 30% to 40% of WCAG issues. Color contrast, meaningful alt text content, logical reading order, and cognitive clarity require human judgment. This tool handles structural and attribute-level fixes. You must still manually verify color contrast ratios (minimum 4.5:1 for normal text), provide descriptive alt text where the tool inserts empty placeholders, and test with actual screen readers like NVDA or VoiceOver.

The tool detects whether the input contains an <html> root element. If not, it treats the input as a fragment and wraps it in a minimal document structure for analysis. Rules that target document-level elements (like lang on <html> or <title>) are skipped for fragments. The output preserves only your fragment without the wrapper. This is indicated in the issue report.