Accessible widgets checklist

Run this list on every widget in the library and anything you build from it.

1. It's a real element. Buttons are <button>, links are <a href>.
2. It works with the keyboard. Tab reaches it, Enter or Space activates it, Escape closes it.
3. Focus is visible. Never outline: none without a replacement.
4. It has a name. Icon-only controls get aria-label.
5. State is announced. Toggles use aria-pressed or aria-expanded; live updates go in an aria-live region.
6. Contrast holds at 4.5:1 for text in both themes.
7. Touch targets are at least 40×40px.
8. Motion respects prefers-reduced-motion.
9. Nothing depends on hover to reveal essential content.
10. User text is set with textContent, never innerHTML.