C27Hacer que el orden del DOM coincida con el orden visual

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).

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

Técnicas relacionadas

• G57: Ordenar el contenido en una secuencia significativa
• G59: Colocar los elementos interactivos en un orden que siga las secuencias y relaciones del contenido

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.