` (Next.js metadata) | | 3 | 2.1.1 | Critical | CTA uses `<div onClick>` -- not keyboard accessible | | 4 | 3.1.1 | Minor | `<html>` missing `lang` attribute (check `layout.tsx`) | ```tsx // AFTER: src/app/page.tsx import type { Metadata } from 'next'; import Link from 'next/link'; export const metadata: Metadata = { title: 'Acme - Build Better Products', description: 'Build better products with the Acme platform.', }; export default function Home() { return ( <main> <h1 className="text-4xl font-bold">Welcome to Acme</h1> <p className="mt-4"> Build better products with our platform. </p> <Link href="/signup" className="mt-8 inline-block bg-blue-600 text-white px-6 py-3 rounded hover:bg-blue-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600" > Get Started </Link> </main> ); } ``` ```tsx // Also fix: src/app/layout.tsx export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang="en"> <body>{children}</body> </html> ); } ``` ### Example 5: Svelte Component Audit ```svelte  <script> let openIndex = -1; function toggle(i) { openIndex = openIndex === i ? -1 : i; } </script> {#each items as item, i} <div class="header" on:click={() => toggle(i)}> {item.title} </div> {#if openIndex === i} <div class="content">{item.body}</div> {/if} {/each} ``` **Violations detected:** | # | WCAG | Severity | Issue | |---|------|----------|-------| | 1 | 4.1.2 | Critical | Accordion missing ARIA roles and properties | | 2 | 2.1.1 | Critical | Headers not keyboard accessible | | 3 | 2.5.8 | Minor | Click targets may be smaller than 24x24px (NEW in WCAG 2.2) | ```svelte  <script> export let items = []; let openIndex = -1; function toggle(i) { openIndex = openIndex === i ? -1 : i; } function handleKeydown(event, i) { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); toggle(i); } } </script> <div class="accordion"> {#each items as item, i} <h3> <button class="accordion-header" aria-expanded={openIndex === i} aria-controls="panel-{i}" id="header-{i}" on:click={() => toggle(i)} on:keydown={(e) => handleKeydown(e, i)} > {item.title} <span class="icon" aria-hidden="true"> {openIndex === i ? '−' : '+'} </span> </button> </h3> <div id="panel-{i}" role="region" aria-labelledby="header-{i}" class="accordion-content" class:open={openIndex === i} hidden={openIndex !== i} > {item.body} </div> {/each} </div> <style> .accordion-header { min-height: 44px; /* WCAG 2.5.8 Target Size */ width: 100%; padding: 12px 16px; cursor: pointer; text-align: left; } .accordion-header:focus-visible { outline: 2px solid #005fcc; outline-offset: 2px; } </style> ``` ## Fix Patterns by Framework ### React / Next.js Fix Patterns #### Missing Alt Text (1.1.1) ```tsx // BEFORE <img src={hero} /> // AFTER - Informational image <img src={hero} alt="Team collaborating around a whiteboard" /> // AFTER - Decorative image <img src={divider} alt="" role="presentation" /> ``` #### Non-Interactive Element with Click Handler (2.1.1) ```tsx // BEFORE <div onClick={handleClick}>Click me</div> // AFTER - If it navigates <Link href="/destination">Click me</Link> // AFTER - If it performs an action <button type="button" onClick={handleClick}>Click me</button> ``` #### Missing Focus Management in Modals (2.4.3) ```tsx // BEFORE function Modal({ isOpen, onClose, children }) { if (!isOpen) return null; return <div className="modal-overlay">{children}</div>; } // AFTER import { useEffect, useRef } from 'react'; function Modal({ isOpen, onClose, children, title }) { const modalRef = useRef(null); const previousFocus = useRef(null); useEffect(() => { if (isOpen) { previousFocus.current = document.activeElement; modalRef.current?.focus(); } else { previousFocus.current?.focus(); } }, [isOpen]); useEffect(() => { if (!isOpen) return; const handleKeydown = (e) => { if (e.key === 'Escape') onClose(); if (e.key === 'Tab') { const focusable = modalRef.current?.querySelectorAll( 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])' ); if (!focusable?.length) return; const first = focusable[0]; const last = focusable[focusable.length - 1]; if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); } else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); } } }; document.addEventListener('keydown', handleKeydown); return () => document.removeEventListener('keydown', handleKeydown); }, [isOpen, onClose]); if (!isOpen) return null; return ( <div className="modal-overlay" onClick={onClose} aria-hidden="true"> <div ref={modalRef} role="dialog" aria-modal="true" aria-label={title} tabIndex={-1} onClick={(e) => e.stopPropagation()} > <button onClick={onClose} aria-label="Close dialog" className="modal-close" > × </button> {children} </div> </div> ); } ``` #### Focus Appearance (2.4.11 -- NEW in WCAG 2.2) ```css /* BEFORE */ button:focus { outline: none; /* Removes default focus indicator */ } /* AFTER - Meets WCAG 2.2 Focus Appearance */ button:focus-visible { outline: 2px solid #005fcc; outline-offset: 2px; } ``` ```tsx // Tailwind CSS pattern <button className="focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"> Submit </button> ``` ### Vue Fix Patterns #### Missing Form Labels (1.3.1) ```vue  <input type="text" v-model="name" placeholder="Name" />  <label for="user-name">Name</label> <input id="user-name" type="text" v-model="name" autocomplete="name" /> ``` #### Dynamic Content Without Live Region (4.1.3) ```vue  <div v-if="status">{{ statusMessage }}</div>  <div aria-live="polite" aria-atomic="true"> <p v-if="status">{{ statusMessage }}</p> </div> ``` #### Vue Router Navigation Announcements (2.4.2) ```typescript // router/index.ts router.afterEach((to) => { const title = to.meta.title || 'Page'; document.title = `${title} | My App`; // Announce route change to screen readers const announcer = document.getElementById('route-announcer'); if (announcer) { announcer.textContent = `Navigated to ${title}`; } }); ``` ```vue  <div id="route-announcer" role="status" aria-live="assertive" aria-atomic="true" class="sr-only" ></div> ``` ### Angular Fix Patterns #### Missing ARIA on Custom Components (4.1.2) ```typescript // BEFORE @Component({ selector: 'app-dropdown', template: ` <div (click)="toggle()">{{ selected }}</div> <div *ngIf="isOpen"> <div *ngFor="let opt of options" (click)="select(opt)">{{ opt }}</div> </div> ` }) // AFTER @Component({ selector: 'app-dropdown', template: ` <button role="combobox" [attr.aria-expanded]="isOpen" aria-haspopup="listbox" [attr.aria-label]="label" (click)="toggle()" (keydown)="handleKeydown($event)" > {{ selected }} </button> <ul *ngIf="isOpen" role="listbox" [attr.aria-label]="label + ' options'"> <li *ngFor="let opt of options; let i = index" role="option" [attr.aria-selected]="opt === selected" [attr.id]="'option-' + i" (click)="select(opt)" (keydown)="handleOptionKeydown($event, opt, i)" tabindex="-1" > {{ opt }} </li> </ul> ` }) ``` #### Angular CDK A11y Module Integration ```typescript // Use Angular CDK for focus trap in dialogs import { A11yModule } from '@angular/cdk/a11y'; @Component({ template: ` <div cdkTrapFocus cdkTrapFocusAutoCapture> <h2 id="dialog-title">Edit Profile</h2>  </div> ` }) ``` ### Svelte Fix Patterns #### Accessible Announcements (4.1.3) ```svelte  {#if message} <p class="toast">{message}</p> {/if}  <div aria-live="polite" class="sr-only"> {#if message} <p>{message}</p> {/if} </div> <div class="toast" aria-hidden="true"> {#if message} <p>{message}</p> {/if} </div> ``` #### SvelteKit Page Titles (2.4.2) ```svelte  <svelte:head> <title>Dashboard

