Las tablas de maquetación son una trampa

Hace años, los desarrolladores construían el diseño de las páginas con el elemento table. Esa práctica persiste en código antiguo y todavía causa hoy problemas reales de accesibilidad.

Un lector de pantalla trata todas las tablas como datos. Anuncia filas, columnas y recuentos de celdas de su diseño, y sumerge a los usuarios en una estructura sin significado.

Las tablas de diseño suelen distribuir el contenido en celdas siguiendo una secuencia confusa. El orden visual y el orden de lectura se separan, y los usuarios se pierden.

El diseño moderno corresponde a CSS. Use flexbox o grid para organizar una página y reserve el elemento table para datos realmente tabulares.

Cuando alinea elementos en una fila o una columna, flexbox es la herramienta natural. Se adapta al contenido sin que interfieran las semánticas de una tabla.

Para trabajar con filas y columnas a la vez, grid de CSS le proporciona un verdadero sistema de diseño. Separa el aspecto de la página del significado de su marcado.

Con el diseño CSS, su HTML puede usar puntos de referencia reales, como header, nav y main. Las personas que usan lectores de pantalla obtienen un mapa significativo en lugar de recuentos de celdas.

Si realmente no puede eliminar una tabla de diseño heredada, añada role=presentation. Esto elimina la semántica de tabla para que la tecnología de asistencia ignore la cuadrícula.

Considere role=presentation como una solución temporal. La solución real es migrar a CSS, que elimina el problema en lugar de limitarse a ocultarlo.

La ausencia de caption y th, junto con celdas que contienen secciones completas en lugar de valores, son señales de alerta. Este patrón casi siempre indica una tabla de diseño que debe refactorizarse.

Hágase una pregunta sencilla sobre cualquier tabla: ¿presenta datos en filas y columnas de valores relacionados? Si no es así, se trata de una tabla de diseño y CSS debería sustituirla.

No diseñe nunca una página con una tabla. Use flexbox o grid, reserve table para datos reales y considere role=presentation únicamente como solución provisional en código heredado.