alert

Web Accessibility

Alert

Role & Attribute

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

Screen Reader 지원

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

Sense Reader에서 읽히긴 하지만 10글자까지만 읽어줌

view

html

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

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

<!-- alert -->
<div class="c-alert" role="alert">
    <p class="c-alert__text">잘못된 값이 양식 필드에 입력되었습니다.</p>
</div>
<!-- // alert -->

css

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

주의

방해가 되는 특성 때문에 alert, 경고 역할은 사용자의 즉각적인 주의가 필요한 정보에만 사용한다.

예시 )

• 잘못된 값이 양식 필드에 입력되었습니다
• 사용자의 로그인 세션이 곧 만료됩니다.
• 서버 연결이 끊어져 로컬 변경 사항이 저장되지 않습니다.

참고

ARIA: alert role