القائمة
WCAG 2.2 AA accessibility compliance patterns for web applications. Use when auditing accessibility or implementing WCAG requirements.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | wcag-compliance |
| description | WCAG 2.2 AA accessibility compliance patterns for web applications. Use when auditing accessibility or implementing WCAG requirements. |
| context | fork |
| agent | accessibility-specialist |
| version | 1.0.0 |
| tags | ["accessibility","wcag","a11y","aria","screen-reader","compliance"] |
| allowedTools | ["Read","Write","Grep","Glob","Bash"] |
| author | OrchestKit |
| user-invocable | false |
| complexity | medium |
Web Content Accessibility Guidelines 2.2 AA implementation for inclusive, legally compliant web applications.
<main>
<article>
<header><h1>Page Title</h1></header>
<section aria-labelledby="features-heading">
<h2 id="features-heading">Features</h2>
<ul><li>Feature 1</li></ul>
</section>
<aside aria-label="Related content">...</aside>
</article>
</main>
// Icon-only button
<button aria-label="Save document">
<svg aria-hidden="true">...</svg>
</button>
// Form field with error
<input
id="email"
aria-required="true"
aria-invalid={!!error}
aria-describedby={error ? "email-error" : "email-hint"}
/>
{error && <p id="email-error" role="alert">{error}</p>}
:root {
--text-primary: #1a1a1a; /* 16.1:1 on white - normal text */
--text-secondary: #595959; /* 7.0:1 on white - secondary */
--focus-ring: #0052cc; /* 7.3:1 - focus indicator */
}
:focus-visible {
outline: 3px solid var(--focus-ring);
outline-offset: 2px;
}
| Criterion | Requirement | Test |
|---|---|---|
| 1.1.1 Non-text | Alt text for images | axe-core scan |
| 1.3.1 Info | Semantic HTML, headings | Manual + automated |
| 1.4.3 Contrast | 4.5:1 text, 3:1 large | WebAIM checker |
| 1.4.11 Non-text Contrast | 3:1 UI components | Manual inspection |
| 2.1.1 Keyboard | All functionality via keyboard | Tab through |
| 2.4.3 Focus Order | Logical tab sequence | Manual test |
| 2.4.7 Focus Visible | Clear focus indicator | Visual check |
| 2.4.11 Focus Not Obscured | Focus not hidden by sticky elements | scroll-margin-top |
| 2.5.7 Dragging | Single-pointer alternative | Button fallback |
| 2.5.8 Target Size | Min 24x24px interactive | CSS audit |
| 4.1.2 Name/Role/Value | Proper ARIA, labels | Screen reader test |
| Decision | Choice | Rationale |
|---|---|---|
| Conformance level | WCAG 2.2 AA | Legal standard (ADA, Section 508) |
| Contrast ratio | 4.5:1 normal, 3:1 large | AA minimum requirement |
| Target size | 24px min, 44px touch | 2.5.8 + mobile usability |
| Focus indicator | 3px solid outline | High visibility, 3:1 contrast |
| Live regions | polite default, assertive for errors | Avoids interruption |
| Decorative images | alt="" role="presentation" | Hide from AT |
| Skip link | First focusable element | Keyboard user efficiency |
<div> instead of semantic elements (<nav>, <main>, <article>)<label> or aria-labeloutline: none without replacement indicatortabindex > 0 (disrupts natural order)a11y-testing - Automated accessibility testing with axe-core and Playwrightdesign-system-starter - Accessible component library patternsi18n-date-patterns - RTL layout and locale-aware formattingmotion-animation-patterns - Reduced motion and animation accessibilityKeywords: semantic, landmark, heading, structure, html5, main, nav, article Solves:
Keywords: aria, role, state, property, live-region, alert, status Solves:
Keywords: keyboard, focus, tab, trap, modal, skip-link, roving Solves:
Keywords: contrast, color, wcag, perceivable, vision, ratio Solves:
Use when a PR has Codex review comments, unresolved review threads, requested changes, or PR checks requiring attention. Triggers on "codex review", "resolve threads", "fix review comments", "converge branch", "address feedback", or when ultrareview-pr-audit detects unresolved threads (matchedCount > 0).
Use when reviewing or refactoring a branch for SSOT convergence, clean code, drift detection, overengineering, technical debt, dead code, unused code, stale comments, or production-grade maintainability. Triggers on "SSOT audit", "drift check", "clean code review", "technical debt scan", "dead code removal", or when ultrareview-pr-audit Phase 2 static verification is required.
Use when performing comprehensive PR review with browser testing, SSOT validation, and production readiness certification. Triggers on "ultrareview", "super review", "full PR audit", "complete PR verification", "production readiness check", or when user requests comprehensive PR validation with automated testing and multi-source best practices verification.
When the user wants to optimize content for AI search engines, get cited by LLMs, or appear in AI-generated answers. Also use when the user mentions 'AI SEO,' 'AEO,' 'GEO,' 'LLMO,' 'answer engine optimization,' 'generative engine optimization,' 'LLM optimization,' 'AI Overviews,' 'optimize for ChatGPT,' 'optimize for Perplexity,' 'AI citations,' 'AI visibility,' 'zero-click search,' 'how do I show up in AI answers,' 'LLM mentions,' or 'optimize for Claude/Gemini.' Use this whenever someone wants their content to be cited or surfaced by AI assistants and AI search engines. For traditional technical and on-page SEO audits, see seo-audit. For structured data implementation, see schema-markup.
Use when analyzing backlink profiles, link authority, toxic links, link-building opportunities, or competitor link gaps. 外链分析/反向链接
When the user wants to plan a content strategy, decide what content to create, or figure out what topics to cover. Also use when the user mentions "content strategy," "what should I write about," "content ideas," "blog strategy," "topic clusters," "content planning," "editorial calendar," "content marketing," "content roadmap," "what content should I create," "blog topics," "content pillars," or "I don't know what to write." Use this whenever someone needs help deciding what content to produce, not just writing it. For writing individual pieces, see copywriting. For SEO-specific audits, see seo-audit. For social media content specifically, see social-content.