ai-friendly-web-designlisted

# AI-Friendly Web Design (AI Accessibility) > Original: [@karminski-牙医](https://weibo.com/2169039837/QxmP8bEIS) · Compiled by: [@ianho7](https://github.com/ianho7) Core principle: **Treat AI agents the same way you'd treat a screen reader for a visually impaired user.** Getting AI Accessibility right is a win on three fronts simultaneously: future-proofing for agent traffic, improving human accessibility, and boosting SEO. --- ## Prime Directive **Minimize modals and popups.** They're bad for humans and bad for AI. When you must alert the user, use a banner instead. --- ## Core Checklist ### DOM Structure & Semantics - **Use semantic HTML tags**: `<main>`, `<article>`, `<nav>`, `<button>`, etc. Add `aria-label` to icon-only buttons - **Hide decorative elements**: Mark long SVGs, background layers, and visual noise with `aria-hidden="true"` or `data-ai-hidden="true"` to reduce irrelevant token consumption - **Provide stable locators**: Add `data-testid="submit-order"` or `data-ai-action="submit-order"` to key interactive nodes — never rely on volatile Tailwind-generated class names ### Forms & Interactions - **Use native form controls**: Prefer `<select>`, `<input type="checkbox">` over div-based custom components — native controls have standard APIs that tools like Playwright can drive directly - **Don't hide actions behind hover**: Agents won't probe hover states; content that's only visible on hover may never be discovered - **Listen to `input`/`change` events**