Arete-Consortium
Arete-Consortium/ai-skills
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/Arete-Consortium/ai-skills --skill a11yコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Intelligent CI failure diagnosis and guided remediation for GitHub Actions, GitLab CI, and local builds
Pre-execution mapping of codebases, document collections, or problem spaces. Runs BEFORE any Gorgon workflow to give all agents shared situational awareness
Investigative methodology for analyzing document collections — provenance analysis, anomaly detection, redaction detection, and cross-document validation
SKILL.md を表示中
| name | a11y |
| description | Accessibility Checklist |
| lifecycle | experimental |
Web accessibility audit and guidelines (WCAG compliance).
/a11y # General checklist
/a11y path/to/component.tsx # Audit specific component
/a11y --level AA # WCAG level (A, AA, AAA)
/a11y --fix # Suggest fixes
# Accessibility Audit: [Component/Page]
## Summary
| Category | Status | Issues |
|----------|--------|--------|
| Perceivable | ⚠️ | 3 |
| Operable | ✅ | 0 |
| Understandable | ⚠️ | 1 |
| Robust | ✅ | 0 |
**WCAG Level**: AA
**Overall**: Needs Improvement
---
## Issues Found
### Critical (Must Fix)
#### 1. Missing alt text on images
**WCAG**: 1.1.1 Non-text Content (Level A)
**Location**: `ProductCard.tsx:45`
```tsx
// Current (inaccessible)
<img src={product.image} />
// Fixed
<img src={product.image} alt={product.name} />
WCAG: 1.4.3 Contrast (Minimum) (Level AA)
Location: Button.tsx:12
Current contrast ratio: 3.5:1 (requires 4.5:1)
/* Current */
color: #888;
background: #fff;
/* Fixed */
color: #595959;
background: #fff;
WCAG: 2.4.1 Bypass Blocks (Level A)
Add skip navigation link for keyboard users.
<a href="#main-content" className="skip-link">
Skip to main content
</a>
## WCAG Quick Reference
### Level A (Minimum)
Must have for basic accessibility.
| Criterion | Requirement |
|-----------|-------------|
| 1.1.1 | Alt text for images |
| 1.3.1 | Info and relationships (semantic HTML) |
| 1.4.1 | Color not sole indicator |
| 2.1.1 | Keyboard accessible |
| 2.1.2 | No keyboard trap |
| 2.4.1 | Skip navigation |
| 3.1.1 | Language of page |
| 4.1.1 | Valid HTML |
| 4.1.2 | Name, role, value |
### Level AA (Standard)
Required for most compliance needs.
| Criterion | Requirement |
|-----------|-------------|
| 1.4.3 | Contrast ratio 4.5:1 (text) |
| 1.4.4 | Text resizable to 200% |
| 1.4.5 | Images of text avoided |
| 2.4.5 | Multiple ways to find pages |
| 2.4.6 | Descriptive headings/labels |
| 2.4.7 | Visible focus indicator |
| 3.2.3 | Consistent navigation |
| 3.2.4 | Consistent identification |
### Level AAA (Enhanced)
Highest level, not always achievable.
| Criterion | Requirement |
|-----------|-------------|
| 1.4.6 | Contrast ratio 7:1 |
| 1.4.8 | Visual presentation options |
| 2.1.3 | Keyboard (no exceptions) |
| 2.4.9 | Link purpose (link only) |
## Common Fixes
### Images
```tsx
// Informative image
<img src="chart.png" alt="Sales increased 25% in Q4" />
// Decorative image
<img src="decoration.png" alt="" role="presentation" />
// Complex image
<figure>
<img src="diagram.png" alt="System architecture" />
<figcaption>
Detailed description of the system architecture...
</figcaption>
</figure>
// Labeled input
<label htmlFor="email">Email address</label>
<input id="email" type="email" aria-describedby="email-hint" />
<span id="email-hint">We'll never share your email</span>
// Error state
<input
aria-invalid="true"
aria-describedby="email-error"
/>
<span id="email-error" role="alert">
Please enter a valid email
</span>
// Icon button needs label
<button aria-label="Close dialog">
<CloseIcon />
</button>
// Toggle button
<button
aria-pressed={isActive}
onClick={toggle}
>
Dark mode
</button>
// Landmark regions
<header role="banner">...</header>
<nav role="navigation" aria-label="Main">...</nav>
<main role="main" id="main-content">...</main>
<footer role="contentinfo">...</footer>
// Skip link
<a href="#main-content" className="sr-only focus:not-sr-only">
Skip to main content
</a>
// Tab panel
<div role="tablist">
<button role="tab" aria-selected="true" aria-controls="panel1">
Tab 1
</button>
</div>
<div role="tabpanel" id="panel1">Content</div>
// Modal dialog
<div
role="dialog"
aria-modal="true"
aria-labelledby="dialog-title"
>
<h2 id="dialog-title">Dialog Title</h2>
</div>
// Live region for updates
<div aria-live="polite" aria-atomic="true">
{statusMessage}
</div>
# axe-core CLI
npx axe https://example.com
# Pa11y
npx pa11y https://example.com
# Lighthouse
npx lighthouse https://example.com --only-categories=accessibility
When /a11y is invoked: