0Pricing
Web Accessibility Academy · 강의

th, scope, caption 요소

표에 제목과 올바른 헤더 셀을 지정합니다.

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

데이터 표는 의미를 전달합니다

실제 데이터 표는 행과 열 사이의 관계를 보여 줍니다. 표를 올바르게 표시하면 스크린 리더가 각 값이 어떤 머리글에 속하는지 알릴 수 있습니다.

단순한 표는 혼란을 줍니다

모든 셀이 그저 td라면 스크린 리더는 맥락 없이 숫자만 읽습니다. 사용자는 값을 듣지만 그 값이 무엇을 의미하는지는 알 수 없습니다.

<table>
  <tr><td>Name</td><td>Score</td></tr>
  <tr><td>Ada</td><td>92</td></tr>
</table>

머리글 셀에는 th 사용하기

머리글 셀을 td에서 th로 바꾸세요. 이제 브라우저는 이 셀들이 데이터를 담는 것이 아니라 데이터에 이름을 붙이는 셀임을 알고 머리글로 노출합니다.

<tr><th>Name</th><th>Score</th></tr>

th가 모든 것을 바꾸는 이유

th 요소는 머리글로 알려지며, 설명하는 셀과 연결할 수 있습니다. 이 연결이 외롭게 놓인 숫자에 의미를 부여합니다.

scope 속성

각 th에 scope를 추가하여 어떤 셀을 포함하는지 지정하세요. 값은 열 머리글이면 col, 행 머리글이면 row입니다.

<th scope="col">Score</th>

상단 머리글에는 scope=col

열 맨 위의 머리글에 scope=col을 사용하세요. 사용자가 아래로 이동하면 그 아래의 모든 셀이 해당 머리글을 이름으로 물려받습니다.

<th scope="col">City</th>

측면 머리글에는 scope=row

행의 이름을 지정하는 첫 번째 셀에는 scope=row를 사용하세요. 예를 들어 왼쪽 가장자리를 따라 사람이나 날짜를 표시할 때 사용합니다.

<th scope="row">Ada</th>

caption이 표 이름을 지정합니다

caption 요소는 표 전체에 제목을 부여합니다. 스크린 리더 사용자는 이를 먼저 들으므로 곧 탐색할 표가 무엇인지 알 수 있습니다.

<table>
  <caption>Quiz scores by student</caption>
</table>

caption은 가장 먼저 와야 합니다

여는 태그 바로 다음에 caption을 표 안의 첫 번째 자식으로 배치하세요. 다른 위치에 두면 유효하지 않으며 무시될 수 있습니다.

caption이 머리글보다 낫습니다

가까이에 있는 h2만으로는 충분하지 않습니다. caption은 프로그래밍 방식으로 표에 연결되므로, 표에서 표로 이동할 때도 사용자가 제목을 찾을 수 있습니다.

완전한 단순 표

caption, scope가 지정된 th 머리글 행, 그리고 데이터 행을 사용하세요. 이 기초만으로도 대부분의 단순한 표를 ARIA 없이 완전히 접근 가능하게 만들 수 있습니다.

<table>
  <caption>Scores</caption>
  <tr><th scope="col">Name</th><th scope="col">Score</th></tr>
  <tr><th scope="row">Ada</th><td>92</td></tr>
</table>

빠른 확인

표 맨 위의 열 머리글에 이름을 붙이고 있습니다.

복습: 세 가지 구성 요소

접근 가능한 표의 세 가지 요소를 배웠습니다. 머리글에는 th, 머리글의 범위 지정에는 scope, 표의 이름 지정에는 caption을 사용합니다. 대부분의 작업이 끝난 셈입니다.

자주 묻는 질문

“th, scope, caption 요소” 강의는 무료인가요?

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

“th, scope, caption 요소”에서 뭘 배우나요?

표에 제목과 올바른 헤더 셀을 지정합니다. 브라우저에서 직접 실행하는 실습 코드로 Web Accessibility Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“th, scope, caption 요소” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

  1. th, scope, caption 요소
  2. 행 및 열 헤더 제대로 지정하기
  3. 복잡한 표: headers와 id 짝짓기
  4. 레이아웃 표는 함정입니다
← Web Accessibility Academy(으)로 돌아가기