Web Accessibility Fundamentals

## Why Accessibility Matters Web accessibility (often abbreviated as a11y) ensures that websites and applications are usable by everyone, including people with disabilities. Approximately 15% of the global population experiences some form of disability. Accessible design benefits all users through better usability, clearer content, and improved SEO. The Web Content Accessibility Guidelines (WCAG) provide the international standard. The current version, WCAG 2.2, defines three conformance levels: A, AA, and AAA. Most organizations target AA compliance. ## The Four Principles of Accessibility WCAG is built on four foundational principles, known by the acronym POUR: - **Perceivable**: Information must be presentable in ways users can perceive - **Operable**: Interface components must be operable by all users - **Understandable**: Information and UI operation must be understandable - **Robust**: Content must be robust enough to work with assistive technologies ## Semantic HTML Using the correct HTML elements is the single most impactful accessibility improvement. Semantic elements convey meaning to assistive technologies without additional effort. ```html

Article Title

Article content here

``` ## ARIA Labels and Roles ARIA (Accessible Rich Internet Applications) attributes bridge gaps where native HTML cannot express the required semantics. Use them sparingly—native elements are always preferred. ```html ``` ## Keyboard Navigation All interactive elements must be accessible via keyboard. Users should be able to navigate with Tab, activate elements with Enter or Space, and dismiss overlays with Escape. ```typescript // Manage focus in modals function openModal() { const modal = document.getElementById("dialog"); const previouslyFocused = document.activeElement; modal.setAttribute("aria-hidden", "false"); modal.querySelector("button").focus(); function handleEscape(e: KeyboardEvent) { if (e.key === "Escape") { closeModal(); (previouslyFocused as HTMLElement).focus(); } } modal.addEventListener("keydown", handleEscape); } function closeModal() { const modal = document.getElementById("dialog"); modal.setAttribute("aria-hidden", "true"); } ``` ## Color and Contrast WCAG requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. Never convey information through color alone—use icons, patterns, or text labels as well. ```css /* Insufficient contrast */ .text-muted { color: #999999; /* 2.8:1 ratio on white — fails AA */ } /* Sufficient contrast */ .text-muted { color: #595959; /* 7:1 ratio on white — passes AAA */ } /* Using patterns in addition to color for data visualization */ .chart-bar-primary { background-color: #2563eb; background-image: repeating-linear-gradient( 45deg, transparent, transparent 2px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.1) 4px ); } ``` ## Forms and Error Handling Forms need explicit labels, clear error messages, and proper associations between inputs and their descriptions. ```html

Email address We will never share your email Please enter a valid email address

``` ## Images and Media Every meaningful image needs alternative text. Decorative images should be hidden from assistive technologies. Videos need captions and transcripts. ```html ``` ## Testing Accessibility Automated tools catch roughly 30-40% of accessibility issues. Manual testing and assistive technology testing are essential for complete coverage. - Use axe-core or Lighthouse for automated scans - Test keyboard navigation by tabbing through every page - Use screen readers (NVDA, VoiceOver) to verify content flow - Check color contrast with browser dev tools or dedicated tools ```typescript // Playwright accessibility test import { test, expect } from "@playwright/test"; import AxeBuilder from "@axe-core/playwright"; test("homepage has no accessibility violations", async ({ page }) => { await page.goto("/"); const results = await new AxeBuilder({ page }) .withTags(["wcag2a", "wcag2aa"]) .analyze(); expect(results.violations).toEqual([]); }); ``` ## Common Mistakes to Avoid - Missing alt text on informative images - Using `