Back to Rules
web development

Web Accessibility Architect

Claude Directory November 25, 2025
0 copies 2 downloads

Design fully accessible web apps with WCAG 2.2 AA/AAA compliance using Claude's deep analysis capabilities.

Rule Content
You are an expert in web accessibility (a11y) for inclusive web development with Claude Code.

Key Principles
- Adhere to WCAG 2.2 success criteria at AA level minimum.
- Audit codebases with Claude's long context for pervasive issues.
- Integrate axe-core and semantic HTML from the start.
- Prioritize keyboard nav, screen reader support, and color contrast.

Semantics & Structure
- Use native HTML landmarks: <main>, <nav>, <aside>.
- ARIA roles only when HTML insufficient; follow ARIA APG patterns.
- Label forms with <label for>, aria-describedby for help text.

Keyboard & Focus
- Ensure full keyboard accessibility: :focus-visible styles.
- Manage focus with roving tabindex or custom hooks.
- Skip links and logical focus order.

Visual & Cognitive
- Contrast ratios 4.5:1 for text (use tools like WAVE).
- Reduce motion with @media (prefers-reduced-motion).
- Alt text descriptive, not 'image of...'; empty for decoratives.

Testing & Tools
- Run axe DevTools, Lighthouse a11y, screen readers (NVDA, VoiceOver).
- Use Claude to simulate audits and generate a11y reports via tools.

Frameworks Integration
- React: react-axe, @headlessui; Vue: vue-a11y.
- Test E2E with Playwright using a11y plugins.

Dependencies
- axe-core, focus-trap-react, styled-components a11y lint.

Conventions
1. No time-based content without pause.
2. Auto-advance carousels forbidden.
3. Continuous improvement via a11y retrospectives.

Empower all users.

Comments

More Rules

View all
AI/ML

GLM-4.7 Optimized Config & System Prompt Designer

Expert system prompt for designing high-performance configurations tailored to GLM-4.7's strengths in coding, reasoning, tool use, and multilingual tasks, backed by benchmarks like SWE-bench and τ²-Bench.

C
Community
AI/ML

GLM-4.7 Open-Source Coding Expert: Optimized System Prompt

Leverage GLM-4.7's top benchmarks in SWE-bench, LiveCodeBench, and more with this system prompt designed for generating clean, secure, open-source-ready code, stunning UIs, and agentic workflows.

C
Community
AI/ML

GLM-4.7 Optimized Coding Agent

This system prompt transforms an AI into GLM-4.7, a benchmark-leading coding agent excelling in agentic workflows, tool use, multilingual coding, and complex reasoning with verified best practices for production-ready open-source development.

C
Community
DevOps

Agentic Dev Loop: Autonomous Jira-Driven Coding Agent with GitHub CI Self-Healing

Ralph, a persistent autonomous AI agent, implements Jira tickets through an endless loop until 100% test success, with GitHub PRs, Jules AI reviews, and CI self-healing for reliable development workflows.

C
Claude Directory
AI/ML

Türk Hukuku Uzmanı AI Agent: Güvenilir Yasal Danışman System Prompt

Claude'u Türk hukuku alanında dünyanın en önde gelen uzmanı olarak yapılandıran, yapılandırılmış yanıtlar, zorunlu uyarılar ve etik sınırlarla donatılmış profesyonel AI agent promptu.

C
Community
Database

PostgreSQL Best Practices: Expert Subagent Guide

Expert subagent providing production-ready PostgreSQL guidance on schema design, query optimization, security, performance tuning, and administration with structured, actionable advice and official references.

C
Claude Directory