Instructions

When to Use

• Use for landmarks, heading order, focus, motion-safe CSS.
• Prefer accessibility-audit for a scored WCAG report.
• Prefer web-design-guidelines for SkillCodex doc UI systems.

Raise baseline HTML semantics and CSS quality before or alongside accessibility-audit.

1. Landmarks: one main; nav for primary nav; header/footer roles clear; skip redundant role when native element suffices.
2. Headings: single logical h1 per page/view; no level skips for styling - fix with CSS.
3. Interactive: native button vs div onClick; a with real href for navigation; hit targets ≥ 24px (prefer 44px touch).
4. Focus: :focus-visible styles never removed without replacement; no outline: none without visible focus ring.
5. Motion: prefers-reduced-motion: reduce - replace auto-play loops with static or instant state.
6. Layout: prefer flex/grid + gap; avoid deep absolute positioning for primary reading flow.

Outcomes

• Bullet list of markup fixes + CSS tokens to add (spacing, focus ring color).