` 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
```
## Example 2: Angular Template Audit
```html
{{ 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
{{ selectedTab.content }}
```
**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 3: Next.js Page-Level Audit
```tsx
// BEFORE: src/app/page.tsx
export default function Home() {
return (
Welcome to Acme
Build better products with our platform.
router.push('/signup')}>
Get Started
);
}
```
**Violations detected:**
| # | WCAG | Severity | Issue |
|---|------|----------|-------|
| 1 | 1.3.1 | Major | Heading uses `
` instead of `
` -- no semantic structure |
| 2 | 2.4.2 | Major | Page missing `` (Next.js metadata) |
| 3 | 2.1.1 | Critical | CTA uses `` -- not keyboard accessible |
| 4 | 3.1.1 | Minor | `` 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 (
Welcome to Acme
Build better products with our platform.
Get Started
);
}
```
```tsx
// Also fix: src/app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
## Example 4: Svelte Component Audit
```svelte
{#each items as item, i}
{#if openIndex === i}
{item.body}
{/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
{#each items as item, i}
{item.body}
{/each}
```