웹 접근성 개선을 위한 ARIA 가이드
카테고리
디자인
서브카테고리
UX 디자인
대상자
- 웹 개발자/디자이너
- 중급~고급 수준 (구체적인 코드 구현 및 도구 사용법 포함)
핵심 요약
- ARIA의 3가지 핵심 개념:
role(컴포넌트 역할),property(상태 설명),state(동적 변화) - 접근성 테스트 도구:
axe,WAVE,Lighthouse활용 필수 - WCAG 기준 준수: 4.5:1 색상 대비 비율, 스크린 리더 호환성, 탭 내비게이션 테스트
섹션별 세부 요약
1. 접근성 실패 사례와 ARIA 정의
- 96.3%의 웹사이트가 접근성 테스트 실패 (타겟, 넷플릭스 등 사례)
- ARIA = Accessible Rich Internet Applications
- 커스텀 컴포넌트와 보조 기술 간 API 역할
- 3개 핵심 개념
role="button"(역할 정의)aria-required="true"(필수성 표시)aria-expanded="false"(상태 동적 변경)
2. ARIA 구현 예제
- 버튼 컴포넌트
```html
```
- 폼 입력 처리
```html
```
- 모달 창 구현
```jsx
function AccessibleModal({ isOpen, onClose, title, children }) {
const modalRef = useRef(null);
const previousFocus = useRef(null);
useEffect(() => {
if (isOpen) {
previousFocus.current = document.activeElement;
modalRef.current?.focus();
} else {
previousFocus.current?.focus();
}
}, [isOpen]);
}
```
3. 접근성 테스트 및 검증 도구
- 자동화 테스트
```bash
npm install -g @axe-core/cli
axe
```
- WCAG 대비 검증
```bash
npx @adobe/leonardo-contrast-colors --bg "#ffffff" --colors "#0066cc"
```
- 수동 테스트 도구
- NVDA (Windows), VoiceOver (Mac), TalkBack (Android)
4. 접근성 검증 체크리스트
- ✅ 탭 내비게이션 테스트 (마우스 없이 작동 가능)
- ✅ 포커스 지시자 시각적 표시
- ✅ 스크린 리더가 콘텐츠 정확히 안내
- ✅ WCAG AA 기준 (4.5:1 색상 대비)
- ✅ 폼 오류 및 동적 콘텐츠 업데이트 알림
- ✅ 커스텀 컴포넌트에 적절한
role적용 - ✅ 스킵 링크 기능 검증
결론
- ARIA는 법적 보호 및 SEO 향상 (15% 장애인 사용자, $13T 연간 소비력)
- 핵심 실천:
role,aria-*속성 사용,axe도구로 자동 검증 - 추천 자료: ARIA 가이드에서 50+ 역할, 위젯 패턴, 테스트 스크립트 포함
- 코드 구현 시:
tabindex,aria-live,aria-haspopup등 필수 속성 적용 필수