F48Tablas de datos hechas con texto preformateado (pre)

Por qué es importante

Quien ve la pantalla relaciona cada dato con su columna gracias a la alineación. Un lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) no percibe esa alineación. Lee las líneas de corrido, con números sueltos.

Además, si la persona usa otra tipografía o un tamaño mayor, las columnas pueden descolocarse o salirse de la pantalla. En un horario de autobuses o unos resultados electorales, ya no se sabe a qué parada o candidatura corresponde cada cifra.

Cómo evitarlo

1. Use <table> siempre que los datos se organicen en filas y columnas.
2. Marque los encabezados con <th> y los datos con <td>.
3. Ponga un título a la tabla con <caption>, por ejemplo «Horario de atención».
4. Deje <pre> para lo que de verdad necesita conservar los espacios, como fragmentos de código.
5. Si los datos salen de un sistema antiguo en texto plano, conviértalos en tabla antes de publicarlos.

Cómo comprobarlo

1. Busque <pre> en el código fuente.
2. Mire su contenido. Si tiene columnas alineadas con encabezados y datos, es una tabla mal marcada.
3. Con un lector de pantalla, use las órdenes de tabla (en NVDA, la tecla T salta a la siguiente tabla). Si no la encuentra, no está marcada como tabla.

Ejemplo

Un horario marcado como tabla HTML, con título y encabezados de columna.

<table>
  <caption>Horario de la oficina de empleo</caption>
  <tr>
    <th scope="col">Día</th>
    <th scope="col">Mañana</th>
    <th scope="col">Tarde</th>
  </tr>
  <tr>
    <td>Lunes</td>
    <td>9:00 a 14:00</td>
    <td>16:00 a 18:00</td>
  </tr>
</table>