WCAG Accessibility Reference

Level A is the minimum conformance level with essential requirements that must be met (e.g., text alternatives, keyboard access). Level AA is the standard target for most websites and includes A requirements plus enhanced criteria like 4.5:1 contrast ratio and visible focus indicators. Level AAA is the highest level with stricter requirements like 7:1 contrast ratio, but achieving full AAA conformance across an entire site is often not feasible. Most legal requirements and organizational policies target Level AA.

For WCAG AA: normal text (under 18pt or 14pt bold) needs at least 4.5:1 contrast ratio, and large text (18pt+ or 14pt+ bold) needs at least 3:1. For AAA: normal text needs 7:1 and large text needs 4.5:1. Non-text UI components (buttons, input borders, icons) need 3:1 against their background at AA level (criterion 1.4.11). Use browser DevTools or contrast checking tools to measure these ratios against your background colors.

Follow WCAG 4.1.2 (Name, Role, Value): give every interactive element a name (aria-label or visible label), a role (native HTML elements have implicit roles, or use role="button", role="progressbar", etc.), and expose dynamic values (aria-valuenow, aria-expanded, aria-checked). For custom widgets, also manage focus with tabindex, handle keyboard events (Enter, Space, arrow keys per ARIA Authoring Practices), and announce state changes with aria-live regions.

A skip navigation link (WCAG 2.4.1) lets keyboard users bypass repeated content blocks like headers and navigation menus to jump directly to the main content. Implement with: <a href="#main" class="skip-link">Skip to main content</a> placed as the first focusable element, and <main id="main"> wrapping your page content. Style it to be visually hidden until focused, then visible on :focus. This dramatically improves the experience for keyboard-only users.

For WCAG 3.3.1: mark invalid fields with aria-invalid="true" and link error messages using aria-describedby pointing to the error text element. Use role="alert" or aria-live="assertive" on the error message container so screen readers announce it immediately. For WCAG 3.3.2, always provide visible labels with <label for="fieldId"> and helpful placeholder text or instructions. For 3.3.4, provide a confirmation step and undo capability for important submissions.

Keyboard accessibility (2.1.1) is critical because many users cannot use a mouse: screen reader users, people with motor disabilities, and power users who prefer keyboard navigation. Every interactive element must be reachable with Tab and activatable with Enter/Space. "No keyboard trap" (2.1.2) means a user must never get stuck in a component where Tab/Escape cannot exit. Modals are the most common keyboard trap; always implement an Escape key handler and return focus to the trigger element on close.

WCAG 2.3.1 prohibits content that flashes more than three times per second. Beyond that, many users with vestibular disorders experience discomfort from animations. Use @media (prefers-reduced-motion: reduce) in CSS to disable or minimize non-essential animations, transitions, and auto-playing content. In JavaScript, check window.matchMedia("(prefers-reduced-motion: reduce)").matches to conditionally skip animations. Always provide a pause button for auto-advancing carousels and slideshows.

aria-live creates a live region that screen readers monitor for content changes. Use aria-live="polite" for non-urgent updates that should be announced after the screen reader finishes its current task (e.g., "Loading complete", search result counts). Use aria-live="assertive" (or role="alert") for urgent messages that interrupt the user immediately (e.g., form validation errors, session timeout warnings). Overusing assertive interrupts the user experience, so prefer polite for most status updates per WCAG 4.1.3.