동적으로 변경되는 컨텐츠 (alert, toast)와 같은 내용들을 사용자한테 알려주는 역할
•
너무 자주 업데이트되는 콘텐츠는 사용자에게 방해 될 수 있으니 sparingly 하게 사용해야 한다.
DOM에 항상 존재해야 한다.
<div id="error-messages" aria-live="assertive"></div>
<div id="status-messages" aria-live="polite"></div>
<div id="success-messages" aria-live="polite"></div>
HTML
복사
•
aria-live 영역은 페이지 로드 때 미리 DOM에 존재해야한다. → 동적으로 생성되어선 안되고 항상 DOM에 존재해야한다는 뜻
•
빈요소가 없으면 화면 낭독기가 변경 사항을 감지하기 어려울 수 있기 때문이다.
사용처
•
폼 검증 메시지: 사용자가 입력한 내용에 대한 실시간 피드백
•
로딩 상태: "저장 중...", "로딩 중..." 등의 상태 메시지
•
알림 메시지: 성공, 경고, 오류 메시지
•
실시간 데이터: 주식 가격, 스포츠 점수 등 실시간 업데이트
•
채팅 메시지: 새로운 메시지 도착 알림