role="grid"

설명

grid는 table의 구조(행·열·제목 셀)에 위젯 동작을 더한 역할입니다. 그리드 전체가 탭 순서에서 한 번만 멈추고, 안에서는 방향키로 gridcell 사이를 이동합니다. 필수 하위 요소는 row(직접 또는 rowgroup 안)입니다.

APG는 두 가지 용도를 구분합니다.

• 데이터 그리드 — 스프레드시트, 정렬·선택·편집이 되는 데이터 목록. 제목 셀(columnheader, rowheader)이 있습니다.
• 레이아웃 그리드 — 달력 날짜, 사진 목록, 태그 목록처럼 여러 상호작용 요소를 2차원으로 묶어 탭 정지를 줄이는 용도. 제목 셀이 없을 수 있습니다.

그리드 속성: 일부 행·열만 렌더링하면 aria-rowcount·aria-colcount로 전체 크기를, 여러 셀을 고를 수 있으면 aria-multiselectable, 전체가 편집 불가면 aria-readonly를 씁니다. 포커스 관리는 로빙 tabindex 또는 aria-activedescendant 중 하나를 고릅니다.

테스터 관점

• Tab 한 번으로 그리드에 들어가고 한 번 더 누르면 나가는지, 다시 들어오면 마지막 셀로 돌아오는지 확인합니다.
• 셀 이동 시 열 제목이 함께 읽히는지 확인합니다.
• 셀 안 위젯(버튼, 입력란)이 있다면 Enter/F2로 들어가고 Esc로 셀 탐색으로 돌아오는지 확인합니다.

함께 쓰는 속성

지원 속성

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

키보드 동작

사용 예

<table role="grid" aria-labelledby="g-cap" aria-readonly="true">
  <caption id="g-cap">이번 주 근무표</caption>
  <tr><th scope="col">이름</th><th scope="col">월</th><th scope="col">화</th></tr>
  <tr><th scope="row">김민지</th><td tabindex="0">주간</td><td tabindex="-1">야간</td></tr>
</table>

<div role="grid" aria-label="주문 목록" aria-rowcount="5000" aria-colcount="6">
  <div role="rowgroup">
    <div role="row" aria-rowindex="1">
      <div role="columnheader" aria-colindex="1">주문 번호</div> ...
    </div>
  </div>
  <div role="rowgroup">
    <div role="row" aria-rowindex="1201"> ... </div>
  </div>
</div>

function focusCell(r, c) {
  var cell = rows[r].cells[c];
  current.tabIndex = -1;
  cell.tabIndex = 0;
  cell.focus();
  current = cell;
}

<table role="grid">   <!-- 클릭·편집 없는 단순 표 -->
  <tr><th>상품</th><th>가격</th></tr>
  <tr><td>사과</td><td>3,000원</td></tr>
</table>

직접 해 보기

그리드 안 셀에 포커스를 두고 방향키, Home/End, Ctrl+Home/End로 이동해 보세요. Tab을 누르면 그리드를 벗어나고, 다시 들어오면 마지막으로 있던 셀로 돌아옵니다. Space로 셀을 선택/해제합니다.

화면낭독기에서는

사용 지침

관련 역할·패턴

이 역할을 쓰는 패턴

참고 자료

• WAI-ARIA 1.2 명세: grid 역할 (새 창)
• APG: Grid 패턴 (새 창)
• APG: 데이터 그리드 예제 (새 창)
• APG: 레이아웃 그리드 예제 (새 창)