Tus problemas de SEO y accesibilidad tienen la misma causa raíz

El problema principal consiste en que el uso de CSS Grid para diseñar tablas en una página de comercio electrónico causa dificultades de accesibilidad y SEO. Una tabla de productos se despliega en una página, con dos productos en una columna cada uno y una fila para cada especificación, como peso, dimensiones, duración de batería y garantía.

Se construye utilizando CSS Grid, div contenedor, fila de encabezado y bloque de valores. El grid gestiona la alineación y las media queries lo colapsan en una sola columna en dispositivos móviles.

Tras varias revisiones, se ha evidenciado que el problema radica en que la relación entre las especificaciones, los productos y los valores no está declarada de forma explícita. La etiqueta de tabla es creada para este propósito, con th scope= col y th scope= row para definir claramente qué celdas gobiernan cada encabezado. Esta relación pasa a formar parte del árbol de accesibilidad y se puede computar por cualquier consumidor que lo recorra, en lugar de reconstruirse a vista desde la posición de las columnas.

Tras analizar el problema, se propone reconstruir el componente de comparación como una tabla adecuada con las relaciones de scope correspondientes. Luego, se ejecutan las mismas tres comprobaciones sobre él: revisión de pantalla de lectores, proceso de extracción y consulta de IA. Esto permite corregir el defecto sin necesidad de parches especiales o casos especiales, evitando así desplazamientos que puedan malinterpretarse.