웹 접근성을 위한 aria-live 속성 완벽 정리!

 

aria-live

aria-live는 웹접근성(WAI-ARIA)속성 중 하나로, 스크린 리더가 동적으로 변경된 콘텐츠를 자동으로 읽어주도록 설정 하는 역할을 한다.

<div aria-live="polite">새로운 알림이 있습니다.</div>

👉 변경되는 내용을 실시간으로 스크린 리더가 잃도록 설정하는 속성

 

값	설명
off	기본값, 변경 사항을 읽지 않음
polite	현재 읽고 있는 내용을 끝낸 후 변경 내용을 읽음
assertive	즉시 변경 내용을 읽음(긴급한 알림 등에 사용)

 

---

언제 사용되나?

• 사용자 입력에 따라 즉시 변경되는 UI요소(예: 알림 메시지, 검색 결과 업데이트, 에러 메시지 등)
• 비동기 데이터 변경(예: 실시간 채팅, 로딩 상태 표시)
• 사용자 액션 없이도 변하는 정보(예: 뉴스 속보, 스포츠 점수 업데이트)

---

aria-live 속성 값 및 예제

1. aria-live="polite"(중요도가 낮은 경우)

• 사용자의 현재 작업을 방해하지 않고, 콘텐츠가 변경되었을 때만 읽어줌
• 주로 알림 메시지, 검색 결과 갱신 등에 사용

<div id="search-result" aria-live="polite">
  검색 결과가 여기에 표시됩니다.
</div>

<button onclick="updateSearchResults()">검색</button>

<script>
function updateSearchResults() {
    document.getElementById("search-result").innerText = "총 10개의 검색 결과가 있습니다.";
}
</script>

 

결과 :

• 검색 버튼을 누르면 결과가 업데이트되며, 스크린 리더가 새로운 내용만 읽어줌
• 하지만 사용자의 현재 작업을 방해하지 않음

---

2. aria-live="assertive" (즉시 읽어야 하는 경우)

• 즉시 중요한 정보가 변경될 때 사용됨
• 사용자 작업을 중단하고 즉각적으로 읽어야 하는 경우 (예: 에러 메시지, 긴급 공지)

<div id="error-message" aria-live="assertive">
  <!-- 에러 메시지 출력 영역 -->
</div>

<button onclick="showError()">에러 발생</button>

<script>
function showError() {
    document.getElementById("error-message").innerText = "오류가 발생했습니다! 다시 시도해주세요.";
}
</script>

 

결과

• 버튼을 클릭하면 에러 메시지가 나타나고, 스크린 리더가 즉시 이를 읽어줌
• 중요한 경우, 장애 발생 알림 등에 적합

---

3. aria-live="off" (스크린 리더가 읽지 않음)

설명

• 기본값이며, 콘텐츠가 변경되더라도 화면 읽기 도구가 무시함
• 중요한 변경 사항이 아니라면 aria-live 속성을 생략하는 것이 일반적임

<div id="log" aria-live="off">
  로그가 여기에 표시됩니다.
</div>

 

결과

• #log 내부 컨텐츠가 변경되어도 스크린 리더는 이를 읽지 않음

---

4. role="alert"으로 aria-live 효과

• role="alert"를 사용하면 자동으로 aria-live="assertive"가 적용됨
• 긴급한 정보 전달(예: 에러 메시지)에 적합

<div id="alert-box" role="alert">
  <!-- 중요한 알림이 여기에 표시됨 -->
</div>

<button onclick="showAlert()">알림</button>

<script>
function showAlert() {
    document.getElementById("alert-box").innerText = "긴급 공지: 서비스 점검이 예정되었습니다.";
}
</script>

 

결과

• role="alert" 덕분에 즉시 스크린 리더가 읽어줌
• aria-live="assertive"를 명시적으로 추가하지 않아도 동일한 효과