[번역] 웹접근성 튜토리얼 - 5. 테이블(표)

데이터 표는 그리드에서 논리적 관계로 데이터를 구성하는 데 사용됩니다. 접근 가능한 표에는 헤더 셀과 데이터 셀을 나타내고 그 관계를 정의하는 HTML 마크업이 필요합니다. 보조 기술은 이 정보를 사용하여 사용자에게 컨텍스트를 제공합니다.

표에 액세스할 수 있도록 하려면 헤더 셀은 <th>로, 데이터 셀은 <td>로 마크업해야 합니다.
보다 복잡한 테이블의 경우 scope, id 및 headers 속성을 사용하여 명시적인 연결이 필요할 수 있습니다.

이 자습서에서는 표에 적절한 구조적 마크업을 적용하는 방법을 보여줍니다. 여기에는 다음 페이지가 포함됩니다.

행 또는 열에 대해 하나의 헤더가 있는 표
구분하기 쉬운 콘텐츠가 있는 표의 경우 헤더 셀은 <th>로, 데이터 셀은 <td> 요소로 표시합니다.

 

헤더가두 개인 표에는 행 헤더와 열 헤더를 사용합니다.
헤더 방향이 불분명한 테이블의 경우 scope 속성을 열 또는 행으로 설정하여 각 헤더의 방향을 정의합니다.

 

불규칙한 헤더가 있는 테이블에는 여러 열 또는 행에 걸쳐 있는 헤더 셀이 있습니다. 
이러한 테이블의 경우 열 및 행 그룹을 정의하고 scope 속성의 colgroup 및 rowgroup 값을 사용하여 헤더 셀의 범위를 설정합니다.

 

다단계 헤더가 있는 테이블에는 데이터 셀당 여러 헤더 셀이 연결되어 있습니다.
너무 복잡하여 헤더 셀을 엄격하게 가로 또는 세로로 연결할 수 없는 테이블의 경우 ID 및 headers 속성을 사용하여 헤더와 데이터 셀을 명시적으로 연결합니다.

 

캡션 및 요약
캡션은 표의 전체 주제를 식별하며 대부분의 상황에서 유용합니다. 요약은 복잡한 표에서 방향 또는 탐색 힌트를 제공합니다.

 

PDF와 같은 HTML 이외의 일부 문서 형식은 표 구조 마크업과 유사한 메커니즘을 제공합니다. 워드 프로세싱 애플리케이션도 표를 마크업하는 메커니즘을 제공할 수 있습니다. 한 형식에서 다른 형식으로 변환할 때 표 마크업이 손실되는 경우가 많지만 일부 프로그램에서는 표 마크업 변환을 지원하는 기능을 제공할 수 있습니다.

많은 웹 작성 도구와 콘텐츠 관리 시스템(CMS)은 코드를 수동으로 편집하지 않고도 표를 작성하는 동안 헤더 셀을 정의하는 기능을 제공합니다.

참고
이 자습서에서는 그리드에 데이터를 표시하는 데 사용되는 표를 만드는 방법에 대한 지침을 제공합니다.
이 자습서는 레이아웃에 사용되는 테이블에는 적용되지 않습니다. 일반적으로 표는 레이아웃 용도로 사용되지 않습니다. 대신 시각적 프레젠테이션을 위해 CSS(Cascading Style Sheet)를 사용하는 것이 가장 좋습니다.

 

 

 

이것이 왜 중요할까요?

헤더와 데이터 셀을 구분하여적절하게 연결되도록 구조적 마크업이 반영되지 않은 표는 접근성 장벽을 만듭니다. 시각적 단서에만 의존하는 것만으로는 접근성 높은 표를 만들 수 없습니다. 구조적 마크업을 사용하면 헤더와 데이터 셀을 소프트웨어에서 프로그래밍 방식으로 결정할 수 있습니다.

