Cómo hacer que las tablas web sean accesibles para todos
By s4pcademy
Básicamente, los elementos HTML disponibles para definir tablas son elementos semánticos.
Así, por ejemplo, los navegadores (y otros agentes de usuario, como los lectores de pantalla) reconocerán directamente por el elemento que un elemento
es en realidad una tabla. Del mismo modo reconocen el encabezado de una tabla por el elemento . Sin embargo, incluso con tablas, además del correcto uso de las correspondientes HTML elementos, conviene considerar algunos aspectos adicionales en materia de accesibilidad.La estructura básica de la tabla
Primero, debe encerrar los encabezados de las tablas en un elemento
circundante (una excepción se discutirá en breve) y rodear las filas individuales (los registros de datos representados en el cuerpo de la tabla) con un elemento . Además, opcionalmente puede agregar un pie de página a la tabla usando el elemento .
A continuación se muestra código HTML para definir una tabla accesible. Esto incluye el elemento
, no se pueden “agrupar” usando un elemento . Entonces, en este caso, omitir el elemento está bien (la excepción mencionada anteriormente).información adicional
Puede encontrar más información sobre la construcción accesible de mesas en el sitio web WAI del W3C, específicamente en https://www.w3.org/WAI/tutorials/tables/. También encontrará información útil sobre lo que debe considerar con los encabezados de tablas anidadas.
Nota del editor: esta publicación ha sido adaptada de una sección del libro. Desarrollo web Full Stack: la guía completa por Philip Ackermann.
| y una fila de una tabla por el elemento |
|---|
