.ux-audit-examples-index summary { cursor: pointer; font-weight: 600; } .ux-rule-example [data-ks-embed-main] { display: block; max-width: 100%; }

Before/After gallery only. For purpose, scope, WCAG/axe context, and remediation — open the rule catalog and use Open page (example: DET.A11Y.GENERIC.LANG).

Scroll for rendered examples, or jump via the index below.

← Accessibility auditor ecosystem

DET.A11Y rules (17) — jump to rule
RuleLinks
DET.A11Y.GENERIC.APP_FOCUS_TRAPExamples · Handbook
DET.A11Y.GENERIC.CONTRASTExamples · Handbook
DET.A11Y.GENERIC.DATA_TABLE_HEADERSExamples · Handbook
DET.A11Y.GENERIC.DIAGRAM_ALTExamples · Handbook
DET.A11Y.GENERIC.FOCUS_ORDERExamples · Handbook
DET.A11Y.GENERIC.IMAGES_ALTExamples · Handbook
DET.A11Y.GENERIC.LANDMARKSExamples · Handbook
DET.A11Y.GENERIC.LANGExamples · Handbook
DET.A11Y.GENERIC.MOTION_FLASHExamples · Handbook
DET.A11Y.GENERIC.MOTION_REDUCEDExamples · Handbook
DET.A11Y.GENERIC.TITLEExamples · Handbook
DET.A11Y.GENERIC.VIEWPORTExamples · Handbook
DET.A11Y.KS.BREADCRUMBExamples · Handbook
DET.A11Y.KS.HANDBOOK_SINGLE_H1Examples · Handbook
DET.A11Y.KS.HASH_MARKERSExamples · Handbook
DET.A11Y.KS.PY_HASH_ATTRSExamples · Handbook
DET.A11Y.KS.REACT_A11Y_ROLEExamples · Handbook

DET.A11Y.GENERIC.APP_FOCUS_TRAP — App Focus Trap

Lane
deterministic · page current
Scope
generic · standards: wcag2aa
Full handbook
Open handbook — purpose, scope, Before/After, remediation

Before (failing example)

Placeholder failing state for DET.A11Y.GENERIC.APP_FOCUS_TRAP (generic).

After (passing example)

Placeholder passing state for DET.A11Y.GENERIC.APP_FOCUS_TRAP.

DET.A11Y.GENERIC.CONTRAST — Contrast

Lane
deterministic · page current
Scope
generic · standards: wcag2aa
Full handbook
Open handbook — purpose, scope, Before/After, remediation

Before (failing example)

Placeholder failing state for DET.A11Y.GENERIC.CONTRAST (generic).

After (passing example)

Placeholder passing state for DET.A11Y.GENERIC.CONTRAST.

DET.A11Y.GENERIC.DATA_TABLE_HEADERS — Data Table Headers

Lane
deterministic · page current
Scope
generic · standards: wcag2aa
Full handbook
Open handbook — purpose, scope, Before/After, remediation

Before (failing example)

Placeholder failing state for DET.A11Y.GENERIC.DATA_TABLE_HEADERS (generic).

After (passing example)

Placeholder passing state for DET.A11Y.GENERIC.DATA_TABLE_HEADERS.

DET.A11Y.GENERIC.DIAGRAM_ALT — Diagram Alt

Lane
deterministic · page current
Scope
generic · standards: wcag2aa
Full handbook
Open handbook — purpose, scope, Before/After, remediation

Before (failing example)

Placeholder failing state for DET.A11Y.GENERIC.DIAGRAM_ALT (generic).

After (passing example)

Placeholder passing state for DET.A11Y.GENERIC.DIAGRAM_ALT.

DET.A11Y.GENERIC.FOCUS_ORDER — Focus Order

Lane
deterministic · page current
Scope
generic · standards: wcag2aa
Full handbook
Open handbook — purpose, scope, Before/After, remediation

Before (failing example)

Placeholder failing state for DET.A11Y.GENERIC.FOCUS_ORDER (generic).

After (passing example)

Placeholder passing state for DET.A11Y.GENERIC.FOCUS_ORDER.

DET.A11Y.GENERIC.IMAGES_ALT — Image alt text

Lane
deterministic · page current
Scope
generic · standards: wcag2aa
Full handbook
Open handbook — purpose, scope, Before/After, remediation

Before (failing example)

Decorative-only alt missing on informative graphic.

After (passing example)

Architecture diagram: three-tier flow

Alt describes the diagram purpose.

DET.A11Y.GENERIC.LANDMARKS — Landmarks

Lane
deterministic · page current
Scope
generic · standards: wcag2aa, wcag21aa
Full handbook
Open handbook — purpose, scope, Before/After, remediation

Before (failing example)

Content without a main landmark wrapper.

After (passing example)

Primary content

Footer

DET.A11Y.GENERIC.LANG — Document language

Lane
deterministic · page current
Scope
generic · standards: wcag2aa, wcag21aa
Full handbook
Open handbook — purpose, scope, Before/After, remediation

Before (failing example)

Page without lang

Simulates missing html[lang].

After (passing example)

Page with lang

Assistive tech can pick en-US voice.

DET.A11Y.GENERIC.MOTION_FLASH — Motion Flash

Lane
deterministic · page current
Scope
generic · standards: wcag2aa
Full handbook
Open handbook — purpose, scope, Before/After, remediation

Before (failing example)

Placeholder failing state for DET.A11Y.GENERIC.MOTION_FLASH (generic).

After (passing example)

Placeholder passing state for DET.A11Y.GENERIC.MOTION_FLASH.

