` - use `

` for forms, with `

` and `` for groups - meaningful `` text (not "image1.png") **test:** disable CSS. can you still understand the page? if yes, agents can too. ### 2. ARIA: useful, not magic ARIA supplements semantic HTML — it doesn't replace it. use it when native elements can't express the interaction. - `aria-label` on buttons and links that lack visible text (icon buttons, close buttons) - `aria-expanded` on toggles, dropdowns, accordions - `aria-live` regions for dynamic content agents need to notice (status messages, notifications) - `role` attributes only when there's no native element (e.g., `role="tablist"`, `role="dialog"`) - `aria-describedby` for complex form fields that need additional context - `aria-hidden="true"` on decorative elements agents should ignore **don't do:** put ARIA on everything. over-labeling creates noise. if the native element already communicates the role, skip the ARIA. ### 3. machine-readable state agents can't interpret visual cues. a grayed-out button means nothing if `disabled` isn't set. - use `disabled` attribute on inactive controls - use `aria-selected`, `aria-checked`, `aria-pressed` for toggle states - loading states: `aria-busy="true"` on containers updating content - error states: `aria-invalid="true"` on fields with validation errors, plus `aria-errormessage` linking to the error text - empty states: render actual DOM content (not just CSS `::after` pseudo-elements) - pagination: current page marked with `aria-current="page"` **the rule:** if a human can tell the state by looking, an agent should be able to tell the state by reading the DOM. ### 4. structured data (JSON-LD + Schema.org) helps agents understand *what* your content is, not just how it's structured. - `Organization`, `Product`, `Article`, `BreadcrumbList`, `FAQPage`, `HowTo` schemas as appropriate - JSON-LD in `