폼 실시간 검증 제대로 하기: 타이밍부터 aria-invalid까지
회원가입 폼을 만들고 있었습니다. 이메일 입력창에 포커스를 주자마자 "이메일 형식이 올바르지 않습니다"라는 에러가 떴어요. 아직 아무것도 입력하지 않았는데요. ...
Aria-Live Aria-Live RSS 피드 구독
SPA에서 포커스 관리 제대로 하기: 라우팅 후 스크린 리더가 혼란에 빠지지 않도록
React로 만든 SPA를 잘 써오고 있었는데, 어느 날 접근성 검사를 했더니 이런 피드백이 왔습니다. "페이지가 이동했는데 스크린 리더가 아무 말도 안 해요." ...
aria-live 상태 메시지, 스크린 리더는 어떻게 읽을까 — WCAG 4.1.3
쇼핑몰에서 "장바구니에 담기"를 누르면 화면 오른쪽 위 배지의 숫자가 3에서 4로 바뀝니다. 눈으로 보는 사람에게는 그걸로 충분한 피드백이죠. 그런데 화면을 읽어주는 소프트웨어인 스크린 리더로 웹을 쓰는 사람에게는요? 페이지 어딘가의 숫자가 조용히 바뀐 것만으로는 아무것도 전달되지 않습니다. 담겼는지, 몇 개인지, 실패했는지 알 길이 없어요. ...
aria-live가 안 읽힐 때 — ARIA 라이브 리전 제대로 쓰기
"저장되었습니다"라는 초록색 토스트가 화면 오른쪽 아래에 뜹니다. 2초 뒤 사라지고요. 마우스를 쓰는 사람에게는 완결된 피드백입니다. 그런데 화면을 보지 않는 사람에게는요? 그 토스트는 일어나지 않은 일입니다. 저장이 됐는지 안 됐는지 알 방법이 없어요. ...