Biblioteca Complutense

3. Orden de lectura

Comprueba el orden de lectura del contenido

Lista numerada

El orden de lectura del contenido y de todos los elementos debe ser accesible con teclado en el orden de tabulación correcto. El orden de lectura en nuestro idioma es de izquierda a derecha y de arriba a abajo.

Cuando creamos una página, elegimos una plantilla y ponemos el contenido arrastrando los widgets a las distintas áreas de la plantilla. El orden de lectura depende de la plantilla y de cómo situemos los widgets, bloques de texto, etc.

Podemos comprobar el orden de lectura de diferentes formas:

  • Reduciendo la ventana del navegador para ver nuestra página en una sola columna y así revisar el orden de los elementos.
  • Pulsando el tabulador para comprobar la secuencia de lectura.
  • Desactivando los estilos de nuestro navegador:
    • Chrome: instalando la extensión "Web Developer".
    • Firefox:
      1. activa la barra de menú presionando Alt+V.
      2. En el menú "Ver" selecciona en "Estilo de página", "Sin estilo".
  • Escuchando cómo lee la página un lector de pantalla...

Tablas

Las tablas sirven para mostrar información tabular en filas y columnas.

Tablas simples

Las tablas deben ser uniformes, evitando dividir, combinar o vincular celdas. Las tablas simples [1] accesibles tienen el mismo número de filas por columna y el mismo número de columnas por fila. En algunos casos podemos evitar el uso de una tabla compleja convirtiendo esa tabla en varias tablas simples.

Las tablas deben tener definidos correctamente los encabezados con la etiqueta <th>.

Con el widget de texto podemos marcar los encabezados de la siguiente manera:

1. Clicamos sobre una celda de encabezado de la tabla.
2. Clicamos en "Tabla" y en el menú emergente seleccionamos: "Celda" > "Propiedades de celda"

desplegable propiedades de celda
Ilustración 1. Propiedades de celda de celda


3. En "Tipo de celda" seleccionamos "Celda de cabecera"

Celda de cabecera
Ilustración 2. Tipo de celda

Es importante describir la tabla. Una breve descripción que identifique la tabla y ayude a comprender lo más relevante de su estructura.


[1] También podemos crear tablas complejas, pero sirviéndonos de otras técnicas de mayor dificultad:

  • Técnica H63: Usar el atributo "scope" para asociar celdas de encabezado y celdas de datos en las tablas de datos.
  • Técnica H43: Usar atributos "id" y "headers" para asociar las celdas de datos con las celdas de encabezado en las tablas de datos.
  • Con el Widget de texto podemos definir los tipos de celdas y su alcance (grupos de filas o de columnas).

Decálogo de calidad web