Accessibility — Explained with Examples

Accessibility (a11y) ensures web applications are usable by people with disabilities through semantic HTML, ARIA attributes, and keyboard support.

Web accessibility (a11y) follows the WCAG (Web Content Accessibility Guidelines) principles: Perceivable (content must be presentable to senses), Operable (UI components must work with various input methods), Understandable (content and UI must be clear), and Robust (content must work with assistive technologies). Key practices include semantic HTML, proper heading hierarchy, alt text for images, keyboard navigation, ARIA labels, color contrast ratios, and focus management.

Think of accessibility like building a building with ramps, elevators, and braille signage. These features help wheelchair users, but they also help parents with strollers, delivery workers, and anyone carrying heavy items. Similarly, accessible websites benefit everyone — captions help in noisy environments, high contrast helps in bright sunlight.

Accessibility is not optional. Many countries have legal requirements (ADA, Section 508, EN 301 549). Approximately 15% of the global population has some form of disability.

<!-- Semantic HTML (built-in accessibility) -->
<nav aria-label="Main navigation">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
    </ul>
</nav>

<main>
    <h1>Page Title</h1>
    <img src="chart.png" alt="Sales chart showing 20% growth in Q3">

    <button aria-label="Close dialog" onclick="closeDialog()">×</button>

    <!-- ARIA for custom components -->
    <div role="tablist">
        <button role="tab" aria-selected="true" aria-controls="panel1">Tab 1</button>
        <button role="tab" aria-selected="false" aria-controls="panel2">Tab 2</button>
    </div>
    <div role="tabpanel" id="panel1">Content 1</div>
    <div role="tabpanel" id="panel2" hidden>Content 2</div>
</main>

/* Focus styles for keyboard users */
:focus-visible {
    outline: 2px solid #4A90D9;
    outline-offset: 2px;
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

Use tools like axe DevTools, Lighthouse, and screen readers (VoiceOver, NVDA) to test accessibility. Automate checks in CI/CD pipelines.

ARIA, Semantic HTML, Responsive Design, Internationalization

i18n and a11y