--- name: accessible-web-dev description: "Build WCAG 2.1 AA compliant web applications for University of Sheffield. Covers semantic HTML, ARIA patterns, form accessibility, keyboard navigation, color contrast, alt text, captions, and automated testing. Use when creating websites, web apps, forms, interactive components, or auditing accessibility for WCAG compliance, screen readers, keyboard access, or inclusive design." version: 0.1.0 domain: web-development, accessibility, compliance --- # University of Sheffield Web Accessibility Skill Build web applications that meet WCAG 2.1 Level AA standards and University of Sheffield accessibility requirements. ## When to Use This Skill Trigger this skill when working on: - Building new web applications, sites, or digital platforms - Creating forms, interactive components, or custom widgets - Reviewing content for accessibility compliance - Auditing existing websites for WCAG violations - User mentions: accessibility, WCAG, screen reader, keyboard navigation, alt text, ARIA, captions, color contrast, inclusive design ## Core Requirements **Compliance Standard:** WCAG 2.1 Level AA minimum across all University of Sheffield digital platforms **Everyone's Responsibility:** Accessibility is not just for developers—product owners, designers, content creators, and communications specialists all play critical roles. --- ## Quick Start Workflow ### 1. Planning Phase - Define accessibility requirements in acceptance criteria - Identify content types (text, images, video, interactive elements) - Establish responsibility matrix across team roles - Budget for testing and remediation ### 2. Design Phase - **Color Contrast:** 4.5:1 minimum for normal text, 3:1 for large text - **Focus Indicators:** Clear, visible focus states for all interactive elements - **Touch Targets:** Minimum 44×44 CSS pixels - **Color Alone:** Never use color as sole indicator (add patterns, labels, icons) - Test designs with contrast checker: `python scripts/contrast_checker.py "#foreground" "#background"` ### 3. Development Phase **Semantic HTML First:** ```html

Click me

``` **Heading Hierarchy:** - One `

` per page - Never skip levels (h1 → h2 → h3, not h1 → h3) - Headings describe content structure, not styling Form Accessibility: - Associate labels with inputs using `for`/`id` - Mark required fields with `required` and `aria-required="true"` - Provide error messages via `aria-describedby` and `role="alert"` - Use `autocomplete` attributes for common fields - See: `assets/templates/form-template.html` Keyboard Navigation: - All functionality available via keyboard (Tab, Enter, Space, Arrows) - Logical focus order - No keyboard traps - Visible focus indicators - Skip links for main content ARIA Usage: - Rule 1: Use native HTML when possible (don't use `
`, use `` ### Pitfall 4: Low Color Contrast ❌ Bad: Light gray (#CCC) on white (1.7:1) ✅ Good: Dark gray (#767676) on white (4.5:1) ### Pitfall 5: Auto-Playing Media ❌ Bad: `

accessible-web-dev

Install this skill

Comments