- 각 시연의 가상 스크린 리더 창은 발화 큐를 눈으로 보여주는 스펙 기준 시뮬레이션입니다. 실제 스크린 리더는 제품마다 조금씩 다르게 동작해요.
- 버튼을 누르면 가상 창에 "…, 버튼"이 먼저 뜨는데, 스크린 리더가 초점을 읽는 동작의 재현입니다. 태그는 대기 → 발화 → 완료 순서로 바뀌고, 끊김은 잘린 발화, 무음은 애초에 발화가 없던 경우예요.
- 진짜 확인은 스크린 리더를 켜고(윈도우는 무료 스크린 리더 NVDA 설치, 맥은 Cmd+F5로 내장 VoiceOver) 같은 버튼을 눌러보는 것. 이 페이지의 알림 영역은 전부 진짜라서 실제로 읽어줍니다.
- 10개 연속 담기를 눌렀을 때 polite와 assertive가 어떻게 갈라지는지 비교해보세요.
1. polite vs assertive — 줄을 서느냐, 끼어드느냐
WCAG 4.1.3 · 기법 ARIA22aria-live="polite"는 지금 읽고 있는 말이 끝나기를 기다렸다가 읽고, assertive는 하던 말을 끊고 즉시 읽습니다. 장바구니 개수처럼 연속으로 바뀌는 값에서 이 차이가 크게 벌어져요.
이 페이지의 시뮬레이션 창들은 눈으로 발화 큐를 보여주는 장치입니다. 스크린 리더 사용자는 실제 알림을 그대로 들으므로 같은 정보를 이미 얻고 있습니다.
2. 디바운스 — 행동이 끝난 뒤 한 번만 말하기
실무 패턴화면의 숫자는 즉시 바뀌지만, 알림 영역은 클릭이 멈추고 0.6초 뒤에 최종 개수만 받습니다. 10번을 연달아 눌러도 발화는 한 번이에요. 위 1번과 같은 조작을 해보고 가상 스크린 리더 창을 비교해보세요.
3. 알림 영역이 없으면 — 조용한 실패 (F103)
위반 사례텍스트는 눈에 보이게 바뀌지만 role도 aria-live도 없습니다. 스크린 리더는 아무 말도 하지 않아요. WCAG가 실패 유형 F103으로 문서화한 상황입니다. 개수 자체는 버튼 옆 칩으로 이동해 직접 읽으면 확인할 수 있어요 — 알림이 안 올 뿐입니다.
4. 아이콘·소리 상태 — 비텍스트 상태 콘텐츠
1.1.1 + 4.1.3 조합상태가 텍스트가 아니라 아이콘이나 소리로만 표시될 때도 있죠. 이때는 대체 텍스트(1.1.1)와 role(4.1.3)이 함께 있어야 스크린 리더에 전달됩니다. 두 저장 버튼을 눌러 비교해보세요 — 아래쪽은 짧은 알림음도 함께 납니다.
5. 설문의 새 질문 — 상태 메시지가 아닌 변화
4.1.3 요구 아님"아니오"를 고르면 추가 질문이 나타납니다. 이 새 입력들은 성공·대기·진행·오류 중 어느 것도 알리지 않으니 정의상 상태 메시지가 아니고, 4.1.3의 요구 대상도 아닙니다. 그래도 미리든 나중이든 알려주면 더 편하죠 — 세 방식을 전환하며 차이를 들어보세요.