Web Accessibility (a11y): Building Inclusive Web Experiences

Part 2 - The 4 WCAG Principles (POUR)

The World Wide Web Consortium (W3C) publishes the Web Content Accessibility Guidelines (WCAG) organized around four foundational principles:

Perceivable: Information and UI components must be presentable to users in ways they can perceive (e.g., text alternatives for audio/images, sufficient color contrast).
Operable: Interface components and navigation must be operable (e.g., keyboard navigable, no seizure-inducing flashes, sufficient time to read).
Understandable: Information and UI operation must be understandable (e.g., predictable navigation, clear error messages, readable text).
Robust: Content must be robust enough to be interpreted reliably by a wide variety of user agents, including modern assistive technologies like screen readers.

Part 3 - Semantic HTML: The Accessibility Superpower

The single most effective way to make a website accessible is writing authentic, semantic HTML elements. Native HTML elements come out-of-the-box with keyboard focus management, screen reader labels, and keyboard activation:

<!-- BAD: Inaccessible fake button -->
<div class="btn" onclick="submitForm()">Submit Order</div>
<!-- Screen readers announce: "Submit Order, text" (cannot press Enter or Tab to it!) -->

<!-- GOOD: Native accessible button -->
<button type="button" onclick="submitForm()">Submit Order</button>
<!-- Screen readers announce: "Submit Order, button" (receives focus and triggers on Enter/Space) -->

Part 4 - Keyboard Navigation & Focus Indicators

Many users navigate the web exclusively using a keyboard (via Tab, Shift+Tab, Enter, Space, and Arrow keys).

Never Remove Focus Outlines!

/* NEVER DO THIS! */
:focus {
    outline: none; /* Breaks navigation for keyboard users! */
}

/* DO THIS: Modern visible focus indicator */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

Managing Tabindex Wisely

tabindex="0": Places a custom element into natural keyboard tab order.
tabindex="-1": Allows programmatic focus via JS (e.g. focusing a modal title), but removes it from sequential tabbing.
tabindex="1+" (Positive values): AVOID! Disrupts expected natural reading order.

Part 5 - Writing Effective Alternative (alt) Text

Screen readers read alt text aloud to visually impaired visitors:

<!-- Informative Image: Describe intent and context -->
<img src="growth-chart.webp" alt="Bar chart showing a 45% increase in monthly active users from Jan to Dec">

<!-- Decorative Image: Use empty alt to hide from screen readers -->
<img src="decorative-blob.svg" alt="" aria-hidden="true">

<!-- Icon Buttons: Always provide an accessible name! -->
<button aria-label="Close modal dialog">✕</button>

Part 6 - Demystifying ARIA & The First Rule of ARIA

WAI-ARIA (Accessible Rich Internet Applications) provides attributes that enhance HTML semantics when native elements cannot do the job.

The First Rule of ARIA: If you can use a native HTML element or attribute with the semantics and behavior already built in, then do so instead of re-purposing an element and adding ARIA.

<!-- Common ARIA attributes for dynamic UIs: -->
<!-- 1. Accordion or Dropdown toggle state -->
<button aria-expanded="false" aria-controls="faq-answer-1">
    What is your return policy?
</button>
<div id="faq-answer-1" hidden>Our return policy is 30 days...</div>

<!-- 2. Live notifications announced automatically -->
<div role="status" aria-live="polite">
    Item successfully added to shopping cart!
</div>

Part 7 - Auditing Tools & Quick Checklist

Color Contrast: Ensure text meets WCAG AA contrast ratio of at least 4.5:1 for normal text (3:1 for large text).
Form Inputs: Always associate <label for="id"> with <input id="id">.
Testing Tools: Use Chrome Lighthouse, Axe DevTools extension, and test keyboard navigation by tabbing through your site without a mouse!

Part 1 - What is Digital Accessibility & Why It Matters