` or `` | Screen readers may ignore `aria-label` on generic elements. Use `aria-labelledby` pointing to visible text, or restructure with headings | | Hiding content with `display: none` for screen readers | Wanting visual hiding | `display: none` hides from ALL users, including screen readers. Use `.sr-only` class for screen-reader-only content | | Using color alone to convey meaning | Red/green for status, error states | Add icons, text labels, or patterns alongside color. WCAG 1.4.1 requires non-color indicators | | Placeholder text as the only label | Saves visual space | Placeholder disappears on input, fails 1.3.1 and 3.3.2. Always provide a visible `` | | Auto-playing video or audio | Engagement metrics | Violates 1.4.2. Never autoplay media with sound. Provide pause/stop controls | | `outline: none` without replacement | Design preference | Violates 2.4.7 and 2.4.11. Always provide a visible focus indicator, use `focus-visible` to limit to keyboard users | | Empty `alt=""` on informational images | Misunderstanding empty alt | Empty alt marks images as decorative. Informational images need descriptive alt text | | Missing heading hierarchy (h1 -> h3, skipping h2) | Visual styling drives heading choice | Heading levels must be sequential. Use CSS for styling, HTML for structure | | `onClick` without `onKeyDown` on custom elements | Mouse-first development | Custom interactive elements need keyboard support. Prefer native elements or add `onKeyDown` with Enter/Space handling | | Inaccessible custom ` ``` ### 3.3.8 Accessible Authentication (Level AA) Authentication must not require cognitive function tests (e.g., remembering a password, solving a puzzle) unless an alternative is provided. **Pattern:** - Support password managers (`autocomplete="current-password"`) - Offer passkey / biometric authentication - Allow copy-paste in password fields (never block paste) - Provide email/SMS OTP as alternative to CAPTCHA ## Related Skills | Skill | Relationship | Path | |-------|-------------|------| | **senior-frontend** | Frontend patterns used in a11y fixes (React, Next.js, Tailwind) | `engineering-team/senior-frontend/` | | **code-reviewer** | Include a11y checks in code review workflows | `engineering-team/code-reviewer/` | | **senior-qa** | Integration of a11y testing into QA processes | `engineering-team/senior-qa/` | | **playwright-pro** | Automated browser testing with accessibility assertions | `engineering-team/playwright-pro/` | | **senior-secops** | Accessibility as part of compliance and security posture | `engineering-team/senior-secops/` | | **epic-design** | WCAG 2.1 AA compliant animations and scroll storytelling | `engineering-team/epic-design/` | | **tdd-guide** | Test-driven development patterns for a11y test cases | `engineering-team/tdd-guide/` | | **incident-commander** | Respond to a11y compliance incidents and legal risk | `engineering-team/incident-commander/` | ## Resources - [WCAG 2.2 Specification](https://www.w3.org/TR/WCAG22/) - [WAI-ARIA Authoring Practices 1.2](https://www.w3.org/WAI/ARIA/apg/) - [Deque axe-core Rules](https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md) - [eslint-plugin-jsx-a11y](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y) - [vue-a11y](https://vue-a11y.com/) - [@angular-eslint/template-accessibility](https://github.com/angular-eslint/angular-eslint) --- **License:** MIT **Author:** Alireza Rezvani **Version:** 2.1.2

Name	Email	Role
Alice	alice@co.com	Admin