테이블 접근성 구현 방법: caption과 scope 차이 및 올바른 사용법

공공기관 고도화 대응 정리

공공기관 프로젝트에서
테이블은 QA에서 가장 많이 걸리는 영역 중 하나다.

특히 자주 지적되는 항목이:

• caption 누락
• scope 잘못 사용
• th/td 구조 오류
• 의미 없는 table 사용

이번 글에서는
실무에서 바로 적용 가능한 기준으로 정리한다.

 

테이블 접근성

 

1. caption은 왜 필요한가?

caption은 단순 제목이 아니다.

스크린리더는
테이블을 읽기 전에 caption을 먼저 읽는다.

즉,

“이 테이블이 무엇을 설명하는지”를 알려주는 장치

다.

 

❌ 잘못된 예

<!-- HTML -->

<table>
  <tr>
    <th>이름</th>
    <th>부서</th>
  </tr>

→ 스크린리더는
“테이블 시작, 2열 10행” 이런 식으로만 읽는다.

 

✅ 올바른 예

<!-- HTML -->

<table>
  <caption>직원 정보 목록</caption>
  <thead>
    <tr>
      <th scope="col">이름</th>
      <th scope="col">부서</th>
    </tr>
  </thead>

 

caption은 화면에 보여도 되고,
숨겨도 된다

 

🔹 화면에 보이지 않게 처리하는 방법

/* CSS */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

<!-- HTML -->

<caption class="sr-only">직원 정보 목록</caption>

 

---

2. scope는 왜 중요한가?

scope는

이 th가 행 기준인지? 열 기준인지?

 

를 명확히 알려주는 속성이다.

 

기본 구조

<!-- HTML -->

<th scope="col">이름</th>
<th scope="col">부서</th>

col → 열 헤더
row → 행 헤더

 

행 헤더가 있는 경우

<!-- HTML -->

<tr>
  <th scope="row">홍길동</th>
  <td>개발팀</td>
</tr>

이렇게 하면
스크린리더는 “홍길동, 개발팀” 관계를 정확히 읽는다.

---

3. 자주 틀리는 구조

❌ th를 쓰지 않고 td만 사용

<!-- HTML -->

<tr>
  <td>이름</td>
  <td>부서</td>
</tr>

이건 단순 표일 뿐,
데이터 테이블이 아니다.

 

❌ thead 없이 구성

thead/tbody 구분이 없으면
구조 인식이 떨어진다.

---

4. 복잡한 테이블은 어떻게 해야 하나?

행과 열이 겹치는 구조(다중 헤더)는
scope만으로 부족할 수 있다.

이때는

• id
• headers

속성을 활용한다.

 

예)

<!-- HTML -->

<th id="col-name">이름</th>
<td headers="col-name">홍길동</td>

하지만 대부분의 관리자 테이블은
scope로 충분하다.

---

5. 실무에서 바로 적용하는 체크리스트

기본 테이블

• caption 존재 여부
• thead/tbody 구분
• th에 scope="col" 명시
• 행 헤더가 있으면 scope="row"
• 정렬 기준 명확

검색/관리자 테이블

• 체크박스 열은 scope="col"
• 번호 열도 col 처리
• 버튼 열은 “처리” 같은 명확한 제목 사용
• 빈 데이터 상태 메시지 제공

---

6. 공공기관 QA에서 자주 나오는 지적

• caption이 “테이블” 같은 의미 없는 문구
• scope 누락
• 표를 div로 구현
• 레이아웃용 table 사용

레이아웃용 table은
반드시 제거해야 한다.

---

7. 실전 템플릿 (복붙용)

<!-- HTML -->

<table class="table">
  <caption class="sr-only">공지사항 목록</caption>
  <thead>
    <tr>
      <th scope="col">번호</th>
      <th scope="col">제목</th>
      <th scope="col">작성자</th>
      <th scope="col">등록일</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>접근성 점검 안내</td>
      <td>관리자</td>
      <td>2026-02-20</td>
    </tr>
  </tbody>
</table>

/* 화면에 보이지 않게 처리 */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

 

 

---

 

정리

테이블 접근성은
“검수 대응용 작업”이 아니다.

처음부터 넣어야 재작업이 없다.

caption은 의미
scope는 관계
구조는 일관성

 

이 세 가지가 핵심이다.