taste-accessibility

AI-generated UI is inaccessible by default. This skill makes accessible the default. Every rule below is applied during generation — not as a fix-up pass.

1. SEMANTIC STRUCTURE (The Code Skeleton)

• One <h1> per page; heading levels never skip (h1 → h3 without h2 = failure); headings carry the page outline — test by reading only headings.
• Landmarks: <header>, <nav>, <main>, <footer>, plus <aside>/<section> with accessible names where meaningful.
• Lists for lists (<ul> for nav, features), <table> only for tabular data with <th scope> headers.
• Buttons are <button>; links are <a href>; both have visible text. Icon-only controls get aria-label matching their visible tooltip.
• Decorative images: alt="" (empty). Informative images: alt describing meaning, not appearance ("Chart: conversion fell from 18% to 9% in May" — not "a blue line chart").
• aria-hidden="true" + tabindex="-1" on decorative SVG/decor; never aria-hidden on focusable elements.

2. KEYBOARD COMPLETE (Nothing Requires a Mouse or Touch)