Skip to main content

Code-Patch Punch Lists

Rule-to-Code Remediation Mapping

Every detected Axe-core failure is paired with a concrete DOM selector, failing HTML snippet, WCAG 2.2 criterion reference, and copy-paste HTML/React patch example.

How to

Fixing violations cleanly in code

1

Open any scanned app's Evidence Hub inside /portal/account.

2

Inspect the exact failing CSS selector and serialized node HTML.

3

Copy the recommended HTML/ARIA/React patch snippet into your component.

4

Deploy to staging and click Re-Scan to verify resolution.

tsx
// Common fix: Accessible icon-only button & labeled form control (WCAG 4.1.2 / 1.3.1)
<button type="button" aria-label="Download JSON scorecard" onClick={handleDownload}>
  <Download className="w-4 h-4" aria-hidden="true" />
</button>

Semantic HTML over ARIA band-aids

Patch suggestions prioritize native <button type='button'>, <label htmlFor>, and semantic landmarks (<nav>, <main>) rather than div-with-role workarounds.

Grouped cross-route deduplication

Shared layout failures (e.g., navigation bar contrast or footer form labels) are grouped by rule so you fix shared components once.