Accessibility is a billable specialism, and the first 80% is genuinely straightforward.
1. Use real semantic elements
Buttons that are divs are the most common failure. Use button, nav, main, article and heading levels in order.
2. Keep a visible focus state
:focus-visible { outline: 3px solid #2563EB; outline-offset: 2px; }3. Meet contrast requirements
4.5:1 for body text, 3:1 for large text and UI borders.
4. Label every control
Inputs need a real label. Icon-only buttons need aria-label.
5. Write meaningful alt text
Describe the information the image carries; decorative images take an empty alt.
6. Make menus keyboard operable
Tab order follows visual order, Escape closes overlays, focus returns to the trigger.
7. Respect reduced motion
@media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; } }8. Add a skip link
A hidden link that appears on focus and jumps to the main content.
9. Announce dynamic changes
Search results, form errors and toasts belong in a live region.
10. Test with the keyboard and one screen reader
Unplug your mouse for ten minutes, then run one automated audit.