• 스크린 리더 사용자는 표를 탐색할 때 행과 열 헤더를 소리내어 읽을 수 있습니다. 스크린 리더는 한 번에 한 셀씩 말하고 관련 헤더 셀을 참조하므로 사용자가 문맥을 잃지 않습니다.
  
  
• 사용자 지정 스타일시트를 사용하여 헤더 셀을 더 눈에 잘 띄게 표시하는 등 데이터를 렌더링하는 다른 방법을 사용하는 사람들도 있습니다. 이러한 기법을 사용하면 텍스트 크기와 색상을 변경하고 정보를 그리드가 아닌 목록으로 표시할 수 있습니다. 대체 렌더링을 허용하려면 테이블 코드가 적절하게 구조화되어 있어야 합니다.

 

---

 

하나의 헤더가 있는 표

이 페이지에서는 행에 하나의 헤더 혹은 열에 하나의 헤더가 있는 표를 다룹니다. 이러한 테이블의 데이터는 그 자체로 설명적이며 모호하지 않습니다.

테이블 콘텐츠가 모호하거나 열의 헤더와 행의 헤더가 모두 있는 경우 혼동을 피하기 위해 범위 속성을 사용해야 합니다. 이러한 표에 대한 자세한 지침은 헤더가 두 개인 표를 참조하세요.

 

예 1 ) 최상단 행에만 헤더 셀이 있는 표

다음 콘서트 표에는 첫 번째 행의 셀이 <th> 요소를 사용하여 마크업되어 있습니다. 이 표는 매우 작은 표이고 데이터 자체가 각 열에서 뚜렷하게 다르기 때문에 헤더와 데이터 셀 간의 관계가 분명하기 때문에 허용됩니다.

참고
일부 스크린 리더에서는 <th> 요소의 방향이 모호하기 때문에 "장소" 셀에서 "날짜-이벤트-장소"로 읽힙니다.

<table>
  <tr>
    <th>날짜</th>
    <th>이벤트</th>
    <th>장소</th>
  </tr>
  <tr>
    <td>12 February</td>
    <td>Waltz with Strauss</td>
    <td>Main Hall</td>
  </tr>
  […]
</table>

 

 

예 2 ) 첫 번째 열에만 헤더 셀이 있는 표

다음 표에서는 이전 예제의 데이터가 왼쪽에 헤더 열이 있는 상태로 배치되어 있습니다. 이 상황에서도 작고 간단한 테이블이기 때문에 이 코드만 사용할 수 있습니다. 이 튜토리얼의 다음 페이지에서는 더 복잡한 테이블을 코딩하는 방법을 설명합니다.

<table>
  <tr>
    <th>날짜</th>
    <td>12 February</td>
    <td>24 March</td>
    <td>14 April</td>
  </tr>
  <tr>
    <th>이벤트</th>
    <td>Waltz with Strauss</td>
    <td>The Obelisks</td>
    <td>The What</td>
  </tr>
  <tr>
    <th>장소</th>
    <td>Main Hall</td>
    <td>West Wing</td>
    <td>Main Hall</td>
  </tr>
</table>

 

 

예 3 ) 모호한 데이터가 있는 표

이 예제에서는 데이터(이름, 성, 도시)가 각각 어떤 헤더에 해당하는지 알지 못하면 서로 구분할 수 없습니다. 값이 col인 scope 속성은 헤더 셀의 방향을 정의하고 해당 데이터 셀과 연결합니다. scope 속성은 헤더 행 또는 열이 하나인 큰 테이블에도 필요합니다.

<table>
  <caption>테디 베어 수집가:</caption>
  <tr>
    <th scope="col">성</th>
    <th scope="col">이름</th>
    <th scope="col">도시</th>
  </tr>
  <tr>
    <td>Phoenix</td>
    <td>Imari</td>
    <td>Henry</td>
  </tr>
  <tr>
    <td>Zeki</td>
    <td>Rome</td>
    <td>Min</td>
  </tr>
  <tr>
    <td>Apirka</td>
    <td>Kelly</td>
    <td>Brynn</td>
  </tr>
</table>

 

 

---

 

 

두 개의 헤더가 있는 표

이 페이지에서는 행 헤더와열 헤더가 있는 표를 다룹니다.
이러한 테이블에서는 헤더와 데이터 셀 간의 관계가 금방 모호해집니다. 이러한 테이블의 경우 <th> 요소를 사용하여 헤더 셀을 식별하고 scope속성을 사용하여 각 헤더의 방향을 선언합니다. scope 속성을 row 또는 col로 설정하여 헤더가 각각 전체 행 또는 열에 적용됨을 나타낼 수 있습니다.

