WCAG 2.1 기준
19.1.1. 준수 수준
TQS 프론트엔드 규격은 WCAG (Web Content Accessibility Guidelines) 2.1의 AA 수준 준수를 필수로 요구합니다.
| 수준 | 설명 | TQS 요구 사항 |
|---|---|---|
| A | 최소 수준의 접근성. 모든 사용자가 콘텐츠에 접근할 수 있는 기본 요건 | 필수 |
| AA | 일반적 수준의 접근성. 대부분의 장애 유형에 대한 접근성 보장 | 필수 |
| AAA | 최고 수준의 접근성. 특수한 상황까지 포괄하는 강화된 기준 | 권장 |
- A 수준과 AA 수준의 모든 성공 기준을 충족해야 합니다.
- AAA 수준은 프로젝트 특성에 따라 선택적으로 적용할 수 있습니다.
- 신규 프로젝트는 초기 설계 단계부터 AA 수준을 반영해야 합니다.
19.1.2. 4대 원칙
WCAG 2.1은 다음 4대 원칙을 기반으로 합니다. 각 원칙의 주요 지침 항목을 준수해야 합니다.
인식 가능(Perceivable)
- 모든 비텍스트 콘텐츠(이미지, 아이콘 등)에 대체 텍스트를 제공해야 합니다.
- 멀티미디어 콘텐츠에는 자막 또는 대본을 제공해야 합니다.
- 콘텐츠는 구조와 관계를 프로그래밍 방식으로 결정할 수 있어야 합니다.
- 색상만으로 정보를 전달하지 않아야 합니다.
운용 가능(Operable)
- 모든 기능은 키보드만으로 조작할 수 있어야 합니다.
- 시간 제한이 있는 콘텐츠는 사용자가 시간을 조절할 수 있어야 합니다.
- 초당 3회 이상 깜빡이는 콘텐츠를 사용하지 않아야 합니다.
- 사용자가 콘텐츠를 탐색하고 현재 위치를 파악할 수 있는 수단을 제공해야 합니다.
이해 가능(Understandable)
- 페이지의 언어를
<html lang="ko">와 같이 명시해야 합니다. - 입력 오류를 자동으로 감지하고, 오류 내용을 텍스트로 안내해야 합니다.
- 일관된 내비게이션과 일관된 식별 방식을 유지해야 합니다.
- 사용자의 의도와 다른 컨텍스트 변경이 자동으로 발생하지 않아야 합니다.
견고(Robust)
- 유효한 HTML 마크업을 사용해야 합니다. 열림/닫힘 태그, 고유한
id속성 등을 준수합니다. - 모든 UI 컴포넌트의 이름과 역할을 보조 기술이 인식할 수 있어야 합니다.
- 상태 메시지는 포커스를 이동하지 않고도 보조 기술에 전달되어야 합니다.
19.1.3. 색상 대비
텍스트와 배경 간의 색상 대비 비율은 다음 기준을 충족해야 합니다.
| 대상 | 최소 대비 비율 | 비고 |
|---|---|---|
| 일반 텍스트 (18px 미만) | 4.5:1 | AA 수준 필수 |
| 대형 텍스트 (18px 이상 또는 14px 이상 볼드) | 3:1 | AA 수준 필수 |
| UI 컴포넌트 및 그래픽 요소 | 3:1 | 버튼 테두리, 아이콘 등 포함 |
- 비활성 상태의 UI 컴포넌트와 순수 장식 요소는 대비 기준에서 제외됩니다.
- 로고 및 브랜드 텍스트는 대비 기준에서 제외됩니다.
- 대비 비율은 검증 도구를 사용하여 수치로 확인해야 합니다.
- 다크 모드와 라이트 모드 각각에서 대비 기준을 충족해야 합니다.
19.1.4. 검증 도구
접근성 준수 여부는 다음 도구를 사용하여 자동 검증합니다.
| 도구 | 용도 | 적용 시점 |
|---|---|---|
| axe-core | 런타임 접근성 자동 검사 | 개발 및 CI/CD |
| Lighthouse 접근성 감사 | 빌드 결과물의 접근성 점수 측정 | CI/CD |
| eslint-plugin-vuejs-accessibility | Vue 템플릿의 접근성 린트 규칙 | 코드 작성 시 |
- axe-core는 단위 테스트 및 E2E 테스트에 통합하여 실행합니다.
@axe-core/playwright또는vitest-axe를 사용하는 것을 권장합니다. - Lighthouse 접근성 감사 점수는 90점 이상을 유지해야 합니다. CI 파이프라인에서 자동 측정합니다.
- eslint-plugin-vuejs-accessibility는 ESLint 설정에 포함하여 코드 작성 시점에 접근성 위반을 감지합니다.
bash
# eslint-plugin-vuejs-accessibility 설치
npm install --save-dev eslint-plugin-vuejs-accessibility- 자동 검증 도구만으로 모든 접근성 문제를 검출할 수 없습니다. 스크린 리더(NVDA, VoiceOver)를 사용한 수동 테스트를 병행하는 것을 권장합니다.