이름·역할·상태·값

네 가지 핵심 정보

화면낭독기는 포커스가 간 요소에 대해 보통 “이름, 역할, 상태, 값” 순서로 안내합니다. 이 정보만 정확하면 사용자는 화면을 보지 않고도 요소가 무엇이고 어떻게 쓰는지 알 수 있습니다.

<label for="vol">음량</label>
<input id="vol" type="range" min="0" max="100" value="40">
<!-- 안내 예: "음량, 슬라이더, 40" -->

<button type="button" aria-pressed="true">굵게</button>
<!-- 안내 예: "굵게, 전환 버튼, 눌림" -->

여기서 “상태”는 넓게 보면 aria-required, aria-haspopup 같은 속성도 포함합니다. ARIA 명세는 둘을 구분하지만(역할·상태·속성 참고), 보조기술 사용자 입장에서는 모두 요소에 대한 추가 정보입니다.

이름 (Name)

접근 가능한 이름(accessible name)은 보조기술이 요소를 부를 때 쓰는 문자열입니다. 버튼·링크·입력 필드처럼 조작 가능한 요소에는 반드시 이름이 있어야 합니다. 이름이 없으면 화면낭독기는 “버튼”이라고만 읽어, 무엇을 하는 버튼인지 알 수 없습니다.

<button type="button">
  <svg viewBox="0 0 24 24"><path d="…"/></svg>
</button>
<!-- "버튼" -->

<button type="button" aria-label="닫기">
  <svg viewBox="0 0 24 24" aria-hidden="true"><path d="…"/></svg>
</button>
<!-- "닫기, 버튼" -->

이름은 정해진 우선순위에 따라 계산됩니다. 대략 aria-labelledby → aria-label → 네이티브 수단(<label>, alt, <caption> 등) → 콘텐츠(버튼·링크 안의 글자) → title 순입니다. 자세한 규칙은 접근 가능한 이름 계산 문서를 참고하세요.

역할 (Role)

역할은 요소가 무엇이고 어떻게 조작하는지 알려 줍니다. “버튼”이라고 들으면 사용자는 Enter나 Space로 누를 수 있다고 기대하고, “링크”라고 들으면 다른 곳으로 이동한다고 기대합니다. “탭”이라고 들으면 화살표 키로 다른 탭으로 옮길 수 있다고 기대합니다.

대부분의 HTML 요소는 암묵적 역할을 가집니다. <button>은 button, <a href>는 link, <h2>는 heading입니다. 대응하는 HTML 요소가 없을 때만 role 속성으로 지정합니다.

<span class="link" onclick="go()">더 보기</span>
<!-- "더 보기" (역할 없음, 포커스 불가) -->

<a href="/notice">공지사항 더 보기</a>
<!-- "공지사항 더 보기, 링크" -->

상태 (State)

상태는 사용자 조작이나 프로그램에 따라 바뀌는 요소의 현재 상황입니다. 상태가 바뀌면 브라우저가 이벤트를 보내 보조기술이 바로 알려 줍니다. 그래서 화면과 상태 값이 항상 같아야 합니다.

const btn = document.querySelector('#menu-btn');
btn.addEventListener('click', () => {
  const open = btn.getAttribute('aria-expanded') === 'true';
  btn.setAttribute('aria-expanded', String(!open));  // 상태 갱신
  menu.hidden = open;                                 // 화면 갱신
});

상태 동기화 방법은 상태 동기화 문서에서 자세히 다룹니다.

값 (Value)

값은 입력 필드에 들어 있는 글자나 범위 위젯의 현재 수치입니다. 네이티브 입력 요소는 값을 자동으로 전달하고, 직접 만든 슬라이더·스핀버튼·진행 막대는 aria-valuenow, aria-valuemin, aria-valuemax로 알립니다. 숫자만으로 의미가 부족하면 aria-valuetext로 사람이 읽기 좋은 문장을 줍니다.

<div role="slider" tabindex="0" aria-label="화면 밝기"
     aria-valuemin="0" aria-valuemax="100" aria-valuenow="70"
     aria-valuetext="70%, 밝음"></div>
<!-- 안내 예: "화면 밝기, 슬라이더, 70%, 밝음" -->

WCAG 4.1.2 이름, 역할, 값

네 가지 정보는 WCAG 2.2 성공 기준 4.1.2 이름, 역할, 값(Name, Role, Value)(수준 A)의 요구 사항 그 자체입니다. 이 기준은 다음을 요구합니다.

모든 사용자 인터페이스 구성 요소(폼 요소, 링크, 스크립트로 생성한 구성 요소 등)에 대해, 이름과 역할을 프로그램이 알아낼 수 있어야 하고, 사용자가 설정할 수 있는 상태·속성·값을 프로그램이 설정할 수 있어야 하며, 이 항목들이 바뀌었다는 알림이 보조기술을 포함한 사용자 에이전트에 전달되어야 합니다.

즉, 단순히 처음에 올바른 값을 넣는 것만으로는 부족하고, 상태가 바뀔 때 접근성 트리도 함께 갱신되어야 합니다. 국내 KWCAG 2.2에서는 “웹 애플리케이션 접근성 준수” 항목이 같은 내용을 다룹니다.

확인하는 방법

1. 브라우저 개발자 도구의 접근성 패널에서 요소의 Name, Role, 상태 값을 확인합니다(접근성 트리 보기).
2. 요소를 조작하면서 상태·값이 실제로 바뀌는지 확인합니다.
3. 화면낭독기로 포커스를 이동해 이름·역할·상태가 모두 들리는지 확인합니다(화면낭독기로 테스트하기).