aria-disabled

설명

aria-disabled="true"는 요소가 화면에 있고 인식할 수는 있지만 지금은 편집하거나 실행할 수 없음을 보조기술에 알립니다. 화면낭독기는 “사용 불가” 또는 “흐리게 표시됨”처럼 읽습니다.

HTML disabled 속성과 가장 큰 차이는 동작을 막지 않는다는 점입니다. disabled는 클릭을 막고 Tab 순서에서 제외하지만, aria-disabled는 상태만 알릴 뿐 포커스, 클릭, 키 입력이 모두 그대로 동작합니다. 그래서 스크립트에서 이벤트를 직접 무시해야 합니다. 반대로 이 특성 덕분에 비활성 버튼에 포커스가 머물러 “왜 누를 수 없는지” 설명(aria-describedby)을 들려줄 수 있습니다. 필수 항목을 다 채우기 전의 “다음” 버튼, 메뉴 안의 쓸 수 없는 항목(APG는 비활성 메뉴 항목도 방향키로 포커스할 수 있게 권장합니다)이 대표적인 쓰임입니다.

WAI-ARIA 1.2에서 aria-disabled는 button, link, menuitem, tab, gridcell, group, scrollbar, separator, application과 입력·복합 위젯 역할(체크 상자, 콤보 상자, 목록 상자, 라디오 그룹, 슬라이더, 텍스트 상자, 그리드, 트리 등)에서 쓸 수 있습니다. 복합 위젯이나 group에 설정하면 그 안의 하위 요소도 모두 비활성으로 간주됩니다.

비활성 상태도 눈으로 알 수 있어야 하므로 [aria-disabled="true"] 선택자로 흐린 스타일을 주되, 텍스트 대비가 너무 낮아 읽을 수 없게 만들지는 않습니다(비활성 요소는 WCAG 1.4.3 대비 요구에서 예외이지만, 읽을 수 있으면 더 좋습니다). 테스트할 때는 키보드로 포커스한 뒤 Enter·Space를 눌러도 실제 동작이 실행되지 않는지, “사용 불가”가 읽히는지, 활성화 조건이 충족되면 속성이 제거되는지 확인합니다.

값

사용 예

<button type="submit" disabled>제출</button>

<button type="button" aria-disabled="true" aria-describedby="next-hint">다음</button>
<p id="next-hint">필수 항목을 모두 입력하면 다음 단계로 넘어갈 수 있습니다.</p>

btn.addEventListener('click', function (e) {
  if (btn.getAttribute('aria-disabled') === 'true') {
    e.preventDefault();          // form 제출 등 기본 동작 차단
    return;                      // 실제 동작 실행 안 함
  }
  goNext();
});
// 조건 충족 시
btn.removeAttribute('aria-disabled');

<a href="/checkout" aria-disabled="true" class="btn is-disabled">결제하기</a>

직접 해 보기

약관 동의 전에 “가입하기”를 Tab으로 포커스하고 Enter를 눌러 보세요. 포커스는 가지만 동작하지 않고 이유를 알려 줍니다.

화면낭독기에서는

사용 지침

사용할 수 있는 역할

관련 속성·패턴

이 속성을 쓰는 패턴

참고 자료

• WAI-ARIA 1.2 명세: aria-disabled (새 창)
• APG: Focusability of disabled controls (새 창)
• MDN: aria-disabled (새 창)