role="treegrid"

설명

treegrid는 grid와 tree를 합친 역할입니다. 메일 스레드 목록, 하위 작업이 있는 작업 표, 폴더 크기·수정일이 함께 보이는 파일 목록처럼 계층이 있는 표에 씁니다. 필수 하위 요소는 row(직접 또는 rowgroup 안)입니다.

계층 정보는 행에 붙입니다.

• aria-level — 행의 수준(1부터).
• aria-expanded — 하위 행이 있는 행만. 하위 행이 없는 행에는 붙이지 않습니다.
• aria-posinset·aria-setsize — 같은 수준 형제 중 위치와 개수.

표는 DOM상 평평하기 때문에 이 값들을 직접 넣어야 합니다. 접힌 행의 하위 행은 hidden으로 숨깁니다. APG는 포커스가 행에도, 셀에도 갈 수 있는 구조를 제시합니다. 행에 포커스가 있으면 →/←가 펼치기·접기를, 셀에 포커스가 있으면 셀 이동을 합니다.

테스터 관점

• 행으로 이동할 때 수준·펼침 상태·위치가 읽히는지 확인합니다.
• 셀로 이동했을 때 열 제목이 함께 읽히는지 확인합니다.
• 접힌 행 아래 하위 행이 숨김 처리되어 있는지 확인합니다.

함께 쓰는 속성

지원 속성

전역 속성(이름·설명 등)은 모든 역할에 쓸 수 있어 생략했습니다.

키보드 동작

사용 예

<table role="treegrid" aria-label="받은 메일">
  <thead><tr><th scope="col">제목</th><th scope="col">보낸 사람</th></tr></thead>
  <tbody>
    <tr aria-level="1" aria-posinset="1" aria-setsize="1" aria-expanded="true" tabindex="0">
      <td>회의 일정</td><td>김민지</td>
    </tr>
    <tr aria-level="2" aria-posinset="1" aria-setsize="1" tabindex="-1">
      <td>Re: 회의 일정</td><td>이서준</td>
    </tr>
  </tbody>
</table>

function setExpanded(row, open) {
  row.setAttribute('aria-expanded', String(open));
  childRowsOf(row).forEach(function (r) { r.hidden = !open; });
}

<table role="treegrid">
  <tr class="parent open"><td>회의 일정</td></tr>
  <tr class="child"><td>Re: 회의 일정</td></tr>   <!-- aria-level, aria-expanded 없음 -->
</table>

직접 해 보기

행에 포커스를 두고 ↑ ↓로 이동, →로 펼치거나(이미 펼쳐졌으면) 첫 셀로, ←로 접거나 부모 행으로 이동합니다. 셀에 있을 때는 ← →로 셀 사이를, 첫 셀에서 ←를 누르면 행으로 돌아갑니다. Enter는 메일을 엽니다.

화면낭독기에서는

사용 지침

관련 역할·패턴

이 역할을 쓰는 패턴

참고 자료

• WAI-ARIA 1.2 명세: treegrid 역할 (새 창)
• APG: Treegrid 패턴 (새 창)
• APG: 메일 받은편지함 트리그리드 예제 (새 창)