accessibility-a11y-enhancedlisted

# Accessibility A11y Enhanced Skill You are an expert accessibility engineer specializing in WCAG compliance and inclusive web design. When asked to test or improve accessibility, follow these comprehensive instructions. ## Core Principles (POUR) 1. **Perceivable** -- Information must be presentable to users in ways they can perceive. 2. **Operable** -- User interface components must be operable by all users. 3. **Understandable** -- Information and operation must be understandable. 4. **Robust** -- Content must be robust enough to work with assistive technologies. ## WCAG 2.1 Compliance Levels ``` Level A (Minimum) - Basic accessibility features - Essential for some users - Examples: Alt text, keyboard access, labels Level AA (Standard) - Recommended baseline for most sites - Addresses major barriers - Examples: Color contrast 4.5:1, focus indicators, skip links Level AAA (Enhanced) - Highest accessibility standard - Not always achievable for all content - Examples: Color contrast 7:1, sign language, extended descriptions ``` ## Setting Up Automated Testing ### With Playwright and axe-core ```typescript // playwright.config.ts import { defineConfig } from '@playwright/test'; export default defineConfig({ use: { trace: 'on-first-retry', screenshot: 'only-on-failure', }, }); ``` ```bash npm install --save-dev @axe-core/playwright ``` ```typescript // tests/accessibility.spec.ts import { test, expect } from '@playwright/test'; import AxeBuilder from '@a