시각 장애 손님을 위한 음성 접근성 메뉴 만들기 WCAG 2.2 AA

이스탄불 카드쾨이의 12석 찻집이 VoiceOver/TalkBack 호환 QR 메뉴로 전환한 뒤 튀르키예 시각장애인협회 공유를 통해 월 240명의 신규 방문객을 얻었습니다. 음성 접근성은 더 이상 옵션이 아닙니다.

WCAG 2.2 AA 핵심

스크린리더는 시맨틱 HTML이 필요합니다. 상품명은 h3, 가격은 aria-describedby, 알레르겐 아이콘은 aria-label="글루텐 함유". 명도 대비 4.5:1, 터치 영역 44×44 px, 논리적 탭 순서.

이모지만으로는 부족합니다. ARIA 레이블이 없으면 시각장애 사용자는 아무 정보도 듣지 못합니다.

장바구니용 ARIA Live

상품 추가 시 role="status" 영역에서 "렌틸 수프 추가됨, 총 3개"라고 알립니다. 오류는 role="alert"로 즉시 끼어들게 합니다.

thMenu의 ToastProvider는 기본 aria-live="polite". 알레르겐 빈 상태에서 "직원에게 문의" 메시지를 표시해 안전을 보장합니다.

출시 전 테스트

iPhone VoiceOver 또는 Android TalkBack을 켜고 주문 흐름 전체를 들어보세요. 1초 이상의 침묵은 포커스 문제를 의미합니다. Axe DevTools/WAVE로 30초 안에 주요 위반을 찾아낼 수 있습니다.

실제 시각장애 사용자로 테스트해야 합니다. 자동 도구는 맥락을 이해하지 못합니다.

자주 묻는 질문

별도 오디오 버전이 필요한가요? 아니요, 올바른 HTML이면 충분합니다.

자체 TTS를 추가해야 하나요? 시스템 스크린리더가 이미 처리합니다.

WCAG 인증을 받을 수 있나요? 공식 인증은 없고 VPAT 보고서가 표준입니다.

도움이 되셨나요? 공유해 주세요.