메뉴
Checklist for auditing and fixing accessibility issues (WCAG 2.1 AA compliance). Use when reviewing components or pages for accessibility.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Guide for creating RESTful API endpoints with validation and error handling. Use when implementing backend API routes.
Guide for implementing secure authentication with JWT and session management. Use when adding authentication to an application.
Guide for creating responsive layouts with CSS. Use when implementing responsive design or fixing layout issues.
Guide for designing database schemas with Prisma ORM. Use when creating or modifying database models.
Guide for consistent error handling across frontend and backend. Use when implementing error handling logic.
Guide for implementing form handling with React Hook Form and Zod validation. Use when creating forms with validation.
| name | accessibility-audit |
| description | Checklist for auditing and fixing accessibility issues (WCAG 2.1 AA compliance). Use when reviewing components or pages for accessibility. |
Follow this checklist to ensure WCAG 2.1 Level AA compliance:
✅ Check:
<header>, <nav>, <main>, <article>, <aside>, <footer><button> for interactive elements (not <div> with onClick)<a> for navigation (not <button>)<!-- ❌ Bad -->
<div onClick={handleClick}>Click me</div>
<!-- ✅ Good -->
<button onClick={handleClick}>Click me</button>
✅ Check:
Test: Navigate entire page using only Tab, Shift+Tab, Enter, Space, Arrow keys
/* Ensure visible focus indicator */
:focus-visible {
outline: 2px solid #0066cc;
outline-offset: 2px;
}
✅ Check:
Tool: Use browser DevTools or WebAIM Contrast Checker
/* ❌ Bad - insufficient contrast */
color: #999999;
background: #ffffff; /* 2.85:1 */
/* ✅ Good */
color: #666666;
background: #ffffff; /* 5.74:1 */
✅ Check:
<img> have alt attributealt=""<!-- Decorative -->
<img src="decorative-line.svg" alt="" />
<!-- Informative -->
<img src="chart.png" alt="Sales increased by 35% in Q4 2025" />
✅ Check:
<label>htmlFor to connect label to input<fieldset> and <legend>aria-invalid and aria-describedby for errors<label htmlFor="email">Email Address</label>
<input
id="email"
type="email"
aria-invalid={hasError}
aria-describedby={hasError ? "email-error" : undefined}
/>
{hasError && (
<span id="email-error" role="alert">
Please enter a valid email address
</span>
)}
✅ Check:
role="button" for clickable non-buttonsaria-label for icon-only buttonsaria-expanded for collapsible sectionsaria-live for dynamic content updatesaria-hidden="true" for decorative elements<!-- Icon button needs label -->
<button aria-label="Close dialog">
<IconX />
</button>
<!-- Expandable section -->
<button aria-expanded={isOpen} aria-controls="content-1">
Toggle Section
</button>
<div id="content-1" hidden={!isOpen}>
Content here
</div>
✅ Test with:
Key checks:
✅ Check:
/* Minimum touch target size */
.button {
min-height: 44px;
min-width: 44px;
padding: 0.75rem 1rem;
}
✅ Check:
prefers-reduced-motion@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
<!-- ❌ Bad -->
<a href="/about">Click here</a>
<!-- ✅ Good -->
<a href="/about">Learn more about our company</a>
<!-- ❌ Bad -->
<button><IconTrash /></button>
<!-- ✅ Good -->
<button aria-label="Delete item"><IconTrash aria-hidden="true" /></button>
// ✅ Trap focus inside modal
// ✅ Return focus to trigger element on close
// ✅ Close on Escape key
// ✅ Use role="dialog" and aria-modal="true"
Add to your test suite:
import { axe } from 'vitest-axe';
it('has no accessibility violations', async () => {
const { container } = render(<MyComponent />);
const results = await axe(container);
expect(results).toHaveNoViolations();
});