테이블에 접근성 구현

테이블에 접근성 구현

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

table 태그의 주 목적은 둘 이상의 차원을 가진 데이터를 나타내는 것입니다. 또한 권장되지는 않지만 페이지 레이아웃에도 table 태그가 종종 사용됩니다.

다차원 데이터를 나타내는 테이블의 경우 충분한 접근성 정보를 제공하여 사용자가 데이터를 이해하는 데 도움을 주어야 합니다. 접근성 정보에는 다음 내용이 포함되어 있습니다.

  • 테이블의 caption 태그에 제공된 접근성 있는 이름
  • summary 특성에 제공된 접근성 있는 설명
  • 이 항목의 뒷부분에서 설명하는 scopeheaders 특성을 th 태그에 사용하는 테이블 헤더(옵션)

다음 예제에서는 테이블 및 이 테이블을 만든 HTML 코드를 보여 줍니다.

식사호텔교통부분합
산호세65.02224.0090.00379.02
샌디에이고80.50250.0080.00410.50
로스앤젤레스74.00300.00100.00474.00
합계219.52774.00270.001,263.52

 


<p id="tableDesc">This table describes the travel expenses broken by ...</p>
<table border="1" aria-describedby="tableDesc">
   <caption>Travel Expense Report</caption>
   <thead>
     <tr>
       <th></th>
       <th>Meals</th>
       <th>Hotels</th>
       <th>Transport</th>
       <th>Subtotals</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <th>San Jose</th>
       <td>65.02</td>
       <td>224.00</td>
       <td>90.00</td>
       <td>379.02</td>
     </tr>
     ...
   </tbody>
</table>

셀과 헤더 간 관계를 더 잘 정의하려면 scopeheaders 특성을 사용합니다. 헤더의 용도를 더 잘 정의하려면 th 태그에 scope 특성을 사용합니다. 하나의 셀에 여러 헤더가 적용되는 경우 복합 테이블의 해당 td 태그에 headers 특성을 사용합니다.

식사호텔교통부분합
산호세
1997-08-2537.74112.0045.00194.74
1997-08-2627.28112.0045.00184.28
...
합계219.52774.00270.001,263.52

 


<table border="1">
   <caption>Travel Expense Report</caption>
   <thead>
      <tr>
         <th></th>
         <th id="c2">Meals</th>
         <th id="c3">Hotels</th>
         <th id="c4">Transport</th>
         <th id="c5">Subtotals</td>
      </tr>
   </thead>
   <tbody>
	...
      <tr><td id="r2" colspan="5">San Jose</td></tr>
      <tr>
         <td id="r3" >25-Aug-97</td>
         <td headers="c2 r2 r3">37.74</td>
         <td headers="c3 r2 r3">112.00</td>
         <td headers="c4 r2 r3">45.00</td>
         <td headers="c5 r2 r3">1,263.52</td>
      </tr>
	...
   </tbody>
</table>

참고  플랫폼 및 내레이터는 headers 특성을 표시하지 않지만 일부 타사 화면 읽기 프로그램이나 보조 기술 도구의 경우 DOM(문서 개체 모델)을 직접 조사하여 이 정보를 사용할 수 있습니다.
 

관련 항목

기본 접근성 요구 사항 충족

 

 

표시:
© 2017 Microsoft