status (toast message)

Web Accessibility

status

Role & Attribute

• role="status"
• aria-live
• aria-atomic

Screen Reader 지원

방식	Sense Reader	NVDA	VoiceOver	TalkBack
동적으로 태그 추가	X	X	O	O
문구만 추가	X	O	O	O
문구 및 role 추가	X	X	O	O
display none, block	X	X	O	X

view

html

w3 테스트 페이지

• aria-live="polite", aria-atomic="true"은 역할에 내재되어 있기 때문에 코드에서 선언할 필요가 없음
• 태그가 중간에 사라져도 내용이 길 경우 읽어줌

<button type="button">확인</button>

<!-- toast -->
<div class="c-toast" role="status">
    <p class="c-toast__text">장바구니가 담겼습니다.</p>
</div>
<!-- // toast -->

css

/*---------------------------------------------
  Toast
 ----------------------------------------------*/
.c-toast {
  overflow: hidden;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 901;
  width: 100px;
  max-height: 80%;
  background-color: #fff;
}

사용 예시

실시간 결과 정보, 성공(또는 결과) 상태 메시지를 사용자에게 전달한다.

예시 )

• 장바구니에 담겼습니다.
• 회원가입 양식이 전송 완료 되었습니다.

참고

• ARIA: status role
• 레진 WAI-ARIA 가이드라인

확인 필요

버튼을 선택 하였을때, 토스트팝업이 생성되었다가 일정 시간이 지나면 사라지는 코드를 제작하였다.
이와 관련하여 접근성 준수 여부를 확인하였을때 아래와 같은 답변을 받았다.
실제로 적용할 수 있는 코드인지 확인이 필요할 것 같다.

---

토스트 팝업이 문제가 되는 장애유형은 스크린 리더를 사용하는 전맹 장애 뿐만 아니라 저시력과 인지장애가 포함된다.
(참고: Understanding Success Criterion 2.2.1: Timing Adjustable)

전맹 장애인 사용자의 경우 위 방법으로 문제를 해결할 수 있지만,
저시력 사용자는 출현하는 메시지를 찾는 것부터 시간이 걸리기 때문에 텍스트를 읽는 데 좀 더 시간이 필요하다.
고령층을 포함하여 인지장애가 있는 사용자 역시 텍스트를 읽는 데 비장애인보다 좀 더 많은 시간이 필요하기 때문에
문제가 되는 상황이라 status 역할, live region의 적용으로 모든 문제를 해결하기 어렵다.

가능하다면 설정에 접근성 설정을 추가해서 토스트 팝업 시간 제한을 없애는 옵션을 주고,
해당 옵션이 활성화된 경우에 닫기 버튼이 제공되는 것이 현재 상황에서 가장 적합한 방식으로 보인다.
그럼에도 불구하고 수정하기 어렵다면 메시지 제공시간을 좀 더 여유있게 줄 것을 권장한다.

---