또한 <caption> 요소를 사용하여 문서에서 표를 식별할 수 있습니다. 이 요소는 표에서 표로 이동할 수 있는 '표 모드'로 웹 페이지를 탐색하는 스크린 리더 사용자에게 특히 유용합니다. <caption> 요소 사용에 대한 자세한 배경 및 지침은 캡션 및 요약 항목에서 확인할 수 있습니다.

 

예 1 ) 맨 윗줄과 첫 번째 열에 헤더 셀이 있는 표

다음 개장 시간 표에는 맨 위 행과 첫 번째 열에 헤더 정보가 있습니다. 모든 헤더 셀은 scope 속성이 추가된 <th> 셀로 마크업됩니다.

헤더 행에서 scope의 col 값은 각 헤더 셀을 열의 데이터 셀과 연결합니다. 헤더 열에서 행 값은 개별 헤더를 해당 행과 연결합니다. 이 정보가 없으면 일부 사용자는 헤더와 데이터 셀 간의 관계를 쉽게 이해하지 못할 수 있습니다. 아래 예에서 'Open' 및 'Closed' 레이블은 특정 요일과 시간에 할당할 수 있는 경우에만 유용합니다.

<table>
  <tr>
    <td></td>
    <th scope="col">월요일</th>
    <th scope="col">화요일</th>
    <th scope="col">수요일</th>
    <th scope="col">목요일</th>
    <th scope="col">금요일</th>
  </tr>
  <tr>
    <th scope="row">09:00 – 11:00</th>
    <td>Closed</td>
    <td>Open</td>
    <td>Open</td>
    <td>Closed</td>
    <td>Closed</td>
  </tr>
  <tr>
    <th scope="row">11:00 – 13:00</th>
    <td>Open</td>
    <td>Open</td>
    <td>Closed</td>
    <td>Closed</td>
    <td>Closed</td>
  </tr>
  <tr>
    <th scope="row">13:00 – 15:00</th>
    <td>Open</td>
    <td>Open</td>
    <td>Open</td>
    <td>Closed</td>
    <td>Closed</td>
  </tr>
  <tr>
    <th scope="row">15:00 – 17:00</th>
    <td>Closed</td>
    <td>Closed</td>
    <td>Closed</td>
    <td>Open</td>
    <td>Open</td>
  </tr>
</table>

 

 

예 2 ) 헤더 셀의 오프셋 열이 있는 표

이 표에서는 행 헤더 셀이 첫 번째 열이 아닌 두 번째 열에 있습니다. 접근 방식은 위의 예와 유사합니다: 맨 위 행에 있는 헤더 셀의 scope는 col로 설정됩니다. scope의 row 값을 사용하면 두 번째 열의 헤더 셀이 개별 헤더 셀의 왼쪽과 오른쪽에 있는 데이터 셀에 할당됩니다.

<table>
  <caption>
    지난 6개월 동안 사용한 휴일
  </caption >
  <thead>
    <tr>
      <th scope="col"><abbr title="Identification Number">ID</abbr></th>
      <th scope="col">이름</th>
      <th scope="col">7월</th>
      <th scope="col">8월</th>
      <th scope="col">9월</th>
      <th scope="col">10월</th>
      <th scope="col">11월</th>
      <th scope="col">12월</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>215</td>
      <th scope="row">Abel</th>
      <td>5</td>
      <td>2</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>3</td>
    </tr>

    <tr>
      <td>231</td>
      <th scope="row">Annette </th>
      <td>0</td>
      <td>5</td>
      <td>3</td>
      <td>0</td>
      <td>0</td>
      <td>6</td>
    </tr>

    <tr>
      <td>173</td>
      <th scope="row">Bernard</th>
      <td>2</td>
      <td>0</td>
      <td>0</td>
      <td>5</td>
      <td>0</td>
      <td>0</td>
    </tr>

    <tr>
      <td>141</td>
      <th scope="row">Gerald</th>
      <td>0</td>
      <td>10</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>8</td>
    </tr>

    <tr>
      <td>99</td>
      <th scope="row">Michael</th>
      <td>8</td>
      <td>8</td>
      <td>8</td>
      <td>8</td>
      <td>0</td>
      <td>4</td>
    </tr>
  </tbody>
