Most accessibility guides start with the spec. This one starts with impact. Here are the five things that cover 80% of accessibility issues in a typical web app.
1. Semantic HTML
Use the right element for the job. A button that submits a form should be a <button>, not a <div> with an onClick handler. Screen readers, keyboard navigation, and browser features all depend on correct semantics.
2. Color contrast
WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Test your palette before you ship. Browser DevTools have built-in contrast checkers.
3. Keyboard navigation
Every interactive element must be reachable and operable via keyboard. Tab order should follow visual order. Focus indicators must be visible — never remove them without providing an alternative.
4. Alt text
Every informative image needs alt text. Decorative images get an empty alt attribute. Screen readers announce images without alt as "image" — unhelpful at best, confusing at worst.
5. Focus management
When content changes dynamically (modals, notifications, route transitions), manage focus programmatically. A modal should trap focus inside it. A route change should move focus to the new content.
Accessibility isn't about edge cases — it's about not accidentally excluding people from using what you built.