ARIA 접근성 가이드

역할 · 라이브 리전

role="log"

채팅·이벤트 기록처럼 새 항목이 순서대로 끝에 추가되는 라이브 리전입니다. 추가된 항목을 공손하게(polite) 읽어 줍니다.

중급

한눈에 보기

분류
라이브 리전
대응 HTML
없음
이름 정하는 방법
작성자 (author)
이름 필수
아니요
필수 상위 요소
없음
필수 하위 요소
없음

설명

log는 새로운 정보가 의미 있는 순서로 추가되고 오래된 정보는 사라질 수 있는 영역입니다. 채팅 메시지, 고객 상담 대화, 게임 진행 기록, 오류 로그 등이 해당합니다. 다른 라이브 리전과 달리 항목이 들어온 순서와 읽는 순서가 관련이 있으며, 새 항목은 항상 끝에 추가됩니다.

암묵적 속성

log는 aria-live="polite"를 암묵적으로 가집니다. aria-relevant 기본값(additions text)에 따라 새로 추가된 항목만 읽고, aria-atomic은 기본값 false여서 전체 기록을 다시 읽지 않습니다.

설계 요령

  • 보이는 제목이나 aria-label(예: “상담 대화”)로 이름을 줍니다.
  • 항목마다 보낸 사람·시각처럼 맥락을 텍스트로 포함합니다. 아이콘이나 색으로만 구분하지 않습니다.
  • 사용자가 직접 보낸 메시지까지 다시 읽히는 것이 번거롭다면, 다른 사람이 보낸 메시지만 알리는 방식(별도 라이브 리전)도 고려합니다.
  • 자동으로 끝없이 쌓이는 로그는 너무 많은 낭독을 일으킬 수 있습니다. 알림 끄기 옵션을 제공하는 것이 좋습니다.

log와 feed

feed는 사용자가 읽어 가며 글을 불러오는 구조로, 자동 낭독이 없습니다. 새 항목을 자동으로 알려야 하면 log입니다.

함께 쓰는 속성

전역 속성(이름·설명 등)은 모든 역할에 쓸 수 있어 생략했습니다.

사용 예

채팅 기록

권장HTML
<h2 id="chat-h">상담 대화</h2>
<div role="log" aria-labelledby="chat-h">
  <p><b>상담원</b> 10:02 무엇을 도와드릴까요?</p>
  <p><b>나</b> 10:03 대출 연장 방법이 궁금합니다.</p>
</div>

중간에 끼워 넣거나 전체를 다시 그리기 (비권장)

비권장JavaScript
// 매번 innerHTML 전체를 다시 쓰면 기존 메시지까지 다시 읽힐 수 있습니다
log.innerHTML = renderAll(messages);

새 항목만 끝에 appendChild로 추가합니다.

직접 해 보기

“새 메시지 받기”를 누르면 기록 끝에 항목이 추가됩니다. 화면낭독기는 추가된 항목만 읽습니다.

상담 대화

상담원 무엇을 도와드릴까요?

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
새 메시지가 추가됨상담원 대출 연장은 반납일 전까지 1회 가능합니다.

사용 지침

이렇게 쓰세요

  • 새 항목은 끝에만 추가합니다.
  • 항목에 보낸 사람 등 맥락을 텍스트로 넣습니다.
  • log에 이름을 붙입니다.

이렇게 쓰지 마세요

  • 항목을 추가할 때마다 전체 내용을 다시 렌더링하지 않습니다.
  • 정렬 순서가 바뀌는 목록에 log를 쓰지 않습니다.
statusalertmarqueefeed

이 역할을 쓰는 패턴

알림 메시지(토스트·상태)

참고 자료