aria-readonly

설명

aria-readonly="true"는 요소가 조작 가능한 위젯이지만 값은 바꿀 수 없음을 알립니다. 포커스를 받고 값을 읽고 복사할 수 있다는 점에서 aria-disabled와 다릅니다. 화면낭독기는 “읽기 전용”이라고 알립니다.

textbox, checkbox, combobox, listbox, radiogroup, slider, spinbutton, grid, gridcell과 이를 상속하는 searchbox, switch, treegrid, columnheader, rowheader에 씁니다. 예를 들어 결제 확인 화면에서 앞 단계에 입력한 값을 보여 주는 필드, 권한이 없는 사용자에게 보여 주는 설정 값, 편집할 수 없는 열이 있는 데이터 그리드가 있습니다.

HTML <input readonly>와 <textarea readonly>는 읽기 전용 상태가 자동으로 전달되므로 이 속성을 쓰지 않습니다. 네이티브 체크 상자와 라디오 버튼에는 readonly 속성이 없어서, 사용자 정의 체크 상자나 그리드처럼 직접 만든 위젯에서 주로 필요합니다. 이 속성도 동작을 막지 않으므로, 스크립트에서 값 변경(클릭, Space, 방향키 입력)을 직접 무시해야 합니다.

grid에 설정하면 그 안의 모든 셀이 읽기 전용으로 간주되고, 개별 gridcell에 aria-readonly="false"를 주어 일부 셀만 편집 가능하게 할 수 있습니다. 읽기 전용임을 시각적으로도 구분(배경색, 잠금 아이콘 등)하는 것이 좋습니다.

테스트할 때는 Tab으로 포커스가 가는지, “읽기 전용”이 읽히는지, 값을 바꾸려 해도 바뀌지 않는지, 값 텍스트를 화면낭독기로 읽을 수 있는지 확인합니다.

값

사용 예

<label for="order-no">주문 번호</label>
<input id="order-no" type="text" value="2024-10-00128" readonly>

<div role="checkbox" tabindex="0" aria-checked="true" aria-readonly="true">
  자동 갱신 (관리자만 변경 가능)
</div>

function toggle(box) {
  if (box.getAttribute('aria-readonly') === 'true') return;   // 값 변경 무시
  box.setAttribute('aria-checked', String(box.getAttribute('aria-checked') !== 'true'));
}

<input type="text" value="홍길동" aria-readonly="true">

직접 해 보기

“편집 잠금”을 켜면 “알림 받기” 체크 상자가 읽기 전용이 됩니다. 포커스는 가지만 Space·클릭으로 값이 바뀌지 않습니다.

화면낭독기에서는

사용 지침

사용할 수 있는 역할

관련 속성·패턴

이 속성을 쓰는 패턴

참고 자료

• WAI-ARIA 1.2 명세: aria-readonly (새 창)
• MDN: aria-readonly (새 창)
• APG: Grid 패턴 (편집 가능 셀) (새 창)