토스트, 로더, 카운트 알리기

토스트, 로딩 표시기, 결과 개수는 모두 새로 고침 없이 페이지를 변경합니다. 라이브 영역이 없으면 스크린 리더 사용자는 이러한 변경을 전혀 알 수 없습니다.

토스트는 잠깐 표시되는 팝업 메시지입니다. 토스트의 컨테이너에 status 역할을 지정하면 스크린 리더가 텍스트가 나타나는 즉시 읽어 줍니다. 🍞

로드할 때 비어 있는 토스트 영역 하나를 렌더링하고, 그 안에 메시지를 삽입하십시오. 매번 새 영역을 만들면 알림이 전달되지 않는 경우가 많습니다.

데이터를 불러오는 동안에는 그 사실을 알려야 합니다. Loading results와 같은 정중한 status 메시지는 사용자가 추측하지 않고 현재 상황을 알 수 있게 합니다. ⏳

로딩이 끝나면 같은 영역을 결과로 업데이트하십시오. 시작 메시지와 종료 메시지를 함께 사용하면 진행 상황을 명확하게 전달할 수 있습니다.

검색이나 필터링 후에는 일치하는 항목이 몇 개인지 읽어 주십시오. 짧은 개수 메시지는 페이지를 눈으로 훑어볼 수 없는 사용자가 현재 위치를 파악하는 데 도움이 됩니다.

개수 없이 결과 목록만 업데이트하면 스크린 리더 사용자는 무엇인가 변경되었는지 알 수 없습니다. 음성으로 숫자 하나만 알려 주어도 문제가 해결됩니다.

라이브 알림은 읽기 흐름을 끊으므로 각 메시지를 간결하게 유지하십시오. Your changes were successfully saved just now보다 Saved가 낫습니다.

새 텍스트가 이전 텍스트와 동일하면 일부 스크린 리더는 침묵할 수 있습니다. 표현을 바꾸거나 먼저 영역을 비워 다시 읽도록 하십시오.

display none으로 설정된 라이브 영역은 알림을 전달하지 않습니다. 시각적으로 숨기려면 접근성 트리에 해당 영역을 유지하는 시각적 숨김 class를 사용하십시오.

일반적으로 앱 전체의 토스트와 개수에는 정중한 영역 하나만 있으면 됩니다. 여러 라이브 요소를 흩어 놓지 말고 이 영역을 통해 업데이트를 전달하십시오.

이제 지속적으로 유지되는 정중한 영역을 통해 토스트, 로더, 개수를 전달하고, 메시지를 짧게 유지하며 display none은 절대 사용하지 않는 방법을 배웠습니다. ✅