데이터 테이블과 구조화 콘텐츠
한국어 해설 KO
Original Text EN
접근 가능한 데이터 테이블(th·scope·caption), 복잡한 표의 처리, 링크 텍스트와 언어 속성을 학습합니다.
Learn accessible data tables (th, scope, caption), handling complex tables, link text, and language attributes.
Objectives
데이터 테이블에 th·scope·caption을 올바르게 적용할 수 있다
복잡한 표의 headers/id 연결 방법을 이해한다
레이아웃 테이블과 데이터 테이블의 차이를 설명할 수 있다
의미 있는 링크 텍스트와 lang 속성의 요구사항을 설명할 수 있다
Learning Objectives
Apply th, scope, and caption correctly to data tables
Understand headers/id association for complex tables
Distinguish layout tables from data tables
Explain requirements for meaningful link text and lang attributes
데이터 테이블의 기본기
Data Table Fundamentals
데이터 테이블은 행과 열의 관계로 의미가 전달되는 콘텐츠입니다. 스크린리더 사용자는 셀을 이동할 때마다 해당 셀의 행·열 헤더를 함께 들어야 '3분기'의 '매출'이라는 맥락을 잃지 않습니다. 그 연결을 만드는 것이 `<th>` 요소와 scope 속성입니다.
A data table is content whose meaning lives in row–column relationships. As screen reader users move between cells, they must hear the row and column headers with each cell to keep the context — that this is 'Q3' of 'Revenue.' The `<th>` element and scope attribute create that association.
기본 마크업: 헤더 셀은 `<td>`가 아닌 `<th>`로, 열 헤더에는 scope="col", 행 헤더에는 scope="row"를 지정합니다. `<caption>`은 표의 제목을 표와 프로그래밍적으로 연결하는 요소로, 스크린리더가 표 진입 시 낭독합니다 — 표 위의 일반 텍스트 제목은 이 연결을 제공하지 못합니다.
Base markup: header cells are `<th>` (not `<td>`), with scope="col" for column headers and scope="row" for row headers. `<caption>` programmatically ties the table's title to the table and is announced on entry — a plain text heading above the table provides no such link.
시각적으로 표처럼 보이게 만든 `<div>` 그리드는 행·열 탐색과 헤더 낭독이 전혀 제공되지 않습니다. CSS display 속성이 테이블 시맨틱을 제거할 수도 있으므로(display:block을 table에 적용 시 일부 브라우저), 스타일 변경 후 접근성 트리 확인이 필요합니다.
A `<div>` grid styled to look like a table offers no row/column navigation and no header announcements. Note that CSS display values can strip table semantics in some browsers (display:block on a table), so check the accessibility tree after styling changes.
복잡한 표 다루기
Handling Complex Tables
헤더가 두 단계 이상이거나 병합 셀이 있는 복잡한 표에서는 scope만으로 관계를 표현하기 어렵습니다. 이때는 각 헤더 셀에 id를 부여하고 데이터 셀에서 headers="id1 id2"로 명시적으로 연결합니다. 다만 유지보수 부담이 크므로, 첫 번째 선택지는 표를 더 단순한 여러 개의 표로 쪼개는 것입니다.
For complex tables — multi-level headers or merged cells — scope alone can't express the relationships. Assign ids to header cells and reference them from data cells with headers="id1 id2". Because maintenance costs are high, the first option should be splitting the table into several simpler ones.
표 설계의 실무 원칙: 병합 셀(colspan/rowspan)을 최소화하고, 빈 헤더 셀을 만들지 않으며, 정렬 가능한 열에는 aria-sort로 현재 정렬 상태를 알립니다. 표가 화면보다 넓다면 표 자체를 감싸는 컨테이너에 overflow 스크롤을 주되, 키보드로도 스크롤 가능해야 합니다(tabindex="0" + 적절한 role/aria-label).
Practical table design: minimize merged cells (colspan/rowspan), never leave empty header cells, and announce sort state on sortable columns with aria-sort. If a table is wider than the viewport, wrap it in a scrollable container that keyboard users can scroll too (tabindex="0" plus an appropriate role/aria-label).
레이아웃 테이블이라는 유산
The Legacy of Layout Tables
과거에는 페이지 배치를 위해 표를 쓰는 레이아웃 테이블이 흔했습니다. 오늘날 배치는 CSS(Flexbox·Grid)로 해야 하며, 표는 데이터에만 사용합니다. 불가피하게 레이아웃 목적의 표가 남아 있다면 role="presentation"으로 테이블 시맨틱을 제거해 스크린리더가 '표 3행 2열' 같은 무의미한 정보를 낭독하지 않게 합니다.
Layout tables — using tables for page arrangement — were once common. Today layout belongs to CSS (Flexbox, Grid) and tables to data only. Where a layout table unavoidably remains, strip its semantics with role="presentation" so screen readers don't announce meaningless 'table, 3 rows 2 columns' information.
구분 기준은 간단합니다: 행·열 헤더가 의미를 갖는가? 갖는다면 데이터 테이블(th·caption 필수), 갖지 않는다면 애초에 표가 아니어야 합니다. 이메일 템플릿처럼 기술 제약으로 표 배치가 불가피한 영역에서만 presentation 처리가 정당화됩니다.
The test is simple: do row and column headers carry meaning? If yes, it's a data table (th and caption required); if no, it shouldn't be a table at all. Only technically constrained contexts like email templates justify presentation-role tables.
링크 텍스트와 언어 속성
Link Text and Language Attributes
링크 텍스트는 링크만 따로 들어도 목적을 알 수 있어야 합니다(WCAG 2.4.4 링크 목적, Level A). 스크린리더 사용자는 링크 목록으로 페이지를 훑는데, '여기를 클릭', '더 보기'가 열 개 나열되면 아무것도 구분할 수 없습니다. 시각적 맥락상 반복이 불가피하면 aria-label이나 sr-only 텍스트로 구체화합니다('더 보기 — 3분기 실적 보고서').
Link text must convey its purpose when heard in isolation (WCAG 2.4.4 Link Purpose, Level A). Screen reader users skim pages via the links list — ten links reading 'click here' or 'read more' are indistinguishable. Where visual context forces repetition, disambiguate with aria-label or sr-only text ('Read more — Q3 earnings report').
언어 속성: 페이지 기본 언어는 `<html lang>`으로 선언하고(WCAG 3.1.1, Level A), 본문 중 다른 언어 구간은 해당 요소에 lang을 지정합니다(3.1.2 부분 언어, Level AA). 스크린리더는 lang에 따라 발음 엔진을 전환하므로, 한국어 페이지의 영어 인용문에 lang="en"이 없으면 영어를 한국어 음운으로 읽는 문제가 생깁니다.
Language attributes: declare the page's default language with `<html lang>` (WCAG 3.1.1, Level A) and mark passages in other languages with lang on the element (3.1.2 Language of Parts, Level AA). Screen readers switch pronunciation engines based on lang — an English quotation without lang="en" on a Korean page gets read with Korean phonetics.