Accessibility Overview

What is Accessibility?

• Accessibility is designing and building web applications so everyone can use them, whatever their physical or situational limitations.
• It includes people with permanent disabilities, but also people with temporary issues (an injured hand) and situational ones (low light, a noisy room).
• The goal isn't a compliance checkbox - it's a product that is genuinely usable under different conditions.

a11y is short for accessibility: the 11 stands for the eleven letters between the "a" and the "y".

Why Accessibility Matters

• Better UX for everyone: good contrast, keyboard navigation and clear structure help all users, not just one group.
• Wider audience: more people can use the product, which lifts engagement, retention and business growth.
• Legal requirements: many countries require accessible websites, so ignoring it risks compliance problems.
• SEO and quality: accessible sites are usually better structured, which indirectly helps SEO and maintainability.

Core Concepts

Assistive Technology (AT)

• Tools that help people use digital content when standard input or output is hard for them.
• Examples: screen readers that read content aloud, voice control, screen magnifiers.
• Developers must build interfaces these tools can interpret correctly.

Accessibility Standards

• WCAG gives a structured set of guidelines for usable, inclusive applications.
• It covers text readability, keyboard access, proper HTML structure and visual clarity.
• Following a standard keeps accessibility consistent instead of guesswork.

ARIA (Accessible Rich Internet Applications)

• ARIA attributes add information about UI elements, especially dynamic or non-semantic components.
• They tell assistive technology about roles, states and behaviour that plain HTML doesn't express.
• Use it carefully - wrong or excessive ARIA creates more problems than it solves.

Focus Management

• Controls how keyboard users move through the page.
• Users must move in a logical order and always see which element is active.
• Poor focus handling makes an app unusable for keyboard-only users.

Screen Readers

• Convert visual content into speech or braille for people who can't see the screen.
• They depend on semantic HTML, meaningful labels and a clear structure.
• If the structure is unclear, the experience becomes confusing or broken.

Contrast and Theme

• Text and UI elements need enough contrast against their background to be readable.
• Low-contrast designs may look stylish but shut many users out.
• Supporting dark mode and high-contrast mode helps users with different needs and preferences.

Tooling

• Lighthouse, axe and WAVE find common issues and suggest fixes.
• Automated checks are useful, but they don't replace manual testing and real-world use.
• Combining tools with real user testing gives the best results.

Examples

• Labelled form inputs, clear validation messages and navigation that works without a mouse.
• Alt text on images and a proper heading structure - simple but important.
• Small improvements like these add up to a much more usable, inclusive experience.

Treat accessibility as a core part of development, not something bolted on at the end. A product built to handle edge cases and constraints well becomes better for everyone.