DET.A11Y.GENERIC.MOTION_REDUCED — Motion Reduced

Lane
deterministic · page current
Scope
generic · standards: wcag21aa, wcag22aa
Full handbook
Open handbook — purpose, scope, Before/After, remediation

Before (failing example)

Placeholder failing state for DET.A11Y.GENERIC.MOTION_REDUCED (generic).

After (passing example)

Placeholder passing state for DET.A11Y.GENERIC.MOTION_REDUCED.

DET.A11Y.GENERIC.TITLE — Title

Lane
deterministic · page current
Scope
generic · standards: wcag2aa
Full handbook
Open handbook — purpose, scope, Before/After, remediation

Before (failing example)

Placeholder failing state for DET.A11Y.GENERIC.TITLE (generic).

After (passing example)

Placeholder passing state for DET.A11Y.GENERIC.TITLE.

DET.A11Y.GENERIC.VIEWPORT — Viewport

Lane
deterministic · page current
Scope
generic · standards: wcag2aa
Full handbook
Open handbook — purpose, scope, Before/After, remediation

Before (failing example)

Placeholder failing state for DET.A11Y.GENERIC.VIEWPORT (generic).

After (passing example)

Placeholder passing state for DET.A11Y.GENERIC.VIEWPORT.

DET.A11Y.KS.BREADCRUMB — Breadcrumb

Lane
deterministic · page current
Scope
ks · standards: wcag2aa
Full handbook
Open handbook — purpose, scope, Before/After, remediation

Before (failing example)

Placeholder failing state for DET.A11Y.KS.BREADCRUMB (ks).

After (passing example)

Placeholder passing state for DET.A11Y.KS.BREADCRUMB.

DET.A11Y.KS.HANDBOOK_SINGLE_H1 — Handbook single H1

Lane
deterministic · page current
Scope
ks · standards: wcag2aa
Full handbook
Open handbook — purpose, scope, Before/After, remediation

Before (failing example)

Chapter title

Duplicate from Markdown

Two top-level headings confuse screen readers.

After (passing example)

Chapter title

Section

Body starts at h2 under a single h1.

DET.A11Y.KS.HASH_MARKERS — KS hash markers

Lane
deterministic · page current
Scope
ks · standards: wcag2aa
Full handbook
Open handbook — purpose, scope, Before/After, remediation

Before (failing example)

Mismatched governed markers.

After (passing example)

Matching three-letter hash pair.

DET.A11Y.KS.PY_HASH_ATTRS — Py Hash Attrs

Lane
deterministic · page current
Scope
ks · standards: wcag2aa
Full handbook
Open handbook — purpose, scope, Before/After, remediation

Before (failing example)

Placeholder failing state for DET.A11Y.KS.PY_HASH_ATTRS (ks).

After (passing example)

Placeholder passing state for DET.A11Y.KS.PY_HASH_ATTRS.

DET.A11Y.KS.REACT_A11Y_ROLE — React A11Y Role

Lane
deterministic · page current
Scope
ks · standards: wcag2aa
Full handbook
Open handbook — purpose, scope, Before/After, remediation

Before (failing example)

Placeholder failing state for DET.A11Y.KS.REACT_A11Y_ROLE (ks).

After (passing example)

Placeholder passing state for DET.A11Y.KS.REACT_A11Y_ROLE.

AI rules

AI.A11Y rules (4) — jump to rule
RuleLinks
AI.A11Y.GENERIC.FORM_ERROR_ASSOCIATIONExamples · Handbook
AI.A11Y.GENERIC.KEYBOARD_TASK_FLOWExamples · Handbook
AI.A11Y.KS.HANDBOOK_SIDEBAR_LABELSExamples · Handbook
AI.A11Y.KS.REGION_LABELINGExamples · Handbook

AI.A11Y.GENERIC.FORM_ERROR_ASSOCIATION — Form Error Association

Lane
ai · page current
Scope
generic · standards:
Full handbook
Open handbook — purpose, scope, Before/After, remediation

Before (failing example)

Placeholder failing state for AI.A11Y.GENERIC.FORM_ERROR_ASSOCIATION (generic).

After (passing example)

Placeholder passing state for AI.A11Y.GENERIC.FORM_ERROR_ASSOCIATION.

AI.A11Y.GENERIC.KEYBOARD_TASK_FLOW — Keyboard Task Flow

Lane
ai · page current
Scope
generic · standards:
Full handbook
Open handbook — purpose, scope, Before/After, remediation

Before (failing example)

Placeholder failing state for AI.A11Y.GENERIC.KEYBOARD_TASK_FLOW (generic).

After (passing example)

Placeholder passing state for AI.A11Y.GENERIC.KEYBOARD_TASK_FLOW.

AI.A11Y.KS.HANDBOOK_SIDEBAR_LABELS — Handbook Sidebar Labels

Lane
ai · page current
Scope
ks · standards:
Full handbook
Open handbook — purpose, scope, Before/After, remediation

Before (failing example)

Placeholder failing state for AI.A11Y.KS.HANDBOOK_SIDEBAR_LABELS (ks).

After (passing example)

Placeholder passing state for AI.A11Y.KS.HANDBOOK_SIDEBAR_LABELS.

AI.A11Y.KS.REGION_LABELING — Region Labeling

Lane
ai · page current
Scope
ks · standards:
Full handbook
Open handbook — purpose, scope, Before/After, remediation

Before (failing example)

Placeholder failing state for AI.A11Y.KS.REGION_LABELING (ks).

After (passing example)

Placeholder passing state for AI.A11Y.KS.REGION_LABELING.