AI로 WCAG 준수 감사하기

규칙에서 개선으로

🔄 Quick Recall: 이전 레슨에서 시각, 청각, 운동, 인지 장애별 AI 보조 기술 현황을 살펴봤어요. 이번에는 AI를 사용해 디지털 제품이 그 보조 기술과 제대로 작동하는지 확인해요 — WCAG 준수 감사와 실행 가능한 개선 계획을 세워요.

WCAG(웹 콘텐츠 접근성 가이드라인)는 압도적일 수 있어요: WCAG 2.1 AA 수준만으로 13개 지침에 50개 성공 기준이에요. 한국의 KWCAG 2.2는 33개 검사 항목으로 확대됐고요. 전체 웹사이트를 수동으로 확인하면 몇 주가 걸려요. AI 감사 도구는 몇 분 만에 스캔할 수 있어요 — 하지만 발견한 것을 이해하고 놓친 것을 아는 게 진짜 실력이에요.

WCAG 감사 워크플로

1단계: 자동화 스캔

자동화 스캔이 잡는 것(~30%):

이미지 대체 텍스트 누락
색상 대비 4.5:1(텍스트) 또는 3:1(큰 텍스트) 미달
폼 라벨 누락 및 연결 실패
빈 헤딩 또는 깨진 헤딩 계층
페이지 언어 속성 누락
중복 요소 ID
깨진 ARIA 참조

2단계: AI 지원 이슈 분석

감사 도구에서 이슈 목록을 받으면 AI를 활용해 정리하세요. 각 이슈별로 AI에게 요청: 평문 설명, 영향받는 대상, 심각도 우선순위(치명/높음/중간/낮음), 구체적 코드 수정, 수정 시간 추정. 유형별(이미지, 폼, 내비게이션, ARIA)과 우선순위별로 그룹화해요.

✅ Quick Check: 접근성 감사에 자동화 스캔과 수동 테스트가 모두 필요한 이유는? 자동화 도구는 구조적 이슈(누락된 속성, 대비 비율, 헤딩 계층)를 잡아요 — 약 30%. 하지만 대체 텍스트가 의미 있는지, 탭 순서가 논리적인지, 콘텐츠가 인지적으로 명확한지, 스크린 리더 발표가 합리적인지는 평가할 수 없어요.

주요 WCAG 이슈와 AI 수정

대체 텍스트 없는 이미지

이미지의 네 가지 카테고리를 이해하는 게 핵심이에요:

정보 전달 이미지: 의미를 전달하는 사진, 차트 → 설명적 대체 텍스트 필요
장식 이미지: 순수 시각적 배경, 구분선 → 빈 alt="" 필요 (누락이 아님)
기능 이미지: 링크나 버튼 속 아이콘 → 기능을 설명 (“홈으로 이동”)
복합 이미지: 차트, 데이터 시각화 → 짧은 alt + 근처에 긴 설명

색상 대비 실패

일반 텍스트: 최소 4.5:1 비율 필요
큰 텍스트: 최소 3:1 필요
UI 구성요소: 최소 3:1 필요
AI가 브랜드 색상에 가까우면서 기준을 충족하는 대안 색상 제안 가능

ARIA 패턴

ARIA는 강력한 도구지만 올바르게 구현해야 해요. 잘못된 ARIA는 없는 것보다 나빠요 — 스크린 리더를 적극적으로 오도하니까요.

드롭다운 메뉴: role, state, 키보드 인터랙션
탭 패널: tablist, tab, aria-selected, 화살표 키 내비게이션
모달 다이얼로그: role=“dialog”, 포커스 트랩, ESC 키 닫기
아코디언: 적절한 헤딩, aria-expanded, aria-controls

CI/CD 통합

가장 효과적인 접근성 전략은 이슈를 배포 전에 잡아내요:

PR 체크 (자동화, 모든 PR):

axe-core 통합 단위 테스트
색상 대비 검증
HTML 유효성 검사 (시맨틱)
이미지 alt 속성 존재 확인

스테이징 배포 (자동화 + 수동):

axe로 전체 사이트 접근성 스캔
키보드 내비게이션 스모크 테스트
새 페이지를 수동 검토 대상으로 표시

분기별 감사:

수동 스크린 리더 테스트
보조 기술 사용자와 사용자 테스트
WCAG 준수 보고서 생성

✅ Quick Check: 접근성 오버레이가 장애인 커뮤니티에서 논란이 되는 이유는? 기저 코드를 수정하지 않아서예요 — 스크린 리더 사용자는 이미 자체 도구가 설정돼 있고, 오버레이가 보조 기술과 충돌할 수 있고, 법원이 준수 증거로 인정하지 않았고, 진짜 수정에 대한 투자를 멈추게 하는 거짓 안전감을 줘요.

핵심 정리

AI 기반 접근성 감사는 구조적 이슈를 몇 분 만에 잡지만 WCAG 기준의 ~30%만 커버
사용자 영향으로 우선순위화: 폼 라벨·키보드 트랩은 사용자를 완전히 차단, 미세한 대비 위반은 불편하지만 사용 가능
접근성 오버레이를 피하세요 — 기저 코드를 고치지 않고, 보조 기술과 충돌, 법적 보호 불가
CI/CD에 자동화 테스트를 통합해 배포 전 이슈를 잡고, 분기별 수동 감사로 나머지 70% 커버
잘못된 ARIA는 없는 것보다 나빠요 — 스크린 리더를 적극적으로 오도하니까요

Up next: 다음 레슨에서는 AI를 활용해 접근 가능한 콘텐츠를 대규모로 만드는 방법을 배워요 — 대체 텍스트, 자막, 트랜스크립트, 문서 구조.