Fallo Común F48 de WCAG 2.1: Uso del elemento PRE para marcar información tabular

La accesibilidad web es crucial para garantizar que todas las personas puedan interpretar y navegar el contenido sin barreras. Un error común ocurre cuando se usa el elemento <pre> para representar información tabular, lo que impide que los usuarios de tecnologías de asistencia comprendan correctamente la relación entre los datos.

El fallo F48 se produce cuando el formato visual de una tabla es simulado con espacios y tabulaciones dentro de un <pre>, en lugar de usar el elemento <table>, diseñado específicamente para representar datos estructurados.

Este fallo incumple el siguiente criterio de éxito de las WCAG 2.1: 1.3.1: Información y relaciones → La información tabular debe conservar su estructura semántica para que las tecnologías de asistencia puedan interpretarla correctamente.

Acerca de este fallo

El elemento <pre> se usa para conservar el espaciado y formato de texto en su estado original, pero no establece relaciones semánticas entre los datos. Al usar <pre> para representar tablas, los lectores de pantalla no pueden identificar correctamente filas, columnas ni encabezados.

Problemas causados por este fallo:

• Los usuarios de lectores de pantalla no pueden navegar correctamente por los datos.
• Las relaciones entre filas y columnas se pierden, dificultando la comprensión del contenido.
• El contenido puede desestructurarse si se visualiza en dispositivos con diferente ancho de pantalla.

Escenarios comunes donde ocurre este fallo:

• Horarios de clases o eventos representados con tabulaciones dentro de <pre>.
• Resultados electorales o reportes estadísticos sin estructura tabular correcta.
• Tablas de información técnica que dependen de espacios en blanco para la alineación.

Ejemplos

Ejemplo incorrecto 1: Uso de <pre> para un horario de reuniones

Este código incorrecto usa <pre> en lugar de una tabla.

<pre>
         Lunes    Martes    Miércoles   Jueves    Viernes
8:00-9:00         Reunión con equipo
9:00-10:00                  Dr. Pérez      Llamada a cliente
</pre>

🔴 Problema:

• El contenido tabular solo mantiene su estructura visualmente.
• Los lectores de pantalla no pueden interpretar correctamente la relación entre los días y horarios.

Solución correcta

Se debe usar una tabla semántica en HTML para representar la información tabular correctamente.

<table>
  <thead>
    <tr>
      <th>Hora</th>
      <th>Lunes</th>
      <th>Martes</th>
      <th>Miércoles</th>
      <th>Jueves</th>
      <th>Viernes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>8:00-9:00</td>
      <td></td>
      <td>Reunión con equipo</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>9:00-10:00</td>
      <td></td>
      <td></td>
      <td>Dr. Pérez</td>
      <td>Llamada a cliente</td>
      <td></td>
    </tr>
  </tbody>
</table>

✅ ¿Qué mejora?:

• Se preserva la estructura tabular correcta.
• Los lectores de pantalla pueden interpretar las relaciones entre las celdas correctamente.

Ejemplo incorrecto 2: Resultados de elecciones con <pre>

<pre>
         DISTRITO        CANDIDATO A     CANDIDATO B
001      123 votos      98 votos
002      145 votos      132 votos
</pre>

🔴 Problema:

• La relación entre los distritos y los votos no es clara para lectores de pantalla.
• La alineación puede romperse si el contenido se visualiza en diferentes dispositivos.

Solución correcta

<table>
  <thead>
    <tr>
      <th>Distrito</th>
      <th>Candidato A</th>
      <th>Candidato B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>001</td>
      <td>123 votos</td>
      <td>98 votos</td>
    </tr>
    <tr>
      <td>002</td>
      <td>145 votos</td>
      <td>132 votos</td>
    </tr>
  </tbody>
</table>

✅ ¿Qué mejora?:

• Se mantiene la estructura tabular correcta.
• Se facilita la interpretación de los datos por tecnologías de asistencia.

Errores comunes y cómo evitarlos

Errores frecuentes:

• Usar <pre> en lugar de <table> para representar datos tabulares.
• Confiar en tabulaciones y espacios en blanco para alinear datos.
• No considerar la accesibilidad para usuarios de lectores de pantalla.

Cómo evitar estos errores:

• Usar <table> para datos tabulares en lugar de <pre>.
• Agregar encabezados de columna con <th> para mejorar la semántica.
• Verificar la accesibilidad con lectores de pantalla y herramientas de validación.

Preguntas frecuentes sobre el fallo común F48

¿Por qué no se debe usar <pre> para representar tablas?

Porque <pre> solo conserva el formato visual, pero no proporciona una estructura accesible para usuarios con discapacidad.

¿Puedo usar CSS para maquetar una tabla sin <table>?

No es recomendable. <table> proporciona la semántica correcta para datos tabulares y es interpretada adecuadamente por tecnologías de asistencia.

¿Qué pasa si solo quiero mostrar una tabla con espaciado visual?

Debes seguir usando <table> y aplicar estilos CSS para personalizar la apariencia.

¿Cómo puedo probar si una tabla es accesible?

Puedes utilizar herramientas como WAVE o Lighthouse para evaluar la accesibilidad de las tablas.

Recursos relacionados

• Guía oficial WCAG 2.1 para el fallo común F48: Incumplimiento del Criterio de Conformidad 1.3.1 debido al uso del elemento previo para marcar información tabular
• Comprender el criterio de éxito 1.3.1 Información y relaciones
• Guía de tablas accesibles en HTML

Pruebas y validación

Procedimiento

1. Revisar el código en busca del elemento <pre>.
2. Identificar si el contenido dentro de <pre> representa información tabular.
3. Evaluar si la estructura tabular puede ser entendida por un lector de pantalla.

Resultados esperados

• ❌ Si se usa <pre> para tablas, falla el criterio 1.3.1.
• ✅ Si se usa <table> con estructura semántica correcta, cumple con el criterio 1.3.1.

Usar <pre> para formatear información tabular es un error de accesibilidad. La mejor práctica es usar <table> con estructura semántica correcta para garantizar que todos los usuarios puedan interpretar los datos correctamente.

💡 Si necesitas ayuda con la accesibilidad de tu web, contáctanos!