accessibility-wcaglisted

# Accessibility (WCAG 2.2) 웹 접근성 표준 WCAG 2.2를 준수하도록 강제하는 스킬입니다. ## 2025 Context > **WCAG 2.2는 2023년 10월 ISO 표준(ISO/IEC 40500)으로 채택되었습니다.** > **유럽 접근성법(EAA)은 2025년 6월부터 시행됩니다.** ## Core Principles (POUR) | 원칙 | 설명 | 예시 | |------|------|------| | **P**erceivable | 인지 가능 | 대체 텍스트, 자막, 색상 대비 | | **O**perable | 조작 가능 | 키보드 접근, 충분한 시간 | | **U**nderstandable | 이해 가능 | 명확한 언어, 예측 가능한 동작 | | **R**obust | 견고함 | 보조 기술 호환성 | ## Rules ### 1. Semantic HTML (필수) ```tsx // ❌ BAD: div 남용 <div onClick={handleClick}>버튼</div> <div class="header">제목</div> // ✅ GOOD: 시맨틱 태그 사용 <button onClick={handleClick}>버튼</button> <h1>제목</h1> ``` ### 2. 이미지 대체 텍스트 (필수) ```tsx // ❌ BAD: alt 누락 또는 의미 없음 <img src="logo.png" /> <img src="chart.png" alt="이미지" /> // ✅ GOOD: 의미 있는 alt <img src="logo.png" alt="회사명 로고" /> <img src="chart.png" alt="2024년 매출 증가 추이 그래프" /> // ✅ 장식용 이미지는 빈 alt <img src="decoration.png" alt="" role="presentation" /> ``` ### 3. 키보드 접근성 (필수) ```tsx // ❌ BAD: 키보드 접근 불가 <div onClick={handleClick} style={{ cursor: 'pointer' }}> 클릭 </div> // ✅ GOOD: 키보드 접근 가능 <button onClick={handleClick}>클릭</button> // 또는 커스텀 요소 사용 시 <div role="button" tabIndex={0} onClick={handleClick} onKeyDown={(e) => e.key === 'Enter' && handleClick()} > 클릭 </div> ``` ### 4. 포커스 관리 ```tsx // ❌ BAD: 포커스 스타일 제거 button:focus { outline: none; } // ✅ GOOD: 명확한 포커스 표시 button:focus { outline: 2px solid #005fcc; outline-offset: 2px; } button:focus-visible { outline: 2px solid #005fcc; } ```