jueves, 9 de noviembre de 2017

Creación de tablas accesibles

El propósito de las tablas de datos es presentar información tabular y tener columnas o filas que muestran el significado de la información. Los usuarios videntes pueden escanear visualmente una tabla y pueden crear rápidamente asociaciones visuales entre los datos de la tabla y sus encabezados de fila y / o columna apropiados. Los usuarios que no puede ver la tabla no puede hacer estas asociaciones visuales, por lo que el marcado adecuado se debe usar para hacer una asociación programática entre los elementos dentro de la tabla. Cuando el marcado HTML es correcto y está en su lugar, los usuarios de lectores de pantalla pueden navegar a través de las tablas de datos de una en una, y oirán los encabezados de columna y fila.
TABLA DE DATOS ACCESIBLE

Conocer el contenido de la tabla

Las tablas de datos muy a menudo tienen un breve texto descriptivo antes o después, que indica el contenido de esa tabla. Este texto debe estar asociado a su tabla respectiva usando el <caption>. El <caption>elemento debe ser lo primero después de la <table>etiqueta de apertura .
<table>
<caption>Tazas de cafe</caption>

Encabezados de fila y columna

Un paso crítico hacia la creación de una tabla de datos accesible es designar encabezados de fila y / o columna. En el marcado, el <td> se utiliza para celdas de datos y el <th>se usa para celdas de encabezado.

Asociar las celdas de datos con los encabezados

El atributo scope es el encargado:identifica si un encabezado de tabla es un encabezado de columna o un encabezado de fila.

<table>
  <tr>
    <th></th>
    <th scope="col">Month</th>
    <th scope="col">Savings</th>
  </tr>
  <tr>
    <td scope="row">1</td>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td scope="row">2</td>
    <td>February</td>
    <td>$80</td>
  </tr>

</table>

SINTASIS

<td scope="col|row|colgroup|rowgroup">


USAR TAMAÑOS RELATIVOS A ABSOLUTOS


Si es necesario definir el ancho de las celdas, use valores relativos, como porcentajes, en lugar de valores de píxel. En general, se deben evitar las alturas definidas de las celdas para que la celda pueda expandirse hacia abajo para acomodar su contenido, algo especialmente útil para usuarios con baja visión que pueden ampliar el contenido del texto.

El atributo summary de la <table> se puede usar para proporcionar un resumen de una estructura de tabla de datos, el soporte para el resumen varía, pero, en general, es específico del lector de pantalla (no es accesible para nadie más).

Los elementos theady tfoot definen las filas de encabezado y pie de página para las tablas. No proporcionan ninguna funcionalidad de accesibilidad y generalmente solo se usan cuando se imprime una tabla larga

No hay comentarios:

Publicar un comentario