role="status"

설명

status는 사용자에게 도움이 되지만 alert로 끼어들 만큼 중요하지는 않은 정보를 담습니다. “저장되었습니다”, “검색 결과 24건”, “장바구니에 담았습니다”, “3개 파일 업로드 중” 같은 메시지가 대표적입니다. WCAG 2.2의 4.1.3 상태 메시지 성공 기준을 충족하는 가장 일반적인 방법입니다.

암묵적 속성

status는 aria-live="polite"와 aria-atomic="true"를 암묵적으로 가집니다. 화면낭독기가 현재 읽던 내용을 마친 뒤 영역 전체를 읽습니다. 점자 단말기는 상태 표시에 칸 일부를 할애할 수도 있습니다.

HTML과의 관계

HTML <output> 요소의 암묵적 역할이 status입니다. 계산 결과처럼 양식 입력의 결과를 보여 줄 때 적합합니다. 다만 일부 브라우저·화면낭독기 조합에서는 <output>의 변경 알림이 일관되지 않아, 일반적인 상태 메시지에는 <div role="status">가 더 많이 쓰입니다.

지켜야 할 점

• status 영역은 미리 페이지에 두고 내용만 바꿉니다. 페이지 로드 때 이미 있던 텍스트는 읽히지 않습니다.
• status에 포커스를 옮기지 않습니다. 명세는 상태 변화로 포커스가 status로 이동하지 않게 하라고 정합니다.
• 다른 요소가 status 내용을 제어한다면(예: 필터 버튼이 결과 수 안내를 바꿈) 그 요소에서 aria-controls로 관계를 밝힐 수 있습니다.
• 입력할 때마다 status를 갱신하면(글자 수 안내 등) 낭독이 쌓입니다. 잠시 멈췄을 때 한 번만 갱신(디바운스)합니다.

함께 쓰는 속성

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

사용 예

<label for="q">도서 검색</label>
<input id="q" type="search">
<div role="status" id="result-count"></div>

<script>
  // 결과를 그린 뒤
  document.getElementById('result-count').textContent = '검색 결과 24건';
</script>

<form oninput="total.value = Number(days.value) * 100">
  <label for="days">연체 일수</label>
  <input id="days" type="number" value="0">
  <p>연체료: <output name="total" for="days">0</output>원</p>
</form>

// 화면낭독기가 영역을 인식하기 전에 내용이 함께 들어가 읽히지 않을 수 있습니다
document.body.insertAdjacentHTML('beforeend', '<div role="status">저장되었습니다</div>');

직접 해 보기

버튼을 눌러 보세요. 포커스는 버튼에 머물고, 상태 영역의 내용만 바뀌어 화면낭독기가 공손하게 읽습니다.

화면낭독기에서는

사용 지침

관련 역할·패턴

이 역할을 쓰는 패턴

참고 자료

• WAI-ARIA 1.2 명세: status 역할 (새 창)
• WCAG 4.1.3 상태 메시지 이해 (새 창)
• WCAG Technique ARIA22: role=status로 상태 메시지 제공 (새 창)
• MDN: ARIA 라이브 리전 (새 창)