</table>

 

 

---

 

 

불규칙한 헤더가 있는 표

이 페이지에서는 여러 열 또는 행에 걸쳐 있는 헤더 셀이 있는 표에 대해 설명합니다. 여러 요소와 속성을 사용하여 헤더 및 데이터 셀의 구조와 관계를 정의할 수 있습니다.

예를 들어, 세 개의 열에 걸쳐 있는 헤더 셀은 열 그룹의 해당 데이터 셀과 연결되어야 합니다. 헤더 셀의 scope 속성을 colgroup 값으로 설정하면 이 작업을 수행할 수 있습니다. 여러 행에 걸쳐 있는 헤더 셀에도 동일한 원칙이 적용됩니다. 이 경우 scope 속성에 rowgroup 값을 사용하여 연결합니다.

그러나 이러한 연결을 만들기 전에 테이블 마크업에서 이러한 열 및 행 그룹의 구조를 정의해야 합니다:

• 열 그룹은 <colgroup> 요소를 사용하여 정의합니다.
• 행 그룹은 <thead>, <tfoot> 및 <tbody> 요소로 정의됩니다.
  • <thead> 및 <tfoot> 요소는 테이블에서 한 번만 사용할 수 있습니다.
  • 테이블에는 각각 행 그룹을 정의하는 <tbody> 요소가 얼마든지 포함될 수 있습니다.

 

 

예 1 ) 두 단계에 걸쳐헤더가 있는 표

아래 표에는 두 쌍의 열 헤더가 있습니다. 각 열 헤더 쌍인 "생산됨" 및 "판매됨"은 해당 쌍을 식별하는 첫 번째 단계 헤더와 연결됩니다: "Mars" 및 "Venus"입니다. 이러한 첫 번째 단계 헤더는 값이 2인 colspan 속성을 사용하여 두 열에 걸쳐 있도록 만들어집니다.

첫 번째 단계 헤더를 두 열의 모든 셀과 올바르게 연결하려면 테이블의 시작 부분에 열 구조를 정의해야 합니다. <col> 요소는 왼쪽부터 시작하여 각 열을 식별합니다. 헤더가 두 개 이상의 열에 걸쳐 있는 경우 해당 수의 <col> 요소 대신 <colgroup> 요소를 사용하면 span 속성에 걸쳐 있는 열의 수가 표시됩니다.

또한 첫 번째 단계 헤더의 scope 속성 값은 전체 열 그룹과 연결되도록 colgroup으로 설정됩니다. 두 번째 단계 헤더는 해당 열에만 적용되므로 scope 속성은 이전 예제에서와 같이 col로 설정됩니다.

<table>
  <col>
  <colgroup span="2"></colgroup>
  <colgroup span="2"></colgroup>
  <tr>
    <td rowspan="2"></td>
    <th colspan="2" scope="colgroup">Mars</th>
    <th colspan="2" scope="colgroup">Venus</th>
  </tr>
  <tr>
    <th scope="col">생산됨</th>
    <th scope="col">판매됨</th>
    <th scope="col">생산됨</th>
    <th scope="col">판매됨</th>
  </tr>
  <tr>
    <th scope="row">Teddy Bears</th>
    <td>50,000</td>
    <td>30,000</td>
    <td>100,000</td>
    <td>80,000</td>
  </tr>
  <tr>
    <th scope="row">Board Games</th>
    <td>10,000</td>
    <td>5,000</td>
    <td>12,000</td>
    <td>9,000</td>
  </tr>
</table>

참고
<colgroup> 요소에는 그룹의 개별 열을 식별하는 <col> 요소가 포함될 수 있습니다. <colgroup> 요소에 포함되지 않은 <col> 요소와 <colgroup> 요소의 span 속성으로 표시된 열 요소의 합은 테이블의 총 열 수와 같아야 합니다.

 

 

예 2 ) 여러 행 또는 열에 걸쳐 있는헤더가 있는 표

아래 예제에서 테이블은 두 개의 개별 열과 세 개의 열에 걸쳐 있는 하나의 열 그룹으로 구성됩니다. 행은 6개입니다. 여러 행에 걸쳐 있는 두 개의 헤더. 여러 행에 걸쳐 있는 헤더 셀이 해당 행의 모든 셀과 올바르게 연결되도록 하려면 행을 그룹화해야 합니다. 행 그룹을 정의하려면 해당 행을 <tbody> 요소로 래핑합니다. 또한 행에 걸쳐 있는 헤더 셀의 scope 속성을 rowgroup으로 설정해야 합니다.

헤더가 여러 헤더 행에 걸쳐 있는 경우 <tbody> 요소 대신 <thead> 요소로 행을 래핑합니다. 헤더가 표의 푸터 영역에서 여러 행에 걸쳐 있는 경우 <tfoot> 요소를 사용합니다.

표가 복잡하기 때문에 표의 레이아웃을 자세히 설명하기 위해 요약 기법을 사용할 수 있습니다.

<table>
  <caption>
    Poster availability
  </caption>
  <tr>
    <th scope="col">Poster name</th>
    <th scope="col">Color</th>
    <th colspan="3" scope="colgroup">Sizes available</th>
    </tr>
  <tr>
    <th rowspan="3" scope="rowgroup">Zodiac</th>
    <td>Full color</td>
    <td>A2</td>
    <td>A3</td>
    <td>A4</td>
  </tr>
  <tr>
    <td>Black and white</td>
    <td>A1</td>
    <td>A2</td>
    <td>A3</td>
  </tr>
  <tr>
    <td>Sepia</td>
    <td>A3</td>
    <td>A4</td>
    <td>A5</td>
  </tr>
  <tr>
    <th rowspan="2" scope="rowgroup">Angels</th>
    <td>Black and white</td>
    <td>A1</td>
    <td>A3</td>
    <td>A4</td>
  </tr>
  <tr>
    <td>Sepia</td>
    <td>A2</td>
    <td>A3</td>
    <td>A5</td>
  </tr>
</table>

참고
열을 가로지르는헤더가 없더라도 모든 표에 <thead>, <tbody> 및 <tfoot>를 사용하면 언제 사용해야 하는지 혼동을 피할 수 있습니다.

 

 

---

 

 

다단계 헤더가 있는 표

이 페이지에서는 데이터 셀마다 다단계 헤더 셀이 연결된 테이블을 다룹니다. 이러한 테이블은 너무 복잡하여 헤더와 데이터 셀 간의 엄격한 수평 또는 수직 연결을 식별하기 어렵습니다. 이러한 테이블에서 각 테이블 헤더는 (문서 전체에 걸친) 고유 id로 표시됩니다. 데이터 셀은 headers 속성에 공백으로 구분된 하나 이상의 id를 나열하여 해당 id를 참조합니다.

이러한 방식으로 마크업해야 하는 테이블에는 다음이 포함됩니다.

• 테이블 중간에 반복되거나 변경되는 열 헤더가 있는 테이블
• 각 데이터 셀에 연결된 헤더 셀이 3개 이상인 테이블

여러 헤더가 있는 표에는 표를 식별하는 캡션과 표의 레이아웃을 설명하는 요약이 필요할 수도 있습니다. (캡션 및 요약 참조).

많은 경우, 예 3)에 표시된 것처럼 정보를 더 작고 관리하기 쉬운 테이블로 분할하여 모든 독자가 덜 복잡하게 만들 수 있도록 이러한 테이블의 정보를 재구성하는 것을 고려할 가치가 있습니다.

 

 

예 1 ) 각 열에 여러 열 헤더가 있는 표

아래 표에서 표의 상단 절반에 대한 헤더는 하단 절반의 헤더와 다릅니다. 테이블 중간에 헤더가 변경되어 열의 헤더가 모호해집니다. 각 데이터 셀이 올바른 헤더에 연결되도록 하기 위해 각 <th> 요소에는 고유 id가 있고 각 <td> 셀에는 연결된 헤더 셀의 id 값을 나열하는 headers 속성이 있습니다.

다음 코드 스니펫에서는 헤더 셀 자체의 헤더가빈 셀로 설정되어 있습니다(ID가 "blank"인 경우). 이렇게 하면 일부 보조 기술이 해당 헤더 셀의 헤더를 읽지 못합니다.

 

<th> 셀에 id 속성 할당하기

[…]
<td id="blank">&nbsp;</td>
<th id="co1" headers="blank">Example 1 Ltd</th>
<th id="co2" headers="blank">Example 2 Co</th>
[…]
<th id="c1" headers="blank">Contact</th>
[…]

 

<td> 셀에 headers 속성 할당하기

[…]
<td headers="co1 c1">James Phillips</td>
<td headers="co2 c1">Marie Beauchamp</td>
[…]

 

 

 

예 2 ) 각 데이터 셀과 관련된 3개의 헤더가 있는 표

이 예에서 테이블 헤더는 테이블의 다음 섹션에 대한 내용을 설명하는 부제목으로 사용됩니다. 이러한 헤더가 없으면 정보가 불분명할 수 있습니다. headers 속성을 사용하면 세 개의 헤더를 모두 데이터 셀에 적절하게 연결할 수 있습니다.

 

<th> 셀에 id 속성 할당하기

[…]
  <th id="par" colspan="5" scope="colgroup">Paris</th>
</tr>
<tr>
  <th id="pbed1">1 bedroom</th>
[…]

 

<td> 셀에 headers 속성 할당하기

[…]
<td headers="par pbed1 stud">11</td>
<td headers="par pbed1 apt"> 20</td>
[…]

 

 

 

예 3 ) 다단계 테이블 분할

아래 두 테이블은 위 예제의 다단계 테이블과 동일한 정보를 제공합니다. 이렇게 하면 누구나 정보를 더 쉽게 이해하고 코딩하기 쉬워집니다. 또한 간단한 표는 WYSIWYG("What you see is what you get”) 편집기를 비롯한 웹 콘텐츠 작성 도구에서 훨씬 더 잘 지원됩니다.

 

 

---

 

 

캡션 & 요약

캡션과 요약은 사용자가 표를 찾고, 탐색하고, 이해하는 데 도움이 되는 정보를 제공합니다. 모든 경우에 캡션과 요약이 WCAG를 준수해야 하는 것은 아니지만, 캡션과 요약은 종종 필요한 정보를 제공하는 매우 간단한 방법입니다.

 

• 캡션은 표의 제목과 같은 기능을 합니다.
  대부분의 스크린 리더는 캡션의 내용을 알려줍니다. 캡션은 사용자가 표를 찾고 표의 내용을 이해하여 읽을지 여부를 결정하는 데 도움이 됩니다. 사용자가 '표 모드'를 사용하는 경우 캡션은 표를 식별하는 기본 메커니즘입니다. 캡션은 <caption> 요소로 제공됩니다.
  
  
• 요약은 표의 데이터 구성에 대한 정보를 전달하고 사용자가 표를 탐색하는 데 도움이 됩니다.
  예를 들어 아래 예시에서와 같이 테이블의 구조가 비정상적인 경우 어떤 행 또는 열에서 어떤 콘텐츠를 찾을 수 있는지에 대한 정보를 사용자에게 제공할 수 있습니다. 요약은 일반적으로 복잡한 테이블에만 필요합니다.

 

하나의 표에 캡션과 요약이 모두 제공되는 경우 요약은 캡션에 있는 정보와 중복되지 않아야 합니다.

캡션에 대한 자세한 내용은 캡션 요소를 사용하여 데이터 테이블 캡션과 데이터 테이블 연결하기를 참조하세요.

 

 

예 1 ) 캡션을 사용하여 테이블 식별

캡션은 테이블 콘텐츠에 대한 짧은 제목이어야 합니다. 이 예에서 "콘서트"는 사용자에게 테이블에 어떤 정보가 있는지 알려줍니다(예: 테이블에 미술 전시회 정보도 포함될 수 있음).

<caption> 요소는 <table> 요소의 하위 요소로 직접 배치됩니다.

<table>
  <caption>Concerts</caption>
  <tr>
    <th>Date</th>
    <th>Event</th>
    <th>Venue</th>
  </tr>
  <tr>
    <td>12 Feb</td>
    <td>Waltz with Strauss</td>
    <td>Main Hall</td>
  </tr>
  […]
</table>

 

 

예 2 ) 더 복잡한 표에 대한 요약

아래 예에서는 사용자에게 요약을 제공하기 위해 다양한 기법이 사용됩니다.

 

접근 1.  <caption> 요소 안에 요약 중첩하기

이 복잡한 표는 두 개의 별도 위치에서 다양한 유형과 크기의 숙박시설의 이용 가능 여부를 보여줍니다. <caption> 요소는 표의 제목 역할을 하며 표의 구성을 설명하는 요약도 함께 제공합니다.

이 방식으로 구현하면 시각적 사용자도 요약을 볼 수 있습니다.

<caption>Availability of holiday accommodation <br>
  <span>Column one has the location and size of accommodation, other columns show the type and number of properties available</span>
</caption>

참고
요약의 스타일을 캡션과 다르게 지정하기 위해 스팬 요소가 추가되었습니다. 이 요소는 필수는 아닙니다.

 

 

접근 2. aria-describedby를 사용하여 테이블 요약 제공

이 접근 방식에서는 id 속성이 있는 요소가 테이블의 aria-describedby 속성을 사용하여 요약과 연결됩니다. 고유한 id 속성이 있는 모든 요소는 이러한 방식으로 테이블의 요약으로 사용할 수 있습니다.

요약이 포함된 요소가 문서의 표 앞에 있을 필요는 없지만, 특히 스크린 리더를 사용하지 않는 경우 표 근처에 요약이 있으면 사용자가 요약을 더 빨리 발견하는 데 도움이 됩니다.

참고
이 WAI-ARIA 기능은 이 페이지의 다른 요약 방식에 비해 보조 기술에서 광범위하게 지원되지 않을 수 있습니다.

<p id="tblDesc">Column one has the location and size of accommodation, other columns show the type and number of properties available.</p>
<table aria-describedby="tblDesc">
[…]

 

 

접근 3. <figure> 요소를 사용하여 표 요약 마크업하기

이 접근 방식에서는 표를 <figure> 요소로 감싸는 방식입니다. <figcaption> 요소에는 캡션과 요약 텍스트가 포함됩니다.

"표 모드"로 탐색하는 스크린 리더 사용자는 일반적으로 이렇게 적용된 캡션으로는 표를 식별할 수 없습니다. <figcaption> 요소의 캡션 부분은 aria-labelledby 속성을 사용하여 표에 명시적으로 연결할 수 있으며, 요약 부분은 aria-describedby 속성을 사용하여 표에 명시적으로 연결할 수 있습니다. 이렇게 하면 캡션과 요약이 여러 번 읽힐 수 있습니다.

참고
이 HTML5 기능은 이 페이지의 요약에 대한 다른 접근 방식보다 보조 기술에서 널리 지원되지 않을 수 있습니다.

WAI-ARIA 미사용

<figure>
  <figcaption>
    <strong>Paris: Availability of holiday accommodation</strong><br>
    <span>Column one has the location and size of accommodation, other columns show the type and number of properties available.</span>
  </figcaption>
  <table>
[…]
  </table>
</figure>

 

WAI-ARIA 사용

<figure>
  <figcaption>
    <strong id="paris-caption">Paris: Availability of holiday accommodation</strong><br>
    <span id="paris-summary">Column one has the location and size of accommodation, other columns show the type and number of properties available.</span>
  </figcaption>
  <table aria-labelledby="paris-caption" aria-describedby="paris-summary">
[…]
  </table>
</figure>

 

 

---

 

 

테이블 사용 팁

 

단순하게 유지하세요.

복잡한 표는 콘텐츠 제작자에게는 더 많은 작업을 요구하고 사용자에게는 해석하기 어렵습니다. 일반적으로 복잡한 표는 하나의 하위 주제에 대한 데이터를 포함하는 간단한 개별 표로 나누는 것이 좋습니다.

테이블 분리

여러 표가 서로 이어지는 경우 하나의 표를 사용하지 말고 <th> 셀 행을 추가로 넣습니다. 스크린 리더는 한 열의 모든 <th> 셀을 소리내어 읽을 수 있으므로 혼동을 일으킬 수 있습니다. 주제가 변경되면 새 <th>를 시작하세요.

데이터 분리

각 개별 데이터에 해당 셀이 있는지 확인합니다. 헤더는 한 열에, 모든 데이터는 두 번째 열에 사용하면 스크린 리더가 열 간 데이터 관계를 파악하는 것이 거의 불가능해지므로 사용하지 마세요.

텍스트 크기를 조정할 때 의사 행의 데이터가 더 이상 올바르게 정렬되지 않을 수 있으므로 줄 바꿈(<br> 요소)을 사용하여 표 행을 만들지 마세요.

정렬

텍스트는 왼쪽에, 숫자 데이터는 오른쪽에 정렬하여(왼쪽에서 오른쪽으로 읽고 쓰는 언어) 텍스트 크기가 크거나 화면이 작은 사용자도 쉽게 찾을 수 있도록 합니다. 이 기능은 셀이 두 개 이상의 열에 걸쳐 있는 경우에 특히 유용합니다. 열 헤더의 정렬을 아래 셀의 데이터와 동일하게 지정하면 도움이 됩니다.

헤더 셀 스타일 지정하기

헤더 셀에는 <th> 요소가 사용되며, 다른 스타일이 적용된 <td> 요소를 사용하면 테이블에 접근하기 어렵거나 접근이 불가능할 경우 테이블에 대한 접근성이 떨어집니다. <th>와 <td> 셀을 시각적으로 구분하는 것도 도움이 됩니다. 예를 들어, 이 튜토리얼 페이지에서 헤더 셀은 짙은 회색 배경을 사용합니다.

셀에 색상 대비를 반영한 표

짝수 행과 홀수 행을 다른 방식으로 스타일링하면 읽기에 어려움이 있거나 텍스트를 확대하는 사용자에게 도움이 될 수 있습니다. 시각적 가이드 역할을 합니다. 마우스 오버 및 키보드 포커스 시 셀(및 행/열)을 강조 표시하여 사용자가 해당 셀의 위치를 쉽게 확인할 수 있도록 지원합니다. 헤더와 데이터 셀 모두에서 텍스트와 배경의 대비 비율이 적절한지 확인하세요. 대비 비율을 확인하는 방법은 다음과 같습니다.

유연성

표의 레이아웃 모델로 인해 작은 화면에서는 표가 작게 보이지 않거나 사용자가 확대하면 너무 넓어지는 경우가 있습니다. 이러한 상황에서는 표가 잘리지 않도록 하는 것이 중요합니다. (예: CSS에서 overflow: hidden 사용) 이 튜토리얼에서는 사용자가 표를 가로로 스크롤할 수 있도록 표를 감싸는 요소에 overflow: scroll을 적용했지만, 이러한 상황에서 표를 표시하는 데는 훨씬 더 많은 옵션이 있습니다.

레이아웃 목적의 표

표는 레이아웃 용도로 사용해서는 안 됩니다. 레이아웃에는 CSS(Cascading Style Sheet)를 사용하십시오. 이미 레이아웃 테이블이 있는 경우 이 튜토리얼에서 설명하는 구조 요소(예: <th> 또는 <caption>) 및 속성을 사용하지 말고 <table> 요소에 role="presentation"을 추가하세요.

 

 

---

묶음 글 목록

[A11Y] - 웹접근성 튜토리얼 - 1. 개요

[A11Y] - 웹접근성 튜토리얼 - 2. 페이지 구조

[A11Y] - 웹접근성 튜토리얼 - 3. 메뉴(네비게이션)

[A11Y] - 웹접근성 튜토리얼 - 4. 이미지

[A11Y] - 웹접근성 튜토리얼 - 5. 테이블

[A11Y] - 웹접근성 튜토리얼 - 6. 폼

[A11Y] - 웹접근성 튜토리얼 - 7. 캐러셀

---

이 글은 W3C의 웹접근성 튜토리얼을 번역한 글입니다.