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 설정에 포함하여 코드 작성 시점에 접근성 위반을 감지합니다.

# eslint-plugin-vuejs-accessibility 설치
npm install --save-dev eslint-plugin-vuejs-accessibility

• 자동 검증 도구만으로 모든 접근성 문제를 검출할 수 없습니다. 스크린 리더(NVDA, VoiceOver)를 사용한 수동 테스트를 병행하는 것을 권장합니다.