aria-atomic

설명

aria-atomic는 라이브 리전(aria-live 또는 status·alert 같은 역할을 가진 영역)의 내용이 바뀔 때 무엇을 읽을지 정합니다. 기본값 false이면 바뀐 노드만, true이면 영역 전체(작성자가 붙인 이름 포함)를 하나로 묶어 읽습니다.

예를 들어 <p aria-live="polite">홈 <span>2</span> : 원정 <span>1</span></p>에서 원정 점수만 2로 바뀌면, false일 때는 "2"만 들려 무엇이 2가 되었는지 알 수 없습니다. true로 두면 "홈 2 : 원정 2"가 읽혀 맥락이 유지됩니다. 장바구니 개수, 시계, 점수판, "3개 중 2번째 슬라이드"처럼 조각 하나만으로 의미가 없는 영역에 씁니다.

브라우저는 바뀐 요소에서 조상 방향으로 올라가며 aria-atomic이 지정된 첫 요소를 찾습니다. true면 그 요소 전체를, false가 명시되면 거기서 멈추고 바뀐 부분만 읽습니다. alert와 status는 역할 자체의 기본값이 true입니다.

반대로 채팅 로그(log)처럼 새 메시지가 계속 추가되는 영역에 true를 넣으면 메시지가 올 때마다 전체 기록을 처음부터 읽어 매우 불편해집니다. 이런 영역은 기본값 false를 유지합니다.

검수할 때는 화면낭독기를 켜고 영역의 일부를 바꿔 보아, 들리는 문장만으로 무엇이 바뀌었는지 이해할 수 있는지 확인합니다. 너무 짧아 의미를 알 수 없으면 true를, 너무 길게 반복되면 false나 영역 범위 축소를 검토합니다.

값

사용 예

<p aria-live="polite" aria-atomic="true">
  홈 <span id="home">2</span> : 원정 <span id="away">1</span>
</p>

<!-- 비권장: 메시지가 올 때마다 전체 기록을 다시 읽음 -->
<div role="log" aria-atomic="true">
  <p>민수: 안녕하세요</p>
  <p>지영: 반가워요</p>
</div>

document.getElementById('away').textContent = String(++awayScore);
// aria-atomic="true"이므로 영역 전체가 다시 읽힙니다.

직접 해 보기

득점 버튼을 눌러 보세요. aria-atomic 체크를 끄면 화면낭독기는 바뀐 숫자만, 켜면 점수판 전체를 읽습니다. 화면 아래에는 화면낭독기가 읽을 문장을 예시로 보여 줍니다.

화면낭독기에서는

사용 지침

사용할 수 있는 역할

전역 속성이므로 모든 역할과 HTML 요소에 쓸 수 있습니다. 특히 다음 역할과 자주 함께 씁니다.

관련 속성·패턴

이 속성을 쓰는 패턴

참고 자료

• WAI-ARIA 1.2 명세: aria-atomic (새 창)
• MDN: ARIA 라이브 리전 (새 창)
• MDN: aria-atomic (새 창)