Accessibility
Overview
Accessibility ensures people can use the product with keyboard, screen readers, assistive tech, and different interaction patterns.
Why It Matters
Accessible UI is better UI. It improves reach, reliability, and legal and product risk.
Core Concepts
- Semantic HTML is the base layer.
- Keyboard support is mandatory for interactive UI.
- Color alone should not carry meaning.
Mental Models
Design for different input methods and sensory constraints, not just your own browser and mouse.
Best Practices
- Use semantic elements first.
- Test keyboard navigation.
- Provide text alternatives and visible focus states.
Common Mistakes
- Missing labels and names.
- Removing focus outlines.
- Encoding status only in color.
Trade-offs
Accessibility work can take a little more time up front, but it reduces rework and broadens usable reach.
Decision Framework
| Check | Pass condition |
|---|---|
| Keyboard | Every control is reachable and usable |
| Labels | Inputs and actions have accessible names |
| Focus | The current focus is visible |
Examples
<button aria-label="Close dialog">Close</button>Checklists
- Can I complete the task with only the keyboard?
- Does a screen reader have a useful name and state?
- Is focus visible and predictable?
Senior Engineer Notes
Senior engineers treat accessibility as part of correctness. A feature that some users cannot operate is incomplete, not merely imperfect.