0Pricing
HTML Academy · 강의

표 접근성: scope, summary, caption

스크린 리더를 지원하도록 캡션과 scope 속성을 추가합니다.

표 접근성: scope, summary, caption은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

표 접근성이 중요한 이유

화면 낭독기 사용자는 데이터 표를 셀 단위로 탐색하므로, 읽는 모든 데이터 셀에 머리글 맥락이 필요합니다.

  • 올바른 마크업이 없으면 화면 낭독기는 열이나 행의 맥락 없이 원시 값만 읽습니다
  • 접근성 있는 표는 모든 사람이 데이터를 이해할 수 있도록 합니다

표 설명 요소

<caption>은 표에 표시되는 제목을 제공합니다:

<table>
  <caption>Q4 2024 Product Sales by Region</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>
<!-- caption is the first child of table -->
<!-- Screen readers announce it when entering the table -->
<!-- Helps all users understand the table's purpose at a glance -->

표 설명 스타일 지정

CSS로 표 설명의 스타일과 위치를 지정합니다:

caption {
  caption-side: bottom;  /* or top (default) */
  font-style: italic;
  font-size: 0.875rem;
  color: #666;
  text-align: left;
  padding: 0.5rem 0;
}

머리글 셀의 적용 범위 속성

scope 속성은 머리글이 어떤 셀에 적용되는지 화면 낭독기에 알려 줍니다:

<thead>
  <tr>
    <th scope="col">Name</th>      <!-- header for a column -->
    <th scope="col">Score</th>
    <th scope="col">Grade</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">Alice</th>    <!-- header for a row -->
    <td>95</td>
    <td>A</td>
  </tr>
</tbody>

적용 범위 값

scope 속성 값:

  • col — 같은 열의 셀에 머리글이 적용됨
  • row — 같은 행의 셀에 머리글이 적용됨
  • colgroup — 열 그룹의 셀에 머리글이 적용됨
  • rowgroup — 행 그룹의 셀에 머리글이 적용됨(tbody/thead)

복잡한 머리글의 적용 범위

여러 열이나 행에 걸친 머리글에는 열 그룹 또는 행 그룹 적용 범위를 사용합니다:

<thead>
  <tr>
    <th rowspan="2" scope="col">Name</th>
    <th colspan="2" scope="colgroup">2024</th>   <!-- colgroup -->
  </tr>
  <tr>
    <th scope="col">Q1</th>
    <th scope="col">Q2</th>
  </tr>
</thead>

데이터 셀의 머리글 연결 속성

매우 복잡한 표에서는 headers를 사용하여 셀과 머리글을 명시적으로 연결합니다:

<thead>
  <tr>
    <th id="hname">Name</th>
    <th id="hq1">Q1</th>
    <th id="hq2">Q2</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th id="ralice" headers="hname">Alice</th>
    <td headers="hq1 ralice">95</td>
    <td headers="hq2 ralice">88</td>
  </tr>
</tbody>

scope와 headers를 사용하는 경우

지침:

  • 한 행으로 구성된 머리글이 있는 단순한 표 → scope="col"과 scope="row"를 사용합니다
  • 복잡하게 병합된 머리글 → ID 참조와 함께 headers 속성을 사용합니다
  • WCAG 1.3.1은 표 머리글이 데이터 셀과 프로그래밍 방식으로 연결되어야 한다고 요구합니다

표에 적용하는 ARIA 레이블

표 설명을 시각적으로 표시하는 것이 적절하지 않을 때는 ARIA 레이블을 사용합니다:

<!-- caption with visually-hidden class -->
<table aria-label="Q4 2024 Product Sales by Region">
  ...
</table>
<!-- Or use aria-labelledby to reference a heading -->
<h2 id="table-title">Sales Data</h2>
<table aria-labelledby="table-title">...</table>

표 접근성 테스트

표의 접근성을 확인하는 방법:

  • 화면 낭독기의 표 패널을 사용합니다(VoiceOver, NVDA)
  • axe DevTools 브라우저 확장 프로그램을 설치합니다
  • 페이지 URL을 대상으로 pa11y CLI를 실행합니다
  • W3C 마크업 검사기는 누락된 표 설명을 찾아냅니다

summary 속성(더 이상 사용되지 않음)

summary 속성은 복잡한 표에서 화면 낭독기용으로 사용되었지만, 현재 HTML5에서는 더 이상 사용되지 않습니다:

<!-- Old HTML 4.01 — do not use: -->
<table summary="This table shows quarterly sales...">

<!-- Modern HTML5 replacement: -->
<table>
  <caption>This table shows quarterly sales...</caption>
</table>
<!-- Or: aria-describedby to a paragraph -->

접근성 있는 표 점검 목록

데이터 표 접근성 점검 목록:

  • 표에 레이블을 지정하려면 <caption>을 사용합니다
  • 모든 머리글 셀에 <th>를 사용합니다
  • 모든 <th> 요소에 scope를 추가합니다
  • 구조를 위해 <thead>, <tbody>, <tfoot>을 사용합니다
  • 복잡한 표에는 id + headers를 사용합니다

빠른 확인

전체 열의 머리글인 th에는 어떤 적용 범위 값을 사용해야 하나요?

복습: 표 접근성

접근성 있는 표의 핵심:

  • <caption> — 화면 낭독기가 읽어 주는 표의 표시 제목
  • scope="col" — 열 머리글
  • scope="row" — 행 머리글
  • scope="colgroup/rowgroup" — 여러 열이나 행에 걸친 머리글
  • id + headers — 여러 수준의 복잡한 머리글에 사용
  • axe, pa11y 또는 VoiceOver로 확인합니다

자주 묻는 질문

“표 접근성: scope, summary, caption” 강의는 무료인가요?

네 — “표 접근성: scope, summary, caption” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“표 접근성: scope, summary, caption”에서 뭘 배우나요?

스크린 리더를 지원하도록 캡션과 scope 속성을 추가합니다. 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

HTML Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“표 접근성: scope, summary, caption” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. table, tr, td 및 th
  2. thead, tbody, tfoot 구조
  3. 셀 병합을 위한 colspan과 rowspan
  4. 표 접근성: scope, summary, caption
← HTML Academy(으)로 돌아가기