Tablas Accesibles

Ejemplo: Asociar celdas de datos con sus encabezados en una tabla compleja

Éste ejemplo es tomado del libro “Maximum Accessibility” de los autores John Slatin y Sharron Rush (Pearson Education, 2003).

El ejemplo presenta una tabla con los horarios de una ruta de transporte público del camión o bus. El código de la tabla incluye los elementos necesarios para asociar las celdas de datos con su correspondiente encabezado de columna. El lector de pantalla puede reportar esas asociaciones a los usuarios que son invidentes. Lo anterior hace la diferencia entre tablas que tienen sentido ya que se pueden entender, y las tablas que no se entienden.

Cómo hacer un ejemplo de éste tipo

Código para el ejemplo de cómo asociar celdas de datos con sus encabezados

 

Fundamento

Los usuarios que no padecen ningún tipo de discapacidad visual pueden entender rápidamente tablas con información, en esos casos solamente se requiere dar una mirada rápida, como en el caso del horario de transporte público. En el horario mostrado en este ejemplo, los usuarios sin discapacidades visuales podrían ver rápidamente que el renglón superior identifica la dirección hacia la cual el camión o bus viaja, es decir rumbo al norte o northbound, y que las intersecciones que son algunas de las paradas específicas, están listadas a lo largo del segundo renglón. El resto de la tabla muestra las horas específicas en las que el bus debe llegar a cada intersección. Los usuarios pueden ubicar donde estará el bus a determinada hora, con solo ver en la parte superior de la columna el nombre de la intersección.

La gente que usa algún lector de pantalla debe escuchar el contenido de la tabla, sin poder auxiliarse de ninguna pista visual. Por lo anterior, horarios como el presentado pueden resultar confusos y llegar a ser completamente inutilizables sino se cuenta con el contenido de las celdas que indican en éste caso las horas, adecuadamente asociado con sus correspondientes encabezados para distinguir las intersecciones o paradas en el ejemplo.

Crear una asociación entre un título o encabezado de celda y una celda de datos, es similar a crear una asociación entre una etiqueta y una forma de control. Primero, los encabezados de las celdas que en éste ejemplo son los elementos <th> que indicarán la dirección y la lista de intersecciones, deben tener un atributo id único, como se muestra a continuación:

<th id="dir">Northbound</th>

Posteriormente, cada celda de datos que son las que contiene las horas, estará definido por el elemento <td>, y debe tener definido su atributo headers. El atributo headers contiene a su vez, la lista de los atributos id para los encabezados de las celdas a las que se asociará cada dato. En el ejemplo presentado se requiere asociar cada hora o celda de datos con dos encabezados: el que indica la dirección (Northbound) y el que distingue el nombre de una intersección (por ejemplo 6th & Con) donde se encuentra la parade del camión.

<td headers="dir int1">10:33</td>

El código del ejemplo muestra cómo luce toda la tabla. Es importante destacar que algunas herramientas de accesibilidad y desarrollo de multimedia (authoring tools) estan comenzando a soportar éstas complejas asociaciones.

 

Cómo se escucha éste ejemplo con el lector de pantalla JAWS

Escuche éste ejemplo (en Inglés)

 

Transcript del lector de pantalla JAWS

[Sixth and Congress Avenue. Row two. (JAWS expands the on-screen abbreviation) (User presses the key combination to move one cell right)
Northbound. Eleven th and Congress Avenue. Column two. (User presses the key combination to move one cell down)
Northbound. Ten thirty six a.m. Row three. (User presses key combination to move one cell down)
Northbound. Ten fifty one a.m. row four. (User presses the key combination to move one cell right)
Twelve th and Lav. Ten fifty seven a.m. Column three. (User presses key combination to move one cell to the right)
Fifteen th and Lav. Eleven zero zero a.m. Column four. (User presses key combination to move one cell to the right)
MLK and Lav. Eleven zero five a.m. column five.]

 

Normas y estándares de Accesibilidad relacionados con éste ejemplo (versión en Inglés)

• Section 508 Requirements and WCAG 1.0 Checkpoints for Data Tables