Tornando tabelas acessíveis

Applies to Windows and Windows Phone

A finalidade principal da marca table é representar dados que têm mais de uma dimensão. Além disso, a marca table muitas vezes é usada para layout de página, embora isso não seja mais recomendado.

Para que representam dados multidimensionais, é importante fornecer informações suficientes sobre acessibilidade para ajudar os usuários a entender os dados. As informações de acessibilidade incluem.

  • Um nome acessível fornecido por uma marca caption na tabela.
  • Uma descrição acessível fornecida pelo atributo summary.
  • Opcionalmente, cabeçalhos de tabela que usam marcas th com os atributos scope e headers, conforme descrito mais adiante neste tópico.

O exemplo a seguir mostra uma tabela seguida pelo código HTML que a criou.

RefeiçõesHotéisTransporteSubtotais
San Jose65.02224.0090.00379.02
San Diego80.50250.0080.00410.50
Los Angeles74.00300.00100.00474.00
Totais219,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>

Use os atributos scope e headers para definir melhor a relação entre células e títulos. Use o atributo scope em uma marca th para definir melhor a finalidade do título. Use o atributo headers em marcas td correspondentes em tabelas complexas se vários títulos forem aplicáveis a uma única célula.

RefeiçõesHotéisTransporteSubtotais
San Jose
25 de ago. 199737,74112,0045,00194,74
26 de ago 199727,28112,0045,00184,28
...
Totais219,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>

Observação  A plataforma e o Narrador não expõem o atributo headers, mas alguns leitores de tela de terceiros ou ferramentas de tecnologia adaptativa podem usar essas informações procurando diretamente no DOM (Document Object Model).

Tópicos relacionados

Cumprindo os requisitos de acessibilidade básica

 

 

Mostrar:
© 2014 Microsoft