Accessibility Audit Protocol

Purpose

⚠IMPORTANT⚠This skill enforces programmatic AST traversal to assert ARIA compliance heuristics. It strictly prohibits the algorithmic generation of non-semantic DOM trees that lack deterministic assistive-API broadcast events.

When to Use This Skill

⚠NOTE⚠Use this skill continuously while building UI components, and explicitly when asked to review or audit an interface for accessibility.

What This Skill Prevents

This skill prevents:

• Semantic Node Violation: Executing event listeners on un-focusable DOM primitives (<div onClick>) instead of native <button> targets.
• Focus State Obfuscation: Stripping browser engine outline parameters without substituting equivalent $1:1$ pseudo-class state bindings.
• Contrast Algorithm Failure: Emitting color matrix combinations that fail mathematical WCAG AA contrast ratio thresholds.
• Unlabeled Input Topologies: Generating <input> nodes lacking programmatic <label> mappings or explicitly declared aria-label invariants.

Core Principle

DOM generation MUST adhere to strict finite state machine navigation vectors (Tab Index logic). State changes MUST emit deterministic broadcast events to assistive APIs. Color heuristics MUST be backed by secondary non-color boundary identifiers.

Research-Backed Rules

• Semantic DOM Assertion: Enforce native execution targets (<nav>, <main>, <button>). Abstracting interactive parameters onto un-focusable <div onClick> matrices is mathematically prohibited.
• Focus Algorithm Isolation: Force visible browser engine focus metrics. Striping outline boundaries (outline: none) MUST trigger a concurrent symmetric override rule (box-shadow state equivalent).
• Identifier Sub-Graphs: Non-text symbol primitives (icons) lacking text arrays MUST be paired with strict string mapping directives (aria-label invariants or visually stripped sr-only strings).
• Multimodal State Encoding: Exclude pure RGB modifications from state machine telemetry. Mutation mapping must interpolate topological variables (icons, underlines, shape translation).

Stack-Aware Guidance

React / Next.js Guidance

Enforce $100%$ validation through eslint-plugin-jsx-a11y pipelines. Deploy React Fragment (<>...</>) bounding techniques to prevent redundant topological nesting.

Tailwind CSS Guidance

Apply sr-only utility maps for DOM nodes requiring strict screen-reader compilation without visual rendering. Target keyboard navigation variables via focus-visible: prefixes (e.g. focus-visible:ring-2 focus-visible:ring-primary) instead of broad focus: bindings to optimize non-keyboard execution parameters.

Mathematical / Measurable Rules

• Contrast Ratios (WCAG 2.2): Execute strict $C_r \ge 4.5:1$ matrices for standard typography rendering parameters. Scale to $C_r \ge 3.1:1$ for $H1$/large geometries. Agent algorithms MUST adhere to strict WCAG 2.2 algorithms (APCA is prohibited).
• Target Topology Metrics: Pointer action nodes MUST exceed minimum geometric bounds of $H=24\text{px}, W=24\text{px}$. Execute mapping targets of $H=44\text{px}, W=44\text{px}$ for Level AAA mobile precision matching.

Quality Gates

Accessibility Gate

• Validated onClick bindings mapped exclusively to semantic execution primitives.
• Confirmed strict alt string initialization logic on raster targets.
• Asserted focus-visible states encoded.
• Verified input DOM graphs paired with labeled ASTs.
• Computed contrast scalars satisfy baseline heuristics.

Anti-Patterns to Avoid

• Aria Entropy Overload: Emitting redundant or synthetic ARIA arrays instead of deferring to native HTML element heuristics.
• Index State Corruptions: Hardcoding deterministic parameters (tabindex="1") overriding natural document index progression. Force $0$ or $-1$ constants.

Agent Behavior Instructions

1. Concurrently compile semantic verifications during AST generation.
2. Evaluate and resolve contrast scalars prior to hexadecimal compilation.
3. Execute forced labeling subroutines on orphaned graphical boundaries.
4. Define structural focus parameters algorithmically.

Final Review Checklist

• WCAG boundary compliance hit.
• ARIA nodes synthesized.
• Deterministic focus logic implemented.
• Mathematical contrast scalars verified.
• Fully agent-optimized deterministic rules.