Principle: Accessibility is not optional

Web applications built without accessibility considerations exclude users with disabilities and often violate legal requirements.

Core accessibility practices:

1. Semantic HTML (biggest impact, least effort):

<button> not <div onclick> (keyboard accessible)
<nav>, <main>, <aside> (screen reader navigation)
<label for="id"> (form field identification)
<h1>-<h6> in order (document structure)

1. Keyboard navigation:

- All interactive elements focusable (Tab/Shift+Tab)
- Visible focus indicators (never outline: none without alternative)
- Escape closes modals/dropdowns
- Arrow keys for menus/tabs

1. Screen readers:

- Alt text on images (alt="" for decorative)
- aria-label for icon-only buttons
- aria-live for dynamic content updates
- Don't use aria if HTML semantics suffice

1. Visual:

- Color contrast ratio 4.5:1 minimum (WCAG AA)
- Don't convey info by color alone
- Support 200% zoom without breaking layout
- Respect prefers-reduced-motion

1. Testing:

- Tab through every page (can you use it without a mouse?)
- Run axe DevTools or Lighthouse accessibility audit
- Test with screen reader (VoiceOver on Mac, NVDA on Windows)

@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; }
}

15-20% of people have some form of disability. Accessible sites also work better for everyone (keyboard power users, mobile, SEO).