Table
의미론적 헤더, 캡션, 정렬 상태를 갖춘 데이터 테이블 컴포넌트
관련 WCAG 기준 — 클릭하여 상세 보기
기본 코드 예시
공통 베이스라인
모든 디자인 시스템에 적용테이블에 라벨 제공
테이블에 aria-label 또는 aria-labelledby로 라벨을 제공해야 합니다. 어떤 데이터를 담은 테이블인지 스크린리더 사용자가 알 수 있어야 합니다.
th 요소에 scope 속성
th 요소에 scope="col" 또는 scope="row"를 사용해 헤더가 어느 방향을 대표하는지 명시해야 합니다.
복잡한 테이블에 id/headers 연결
행/열 헤더가 중첩된 복잡한 테이블에서는 th에 id를 부여하고 td에 headers 속성으로 연결해야 합니다.
th/td 의미론 유지
헤더 셀은 반드시 th, 데이터 셀은 td로 구분해야 스크린리더가 행/열 관계를 올바르게 전달합니다.
caption 요소로 설명 제공
table 요소 바로 아래 caption을 추가해 테이블 목적을 설명하세요. 시각적으로 숨겨도 스크린리더에 전달됩니다.
정렬 가능한 열에 aria-sort
정렬 기능이 있는 열 헤더에 aria-sort="ascending" 또는 aria-sort="descending"을 설정하고, 정렬 버튼은 th 내부에 두세요.
빈 셀에 설명 제공
빈 td에는 시각적으로는 안 보이더라도 스크린리더용 설명(예: "해당 없음")을 sr-only 텍스트로 제공하세요.
레이아웃 목적으로 table 사용
레이아웃을 위해 table을 사용하지 마세요. 레이아웃 테이블이라면 role="presentation"을 추가해 스크린리더가 테이블로 인식하지 않도록 해야 합니다.
th 없이 td만 사용
모든 셀을 td로만 만들면 스크린리더가 행/열 관계를 파악할 수 없습니다. 헤더 행과 열에는 반드시 th를 사용하세요.
div 중첩으로 table 재구현
복잡한 인터랙션이 필요해 role="grid"를 쓰는 경우가 아니라면, 의미론적 table 대신 div로 표를 만들지 마세요.
추가 체크포인트
TableHead 내부 TableCell은 자동 th 렌더링
MUI TableCell은 TableHead 내부에서 자동으로 <th>로 렌더링됩니다. scope 속성은 직접 추가해야 합니다.
aria-label로 테이블 목적 전달
Table 컴포넌트에 aria-label을 추가하여 스크린리더 사용자에게 테이블 목적을 전달하세요.
TableSortLabel로 정렬 상태 전달
TableSortLabel을 사용하면 aria-sort가 자동으로 설정되어 정렬 상태를 스크린리더에 전달합니다.
코드 샘플
구현 노트
- –MUI TableCell은 TableHead 내부에서 자동으로 <th>를 렌더링합니다.
- –TableContainer는 넓은 테이블에 수평 스크롤을 제공합니다.
- –TableSortLabel로 정렬 가능한 열 헤더를 만들면 aria-sort가 자동 설정됩니다.
- –component="th" scope="row"로 행 헤더를 명시적으로 설정하세요.