Web Accessibility (A11y)
The practice of making websites usable by as many people as possible, including those with disabilities.
Detailed Explanation
Accessibility ensures that people with visual, auditory, motor, or cognitive impairments can perceive, understand, and navigate the web. This involves following WCAG standards, using semantic HTML, providing sufficient color contrast, and ensuring that all interactive elements are keyboard-accessible. A11y is not just about compliance; it's about building a more inclusive digital world.
Quick Summary
Web accessibility (A11y) is the practice of building sites and apps that everyone can use, including people relying on screen readers, keyboards, voice control, magnification, captions, or simplified interactions. It is both a legal obligation in many jurisdictions and a quality bar for professional software.
Key Takeaways
- Most accessibility comes from semantic HTML, sufficient colour contrast, and keyboard support, not from heroic ARIA.
- Around 15% of the global population has a recognised disability, and many more have temporary or situational needs.
- ARIA should be the last resort: use native elements whenever they exist; only add ARIA when you must extend semantics.
- Keyboard navigation, focus indicators, and a logical tab order are the most commonly missed requirements.
- Automated tools (axe, Lighthouse) catch about 30% of issues, manual testing with a screen reader is still required.
When to use it
- Adding alt text and ARIA labels so visually impaired users can navigate via screen reader.
- Building forms with proper labels, error associations, and visible focus rings.
- Designing colour palettes that meet WCAG AA contrast minimums (4.5:1 for body text).
- Supporting reduced motion preferences for users who experience vestibular triggers.
Common Mistakes
- Adding role="button" to a div instead of using a real <button> and re-implementing keyboard handlers from scratch.
- Removing focus outlines for visual reasons without providing an alternative indicator, a top complaint among keyboard users.
- Auto-playing videos with sound or animation without honouring prefers-reduced-motion.
- Using colour alone to convey state (red for error) without an icon or text label.
Web Accessibility (A11y), Frequently Asked
Is accessibility legally required?
In many jurisdictions, yes. The ADA (US), EAA (EU, from 2025), Accessibility Canada Act, and Section 508 are major examples. Companies have been successfully sued for inaccessible websites. WCAG 2.1 AA is the de facto compliance bar.
Does accessibility hurt design?
No. The constraints generally produce cleaner, more usable interfaces for everyone, captions help in noisy rooms, high contrast helps in sunlight, keyboard support helps power users. Apple and Microsoft both treat A11y as a baseline UX feature.
What is the fastest accessibility win?
Tabbing through the page from the top with the keyboard. If you cannot reach a control, or the focus indicator is invisible, you have found a top-priority issue. This single test catches more real bugs than any automated tool.