ARIA 접근성 가이드

상태 · 라이브 리전 · 전역

aria-busy

요소가 지금 업데이트되는 중이므로, 보조기술이 변경이 끝날 때까지 기다렸다가 한꺼번에 알리도록 합니다.

중급

한눈에 보기

구분
상태 (State)
분류
라이브 리전
값 형식
true / false
기본값
false
적용 범위
모든 요소 (전역 속성)
HTML 대체
없음

설명

aria-busy는 "이 영역은 지금 수정되는 중입니다"라는 상태입니다. true인 동안 보조기술은 영역 안의 변경을 바로 알리지 않고 기다렸다가, false로 바뀌면 그동안의 변경을 하나로 묶어 처리할 수 있습니다(명세상 MAY).

목록에 항목 여러 개를 차례로 추가하거나, 라이브 리전 내용을 여러 단계에 걸쳐 바꿀 때 첫 변경 전에 true, 마지막 변경 후 false로 설정합니다. 그러면 중간 상태가 조각조각 읽히는 것을 줄일 수 있습니다. feed 패턴은 새 기사를 불러오는 동안 피드에 aria-busy="true"를 설정하도록 안내합니다.

명세상 의무 사항도 하나 있습니다. tree나 grid처럼 필수 하위 요소가 있는 위젯을 스크립트로 바꾸는 동안 일시적으로 필수 구조가 깨진다면, 그동안 위젯에 aria-busy="true"를 설정해야 합니다(MUST).

주의할 점이 두 가지 있습니다. 첫째, 이 속성은 "로딩 중"을 사용자에게 알려 주지 않습니다. 로딩 상태 안내가 필요하면 status 라이브 리전이나 progressbar를 따로 씁니다. 둘째, 화면낭독기 지원이 일정하지 않습니다. 일부 화면낭독기는 busy인 영역을 탐색할 때 내용을 읽지 않거나 "바쁨"이라고 안내하고, 반대로 라이브 리전 알림 지연을 지키지 않는 경우도 있습니다. false로 되돌리는 것을 잊으면 영역이 계속 무시될 수 있으므로 오류 처리 경로에서도 반드시 되돌립니다.

검수할 때는 로딩이 끝나면(성공·실패 모두) 값이 false로 돌아오는지, 로딩 중임을 알리는 별도 안내가 있는지, 영역이 장시간 true로 남지 않는지 확인합니다.

값

값
값의미
false 기본값업데이트가 예정되어 있지 않습니다. 변경을 평소처럼 알립니다.
true요소가 업데이트되는 중입니다. 보조기술은 변경 알림을 미룰 수 있습니다.

사용 예

목록을 다시 그리는 동안

JavaScript
async function reload(list, status) {
  list.setAttribute('aria-busy', 'true');
  status.textContent = '목록을 불러오는 중입니다.';
  try {
    const items = await fetchItems();
    list.replaceChildren(...items.map(toListItem));
    status.textContent = '상품 ' + items.length + '개를 불러왔습니다.';
  } catch (e) {
    status.textContent = '목록을 불러오지 못했습니다.';
  } finally {
    list.setAttribute('aria-busy', 'false'); // 실패해도 반드시 되돌립니다
  }
}

피드에서 새 기사 불러오기

권장HTML
<div role="feed" aria-label="새 소식" aria-busy="true">
  <article aria-posinset="1" aria-setsize="-1">...</article>
  <!-- 새 기사를 추가하는 중 -->
</div>

로딩 안내를 aria-busy에만 맡김

비권장HTML
<!-- 비권장: 사용자는 로딩 중이라는 사실을 듣지 못함 -->
<div aria-busy="true"><span class="spinner"></span></div>

직접 해 보기

"새 소식 불러오기"를 누르면 목록에 aria-busy="true"가 설정된 채 항목 3개가 차례로 추가되고, 끝나면 false로 돌아옵니다. 로딩 상태는 별도의 role="status" 영역이 알립니다.

  • 가을 할인 행사를 시작합니다.

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
불러오기 시작새 소식을 불러오는 중입니다.
aria-busy="true"인 동안 항목 추가(지원하는 환경에서는 개별 항목을 바로 읽지 않음)
aria-busy="false"로 바뀜새 소식 3개를 불러왔습니다. (환경에 따라 추가된 항목 내용을 함께 읽음)

사용 지침

이렇게 쓰세요

  • 여러 단계에 걸친 변경 전에 true, 모든 변경이 끝나면 false로 설정합니다.
  • 성공·실패 모두에서 false로 되돌립니다(finally).
  • 로딩 중임을 알리는 안내는 role="status"나 progressbar로 따로 제공합니다.
  • 필수 하위 구조가 잠시 깨지는 트리·그리드 갱신 중에는 반드시 true로 둡니다.

이렇게 쓰지 마세요

  • aria-busy만으로 "로딩 중"을 사용자에게 알리려 하지 않습니다.
  • 페이지 전체(body)에 장시간 true를 걸어 두지 않습니다.
  • 로딩 스피너 아이콘에 붙이는 용도로 쓰지 않습니다. 변경되는 영역에 붙입니다.

사용할 수 있는 역할

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

feedlistgridtreetableregionlogstatus
aria-livearia-atomicaria-relevantaria-setsizearia-posinset

이 속성을 쓰는 패턴

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

참고 자료