aria-busy

설명

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

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

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

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

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

값

사용 예

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'); // 실패해도 반드시 되돌립니다
  }
}

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

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

직접 해 보기

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

화면낭독기에서는

사용 지침

사용할 수 있는 역할

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

관련 속성·패턴

이 속성을 쓰는 패턴

참고 자료

• WAI-ARIA 1.2 명세: aria-busy (새 창)
• APG: Feed 패턴 (새 창)
• MDN: aria-busy (새 창)
• a11ysupport.io: aria-busy 지원 현황 (새 창)