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명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
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: