접근성 테이블(scope, id & headers)

Table의 scope 지정하기

시각 장애인들은 눈으로 브라우저를 볼 수 없으므로, 스크린 리더기라는 프로그램을 통하여 표에 대한 정보를 귀로만 들어야 합니다. 

이런 이유로 table의 각 셀에 대한 해당 영역(scope)을 지정하여 프로그램이 데이타를 읽어 내려가는 순서를 만들 수가 있습니다. 

이것은 웹표준 및 접근성에 커다란 이점을 가져다 줄 수 있습니다.

table의 scope=”col”과  scope=”row”

위 표그림의 경우, 스크린 리더기가 읽는 순서는 “면적195 → 매매가87,500 → 전세가38,500″ 입니다. 

면적, 매매가, 전세가는 thead에 해당하는 라인으로 scolpe=”col(열↓)”로 해당 영역을 다음과 같이 지정할 수 있습니다.

html

<thead>
   <tr>
       <th scope="col">면적(㎡)</th>
       <th scope="col">매매가(만원)</th>
       <th scope="col">전세가(만원)</th>
   </tr>
</thead>

159B와 195는 tbody에 해당하는 라인으로 scolpe=”row(행 →)”로 해당 영역을 다음과 같이 지정할 수 있습니다.

html

<tbody>
   <tr>
       <td scope="row">159B</td>
       <td>75,500</td>
       <td>33,500</td>
   </tr>
   <tr>
       <td scope="row">195</td>
       <td>87,500</td>
       <td>38,500</td>
   </tr>

아래 표그림의 경우, ‘상품종류’는 행이 병합되어 있기때문에 scope=”colgroup”을 사용하여야 합니다.

html

<thead>
   <tr>
       <th rowspan="2" scope="col">구분</th>
       <th colspan="2" scope="colgroup">상품종류</th>
   </tr>
   <tr>
   .......
   .......

스크린 리더기가 읽는 순서는 “구분 → 1월 → 상품종류 스마트폰 5만대 → 상품종류 테블릿PC 3만대”가 될 것입니다.

table data 의 headers 이용하기

See the Pen Headers of Accessibility Table(접근성 테이블) by jaeheekim (@jaehee) on CodePen.

Jaehee's WebClub