tomevault-io Accessibility Checklist
Quick Checks
Semantic HTML
- Use
<button>for actions,<a>for navigation - Use headings in order (h1 → h2 → h3)
- Use
<label>for form inputs; associate withhtmlFor/id - Use
<main>,<nav>,<aside>,<footer>for landmarks
Keyboard
- All interactive elements focusable (no
tabIndex="-1"on controls) - Focus order is logical
- Focus visible (outline or custom ring)
- Escape closes modals/dropdowns
- No keyboard traps
Screen Readers
- Images have
alt(emptyalt=""for decorative) - Form errors announced (aria-live or role="alert")
- Dynamic content changes announced
- Use
aria-labeloraria-labelledbywhen visible label insufficient
Color & Contrast
- Text contrast ≥ 4.5:1 (normal), ≥ 3:1 (large)
- Don't rely on color alone for information
- Focus indicators visible
Forms
- Required fields indicated (aria-required, visual)
- Error messages linked to fields (aria-describedby)
- Clear, inline validation feedback
Testing
- Navigate with keyboard only
- Test with screen reader (VoiceOver, NVDA)
- Use axe DevTools or Lighthouse accessibility audit
Source: iamjcabalejo/payoys-cursor-sub-agents — distributed by TomeVault.