Accessible websites work for more people: those using screen readers, keyboards only, voice control, zoom, or simply a phone in bright sunlight. The good news is that most of it comes from doing ordinary HTML well.
1. Use semantic HTML first
Native elements come with keyboard behavior and meaning built in. Use button for actions and a for navigation, and use nav, main, header, footer and heading levels to describe structure. A div with a click handler is not a button.
2. Make everything keyboard accessible
Every interactive element must be reachable with Tab and usable with Enter or Space.
Tab order should follow the visual order.
Modals and menus should trap focus while open and return it when closed.
Provide a "skip to content" link for long navigation.
3. Never remove focus indicators
Removing the outline makes keyboard use impossible to follow. Style it instead: a clear two-pixel ring in a color that contrasts with the background works well.
4. Check color contrast
Normal text needs a contrast ratio of at least 4.5 to 1 against its background under WCAG AA. Do not use color alone to convey meaning; add text or an icon.
5. Label every form control
<label for="email">Email address</label>
<input id="email" name="email" type="email" required
aria-describedby="email-help" />
<p id="email-help">We will only use this to reply to you.</p>Placeholders are not labels. Show errors in text, connect them to the field, and avoid relying on color alone.
6. Write useful alt text
Describe what the image communicates, not that it is an image. Decorative images should have an empty alt="" so screen readers skip them.
7. Respect reduced motion
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}Test the way people use it
Unplug your mouse for five minutes and use your own site with the keyboard. Zoom to 200 percent. Run an automated checker, then fix what it finds, knowing it only catches a portion of real issues.