s Guías Prácticas de Código Accesible
Escudo de la República de Colombia

Tablas comprensibles

Identificación de una tabla usando el atributo Caption
Ejemplo:
Partidos
Fecha Partido Torneo
24 Noviembre 2016 Nal(Co) vs CP(Py) Atanasio Girardot
27 Noviembre 2016 Mil(Co) vs Nal(Co) El Campín
30 Noviembre 2016 Nal(Co) vs Mil(Co) Atanasio Girardot
Fragmento de Código: 
<table>
  <caption>Partidos</caption>
  <tr>
    <th>Fecha</th>
    <th>Partido</th>
    <th>Torneo</th>
  </tr>
  <tr>
    <td>24 de Noviembre 2016</td>
    <td>Nal(Co) vs CP(Pa)</td>
    <td>Atanasio Girardot</td>
  </tr>
  […]
</table>

Usando el atributo Caption para tablas complejas.
Ejemplo:
Cantidad de carros vendidos en los ultimos tres años.
La columna uno tiene la localización y el año de las ventas, las otras columnas muestran la marca del carro y el números de carros vendidos.
Mazda BMW Chevrolet Nissan
Manizales
2014 45 15 30 50
2015 40 25 30 55
2016 35 30 40 60
Cali
2014 50 12 35 40
2015 50 25 40 45
2016 55 25 35 60
Fragmento de Código: 
<caption> Cantidad de carros vendidos en los ultimos tres años<br>
  <span>La columna uno tiene la localización y el año de las ventas, las otras columnas muestran la marca del carro y el números de carros vendidos.</span>
</caption>

Usando el atributo aria-descritoby para proporcionar un resumen de la tabla.
Ejemplo:

La columna uno tiene la localización y el año de las ventas, las otras columnas muestran la marca del carro y el números de carros vendidos.

Manizales: Cantidad de carros vendidos en los ultimos tres años
Mazda BMW Chevrolet Nissan
2014 45 15 30 50
2015 40 25 30 55
2016 35 30 40 60
Fragmento de Código: 
<p id="tblDesc">La columna uno tiene la localización y el año de las ventas, las otras columnas muestran la marca del carro y el números de carros vendidos.</p>
<table aria-describedby="tblDesc">
[…]

Utilizar el elemento <figura> para marcar un resumen de tabla
Ejemplo:
Manizales: Cantidad de carros vendidos en los ultimos tres años
La columna uno tiene la localización y el año de las ventas, las otras columnas muestran la marca del carro y el números de carros vendidos.
Mazda BMW Chevrolet Nissan
2014 45 15 30 50
2015 40 25 30 55
2016 35 30 40 60
Fragmento de Código: Sin usar WAI-ARIA
<figure>
  <figcaption>
    <strong>Manizales: Cantidad de carros vendidos en los ultimos tres años</strong><br>
    <span>La columna uno tiene la localización y el año de las ventas, las otras columnas muestran la marca del carro y el números de carros vendidos.</span>
  </figcaption>
  <table>
[…]
  </table>
</figure>
Fragmento de Código: Usando WAI-ARIA
<figure>
  <figcaption>
    <strong id="manizales-caption">Manizales: Cantidad de carros vendidos en los ultimos tres años</strong><br>
    <span id="manizales-summary">La columna uno tiene la localización y el año de las ventas, las otras columnas muestran la marca del carro y el números de carros vendidos.</span>
  </figcaption>
  <table aria-labelledby="manizales-caption" aria-describedby="manizales-summary">
[…]
  </table>
</figure>

Uso del atributo summary
Example:
Manizales: Cantidad de carros vendidos en los ultimos tres años
Mazda BMW Chevrolet Nissan
2014 45 15 30 50
2015 40 25 30 55
2016 35 30 40 60
Code snippet: 
<table
  summary="Column one has the location and size of accommodation, other columns show the type and number of properties available.">