Addaw, ir a inicio Donar

Técnica CSS WCAG 2.2

C27Hacer que el orden del código coincida con el orden visual

Nombre oficial en el W3C: Hacer que el orden del DOM coincida con el orden visual

En pocas palabras

Con CSS se pueden recolocar los bloques en pantalla en un orden distinto al del código HTML. Esta técnica pide que ambos órdenes coincidan. Así el lector de pantalla y el tabulador recorren la página en el mismo orden en que se ve.

Por qué es importante

Un lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) lee en el orden del código. El tabulador también sigue ese orden. Si el CSS lo cambia, lo que se oye o se recorre no coincide con lo que se ve.

  • Quien usa el teclado ve saltar el foco de un lado a otro de la pantalla sin lógica.
  • Quien usa un ampliador de pantalla con voz se pierde.
  • Una persona ciega y otra que ve la pantalla no se entienden si comentan la misma página.

Cómo se hace

  1. Escriba el HTML en el orden lógico de lectura: cabecera, menú, contenido principal y pie.
  2. Dentro de un formulario, coloque los campos en el código en el mismo orden en que se rellenan.
  3. Use el CSS para dar aspecto, no para reordenar. Tenga cuidado con order, flex-direction: row-reverse, float: right o la colocación en grid.
  4. Si un bloque tiene que verse en otro sitio, muévalo también en el HTML.
  5. No use tabindex positivo para arreglar el orden. Corrija el código.

Cómo comprobarlo

  1. Recorra la página con la tecla Tab. El foco debe avanzar en un orden que tenga sentido visualmente.
  2. Desactive los estilos de la página o léala con un lector de pantalla. El orden debe ser el mismo que en pantalla.
  3. Fíjese en zonas con columnas, tarjetas o botones alineados a la derecha. Ahí suelen aparecer los desórdenes.

Ejemplo

Botones de un formulario en el mismo orden en el código y en pantalla, sin reordenarlos con CSS.

<div class="acciones">
  <button type="button">Volver</button>
  <button type="submit">Enviar solicitud</button>
</div>
<style>
  .acciones { display: flex; gap: 1em; }
  /* Sin order ni row-reverse */
</style>
Ver el texto completo del W3C (traducción al español)

Esta es una traducción no oficial al español de la técnica C27 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.

Aplicabilidad

CSS usado con HTML

Descripción

El objetivo de esta técnica es garantizar que el orden del contenido en el código fuente sea el mismo que el de su presentación visual. El autor puede cambiar el orden del contenido del código fuente a cualquier número de presentaciones visuales mediante CSS. Cada orden puede tener sentido por sí mismo, pero puede causar confusión a los usuarios de tecnologías de asistencia. Esto puede deberse a que el usuario desactive la presentación especificada por el autor, a que acceda al contenido directamente desde el código fuente (por ejemplo, con un lector de pantalla) o a que interactúe con el contenido mediante el teclado. Si un usuario ciego, que lee la página con un lector de pantalla que sigue el orden del código fuente, trabaja con un usuario vidente que lee la página en el orden visual, ambos pueden confundirse al encontrar la información en órdenes distintos. Un usuario con baja visión que utilice un magnificador de pantalla junto con un lector de pantalla puede confundirse cuando el orden de lectura parece saltar de un punto a otro de la pantalla. Un usuario de teclado puede tener dificultades para predecir dónde irá el foco a continuación cuando el orden del código fuente no coincide con el orden visual.

También puede haber situaciones en las que el orden presentado visualmente sea necesario para la comprensión general de la página y, si el orden del código fuente se presenta de forma distinta, puede resultar mucho más difícil de entender.

Cuando el orden del código fuente coincide con el orden visual, todas las personas leen el contenido e interactúan con él en el mismo orden (el correcto).

El atributo tabindex de HTML tiene dos funciones. Una es hacer que un elemento pueda recibir el foco y la otra es asignar al elemento una posición en el orden del foco. Un tabindex de 0 hace que un elemento pueda recibir el foco, pero lo añade al orden del foco según el orden de los elementos en el código fuente. El orden del foco seguirá los valores positivos de tabindex en orden ascendente. Establecer valores de tabindex que den lugar a un orden distinto del orden de los elementos en el Document Object Model (DOM) puede hacer que el orden sea incorrecto para los usuarios de tecnologías de asistencia. Esto se debe en gran medida a que la propiedad tabindex se especifica en el HTML y no en el CSS. Esto puede cambiar en futuras especificaciones. También puede diferir del orden de la presentación visual.

Ejemplos

  • Un periódico en línea ha colocado visualmente una barra de navegación en la esquina superior izquierda de la página, justo debajo de su logotipo inicial. En el código fuente, los elementos de navegación aparecen después de los elementos que codifican el logotipo.

Pruebas

Procedimiento

  1. Examinar visualmente el orden del contenido de la página web tal como se presenta al usuario final.
  2. Examinar los elementos del DOM con una herramienta que permita ver el DOM.
  3. Comprobar que el orden del contenido en las secciones del código fuente coincide con la presentación visual del contenido en la página web (por ejemplo, en una página en inglés el orden es de arriba abajo y de izquierda a derecha).

Resultados esperados

  • La comprobación n.º 3 es verdadera.

Recursos

  • How users change colours on websites (gov.uk) (cómo cambian los usuarios los colores de los sitios web)
  • La mayoría de los navegadores ofrecen herramientas para desarrolladores con las que inspeccionar el código fuente. Normalmente estas herramientas se abren pulsando F12 o desde la configuración del navegador.
    • The Web Developer Toolbar (Firefox). Permite examinar el código fuente con CSS desactivado en Firefox. Puede ser útil para determinar si el orden de lectura y el orden del código fuente coinciden.
    • Web Developer Toolbar (Chrome). Permite examinar el código fuente con CSS desactivado en Chrome. Puede ser útil para determinar si el orden de lectura y el orden del código fuente coinciden.

Cómo lo comprobamos en ADDAW

En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.

Solicitar una auditoría

Basado en la técnica C27 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.