실시간 영역이 실패하는 이유와 해결 방법

라이브 영역은 단순해 보이지만 자주 작동하지 않습니다. 흔한 문제점을 알아 두면 실제 스크린 리더로 혼란스럽게 테스트하느라 시간을 낭비하지 않을 수 있습니다. 🐛

영역과 그 텍스트를 같은 순간에 만들면 많은 리더가 이를 놓칩니다. 변경이 발생하기 전에 영역이 빈 상태로 먼저 존재해야 합니다.

페이지를 로드할 때 텍스트가 없는 라이브 컨테이너를 추가한 다음, 나중에 내용을 업데이트하십시오. 그러면 스크린 리더가 이미 해당 영역을 감시하고 있습니다.

같은 문자열을 두 번 작성하면 리더가 변경 사항을 감지하지 못하기 때문에 침묵이 발생하는 경우가 많습니다. 반복되는 개수와 상태에서 특히 자주 나타납니다.

영역을 비운 다음, 다음 틱에 새 텍스트를 설정하십시오. 잠깐 초기화하면 리더가 새 알림으로 인식합니다.

영역을 거대한 텍스트 덩어리로 업데이트하면 사용자가 정보에 압도됩니다. 라이브 영역은 전체 페이지 내용이 아니라 짧은 업데이트를 위한 것입니다.

aria-atomic을 true로 설정하면 변경된 부분만이 아니라 변경이 발생할 때마다 영역 전체를 읽습니다. 여러 내용을 결합한 메시지에 유용합니다.

aria-relevant 속성은 추가나 제거와 같이 어떤 변경 유형을 알릴지 제어합니다. 대부분의 경우 추가와 텍스트를 포함하는 기본값이 적합합니다.

display none으로 숨긴 영역은 접근성 트리에서 제거되어 침묵을 유지합니다. 이는 가장 흔한 실수 중 하나입니다.

브라우저 검사 도구만으로는 영역이 작동한다는 것을 입증할 수 없습니다. 배포하기 전에 NVDA나 VoiceOver 같은 실제 스크린 리더로 항상 확인하십시오.

같은 라이브 영역도 스크린 리더와 브라우저에 따라 다르게 들릴 수 있습니다. 하나만 믿지 말고 몇 가지 조합으로 테스트하십시오.

이제 라이브 영역의 문제를 해결할 수 있습니다. 먼저 비어 있는 상태로 렌더링하고, 반복되는 내용은 비운 다음 설정하며, display none을 피하고, 실제 리더로 항상 테스트하십시오. ✅