` not keyboard accessible |
+| 4 | 4.1.3 | Major | Error message not announced to screen readers |
+| 5 | 3.3.1 | Major | Error not programmatically associated with input |
+
+```vue
+
+
+
{{ selectedTab.content }}
+
+```
+
+**Violations detected:**
+
+| # | WCAG | Severity | Issue |
+|---|------|----------|-------|
+| 1 | 4.1.2 | Critical | Tab widget missing ARIA roles (`tablist`, `tab`, `tabpanel`) |
+| 2 | 2.1.1 | Critical | Tabs not keyboard navigable (arrow keys, Home, End) |
+| 3 | 2.4.11 | Major | No visible focus indicator on active tab |
+
+```html
+
+
+```
+
+**Supporting TypeScript for keyboard navigation:**
+
+```typescript
+// dashboard.component.ts
+handleTabKeydown(event: KeyboardEvent, index: number): void {
+ const tabCount = this.tabs.length;
+ let newIndex = index;
+
+ switch (event.key) {
+ case 'ArrowRight':
+ newIndex = (index + 1) % tabCount;
+ break;
+ case 'ArrowLeft':
+ newIndex = (index - 1 + tabCount) % tabCount;
+ break;
+ case 'Home':
+ newIndex = 0;
+ break;
+ case 'End':
+ newIndex = tabCount - 1;
+ break;
+ default:
+ return;
+ }
+
+ event.preventDefault();
+ this.selectTab(this.tabs[newIndex]);
+ // Move focus to the new tab button
+ const tabElement = document.getElementById(`tab-${this.tabs[newIndex].id}`);
+ tabElement?.focus();
+}
+```
+
+### Example 4: Next.js Page-Level Audit
+
+```tsx
+// BEFORE: src/app/page.tsx
+export default function Home() {
+ return (
+
+ );
+}
+```
+
+**Violations detected:**
+
+| # | WCAG | Severity | Issue |
+|---|------|----------|-------|
+| 1 | 1.3.1 | Major | Heading uses `