Accessibility isn't just about compliance or helping people with disabilities-though those are important. It's about creating interfaces that work well for everyone, in all kinds of situations. Here are the basics that make the biggest difference.
1. Color contrast that actually works
Poor color contrast affects everyone-not just people with visual impairments. If you've ever struggled to read text on your phone in bright sunlight, you've experienced this firsthand.
The WCAG standard:
- • Normal text: 4.5:1 contrast ratio
- • Large text (18pt+ or 14pt+ bold): 3:1 contrast ratio
- • UI elements like buttons and form fields: 3:1 contrast ratio
Use tools like WebAIM's contrast checker or built-in browser dev tools to test your colors. When in doubt, go higher contrast-it helps everyone read your content more easily.
2. Keyboard navigation
Not everyone uses a mouse. Some people navigate entirely with keyboards, others use voice control or assistive devices that simulate keyboard input.
What to test:
- Can you reach every interactive element with Tab?
- Is the tab order logical (left to right, top to bottom)?
- Can you see which element has focus?
- Can you activate buttons and links with Enter or Space?
- Can you escape from modals and menus with Escape?
The easiest test: unplug your mouse and try to use your website. If you get stuck, so will your users.
3. Form labels and error messages
Forms are where accessibility problems cause the most friction. Clear labels and helpful error messages benefit everyone, especially when people are filling out forms on mobile or when they're distracted.
❌ Don't do this
- • Placeholder text as the only label
- • "Enter valid email" error messages
- • Required fields marked only with color
- • Error messages that don't explain the problem
✅ Do this instead
- • Clear, persistent labels for every field
- • "Email format should be [email protected]"
- • "Required" text or asterisk with explanation
- • Specific, actionable error guidance
4. Alternative text for images
Alt text isn't just for screen readers-it also helps when images fail to load, which happens more often than you think on slow mobile connections.
Writing good alt text:
- Describe the content and function, not just what you see
- Keep it concise-aim for 125 characters or less
- Don't start with "Image of" or "Picture of"
- For decorative images, use empty alt text (alt="")
5. Headings that make sense
Proper heading structure helps everyone scan and understand your content. It's especially important for people using screen readers, who often navigate by jumping between headings.
Heading hierarchy:
- H1: Page title (one per page)
- H2: Main sections
- H3: Subsections within H2s
- H4-H6: Further subdivisions as needed
Don't choose heading levels based on how they look-use CSS to style them. The structure should make sense even if you remove all styling.
6. Link text that works out of context
Many users navigate by jumping from link to link. "Click here" and "Read more" don't help when you hear them out of context.
❌ Vague links:
- • "Click here"
- • "Read more"
- • "Learn more"
- • "Here"
✅ Descriptive links:
- • "Download pricing guide"
- • "Read the accessibility case study"
- • "Learn about our design process"
- • "Contact our sales team"
7. Respect user preferences
Users can set preferences in their operating system for reduced motion, high contrast, and other accessibility needs. Respecting these preferences shows you care about their experience.
CSS media queries to respect:
- @media (prefers-reduced-motion: reduce)
- @media (prefers-contrast: high)
- @media (prefers-color-scheme: dark)
Start with one thing
Don't try to fix everything at once. Pick one area-maybe color contrast or keyboard navigation-and focus on getting it right. Then move to the next.
Remember: accessibility improvements help everyone. Better contrast helps people reading in bright light. Clear labels help people filling out forms on mobile. Good heading structure helps everyone scan your content quickly.
Key takeaway
Accessibility isn't a feature you add at the end-it's a mindset you bring to every design and development decision. Start with the basics: good contrast, keyboard navigation, clear labels, and descriptive links. Your users will notice the difference, even if they never know why your site feels easier to use.