메뉴
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/ffsshhttiikk/opencode-agents-skills --skill accessibility명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
SOC 직업 분류 기준
SKILL.md 표시 중
| name | accessibility |
| description | Web accessibility (a11y) best practices and implementation |
| license | MIT |
| compatibility | opencode |
| metadata | {"audience":"developers","category":"frontend"} |
When creating accessible user interfaces or reviewing for accessibility.
WCAG 2.1 Principles:
1. Perceivable
- Text alternatives for images
- Captions for audio
- Adaptable layouts
- Distinguishable (color, contrast)
2. Operable
- Keyboard accessible
- Enough time for interactions
- No seizure-inducing content
- Navigable (headings, focus order)
3. Understandable
- Readable and predictable
- Input assistance
4. Robust
- Compatible with current and future user agents
Conformance Levels:
- A: Minimum (required)
- AA: Recommended (target)
- AAA: Highest (exceptional cases)
<!-- BAD: Non-semantic markup -->
<div class="header">
<div class="logo"></div>
<div class="nav"></div>
</div>
<div class="main">
<div class="article">Content</div>
</div>
<div class="footer"></div>
<!-- GOOD: Semantic HTML -->
<header>
<a href="/" aria-label="Homepage">
<img src="logo.png" alt="Company Name">
</a>
<nav aria-label="Main navigation">
<ul>
<li><a =>Products
About
Page Title
Main content goes here...
2024 Company
<!-- BAD: Non-interactive elements -->
<div class="button" onclick="save()">Save</div>
<!-- GOOD: Proper interactive elements -->
<button type="button" onclick="save()">Save</button>
<!-- Skip link for keyboard users -->
<head>
<style>
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000;
color: #fff;
padding: 8px;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
</style>
</head>
<body>
<a href="#main-content" class="skip-link">Skip to main content</a>
<nav>...
Main Content
Open Modal
Modal Title
×
Modal content...
<!-- ARIA roles for custom components -->
<div role="button" tabindex="0" aria-pressed="false">
Toggle Favorite
</div>
<!-- Live regions for dynamic content -->
<div
role="status"
aria-live="polite"
aria-atomic="true"
>
Changes will be announced
</div>
<!-- Form validation -->
<form>
<label for="email">Email</label>
<input
type="email"
id="email"
name="email"
aria-describedby="email-hint email-error"
aria-invalid="false"
>
<p id="email-hint">We'll never share your email</p>
<p id="email-error" hidden>
Please enter a valid email address
</p>
</form>
/* Minimum contrast ratios (WCAG AA) */
/* Normal text: 4.5:1 */
/* Large text (18pt+ or 14pt bold): 3:1 */
/* UI components: 3:1 */
.good-contrast {
/* Passes AAA (7:1) */
color: #1a1a1a;
background-color: #ffffff;
}
.acceptable-contrast {
/* Passes AA (4.5:1) */
color: #333333;
background-color: #ffffff;
}
.large-text {
/* Passes AA for large text (3:1) */
color: #555555;
background-color: #ffffff;
font-size: 18px;
}
/* Don't rely on color alone */
.status {
padding: 4px 8px;
border-radius: 4px;
}
.status.success {
background-color: #d4edda;
color: #155724;
}
.status.error {
background-color: #f8d7da;
color: #721c24;
}
/* Add icon to reinforce color meaning */
.status.success::before {
content: "✓ ";
}
{
: ;
}
<!-- Images must have alt text -->
<img src="chart.png" alt="Sales chart showing 25% growth in Q4">
<!-- Decorative images -->
<img src="decoration.png" alt="" role="presentation">
<!-- Complex images need detailed descriptions -->
<img
src="infographic.png"
alt="Infographic: Step 1 Research, Step 2 Design, Step 3 Development"
>
<details>
<summary>View detailed description</summary>
<p>Full description of the infographic content...</p>
</details>
<!-- Tables need proper structure -->
<table>
<caption>Quarterly Sales Report</caption>
<thead>
<tr>
<th scope="col">Quarter</th>
<th scope="col">Revenue</th>
Expenses
Q1
$100,000
$80,000
<form>
<fieldset>
<legend>Contact Information</legend>
<div class="form-group">
<label for="name">Full Name <span aria-hidden="true">*</span></label>
<input
type="text"
id="name"
name="name"
required
aria-required="true"
autocomplete="name"
>
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input
type="email"
id="email"
name="email"
required
aria-required="true"
=
>
Phone Number
Include country code (e.g., +1)
Submit
Email
Please enter a valid email address
# Automated accessibility testing with axe-core
import pytest
class TestAccessibility:
def test_homepage_accessibility(self, page):
"""Test homepage with axe-core."""
page.goto('/')
# Run axe-core
violations = page.evaluate('''() => {
const axe = window.axe;
return axe.run(document, {
runOnly: {
type: 'tag',
values: ['wcag2a', 'wcag2aa']
}
});
}''')
assert len(violations['violations']) == 0, \
f"Accessibility violations: {violations['violations']}"
def test_keyboard_navigation(self, page):
"""Test keyboard navigation works."""
page.goto('/')
# Press Tab multiple times
page.keyboard.press('Tab')
focused = page.evaluate('document.activeElement.tagName')
# First focusable element should be first link
assert focused in ['A', 'BUTTON', 'INPUT']
def test_color_contrast(self, page):
"""Test color contrast requirements."""
page.goto('/')
violations = page.evaluate('''() => {
const axe = window.axe;
const results = axe.run(document, {
checks: ['color-contrast']
});
return results.violations;
}''')
(violations) ==
ACCESSIBILITY_CHECKLIST =