ARIA 접근성 가이드

역할 · 문서 구조

role="cell"

정적인 표(table)의 한 칸입니다. 반드시 row 안에 있어야 합니다.

중급HTML 요소 우선

한눈에 보기

분류
문서 구조
대응 HTML
<td> (table 역할의 표 안에서)
이름 정하는 방법
콘텐츠, 작성자 (contents, author)
이름 필수
아니요
필수 상위 요소
row
필수 하위 요소
없음

설명

cell은 표 형식 컨테이너의 한 칸입니다. 대화형이 아닌 table 안에서 씁니다. 사용자가 칸 사이를 화살표로 이동하며 조작하는 grid·treegrid에서는 gridcell을 씁니다.

HTML <table> 안의 <td>가 자동으로 cell이 됩니다. CSS display를 바꾸거나(display: block/grid/flex) 반응형으로 표를 재배치할 때 일부 브라우저가 표 의미를 잃는 경우가 있어, 이때 role="table", row, cell을 명시해 의미를 되살리기도 합니다.

셀이 여러 열·행에 걸치면 aria-colspan/aria-rowspan을, 일부 행·열만 DOM에 있을 때는 aria-colindex/aria-rowindex로 위치를 알립니다. HTML 표에서는 colspan/rowspan 속성을 씁니다.

함께 쓰는 속성

지원 속성

aria-colindexaria-colspanaria-rowindexaria-rowspan

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

사용 예

div로 만든 표의 셀

HTML
<div role="table" aria-label="대출 현황">
  <div role="row">
    <span role="columnheader">도서명</span>
    <span role="columnheader">반납일</span>
  </div>
  <div role="row">
    <span role="cell">작은 아씨들</span>
    <span role="cell">7월 20일</span>
  </div>
</div>

row 없이 cell만 (비권장)

비권장HTML
<div role="table">
  <span role="cell">작은 아씨들</span>
</div>

cell은 반드시 row 안에 있어야 합니다.

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
표 안에서 다음 칸으로 이동 (Ctrl+Alt+→)반납일, 2열, 7월 20일

사용 지침

이렇게 쓰세요

  • 가능하면 <table>과 <td>를 씁니다.
  • ARIA 셀은 row 안에 둡니다.

이렇게 쓰지 마세요

  • 대화형 그리드에 cell을 쓰지 않습니다(gridcell 사용).
rowtablegridcellcolumnheaderrowheader

이 역할을 쓰는 패턴

정렬 가능한 표

참고 자료