Jerarquía Visual VS Jerarquía del DOM: Accesibilidad

¿Por qué el Diseñador debe Conocer la Jerarquía del DOM?

Como diseñadores, solemos “dibujar” elementos en el lienzo de Figma sin preocuparnos de su orden interno. Sin embargo, para un usuario de Lector de Pantalla o de Teclado, tu diseño no es una imagen; es una lista secuencial de elementos.

Si el botón “Comprar” aparece visualmente al final de la página (abajo a la derecha) pero en el código está al principio (arriba a la izquierda), el usuario ciego lo encontrará mucho antes de haber leído el precio o la descripción del producto. Esto genera una confusión cognitiva masiva.

1. Jerarquía Visual (Lo que se ve)

Se basa en principios de la Gestalt y en trucos de diseño para guiar el ojo:

• Tamaño: Los elementos más grandes se ven primero.
• Color y Contraste: Los colores vibrantes captan la atención antes que los tonos pastel.
• Posición: En Occidente, el ojo suele leer en patrón de “F” o de “Z”.
• Espacio en Blanco: Separa grupos lógicos y da aire a la información.

2. Jerarquía del DOM (Lo que se lee)

Es la estructura lógica que el navegador utiliza para interpretar la página. Se define por:

• Orden de las Etiquetas: Elemento 1, Elemento 2, Elemento 3.
• Jerarquía de Encabezados: H1 > H2 > H3 > H4. Es el “Índice” de tu página para las máquinas.
• Relaciones de Contenedor: Qué elementos están dentro de qué otros (padre/hijo).

El Gran Problema: La Desconexión (Visual vs Código)

A menudo, por motivos estéticos o de layout (usando CSS Flexbox o Grid), el desarrollador puede cambiar la posición visual de un elemento sin cambiar su posición en el código original (el DOM).

• Ejemplo: Un banner que visualmente está arriba de todo pero en el código está abajo por una cuestión técnica.
• Consecuencia: Un usuario de teclado tabulará por toda la página y, de repente, el foco saltará mágicamente al banner del principio desde el final. Esto se siente como un error del sistema.

Cómo Alinear Ambas Jerarquías (Best Practices)

Tú, como diseñador de producto, debes ser el responsable de que el orden de lectura y el orden visual sean coherentes:

• Diseña en Orden: Intenta que el orden de tus capas en Figma coincida con el orden de lectura. Esto facilitará que el desarrollador construya el DOM correctamente.
• Usa los Headings como Guía: No elijas H2 o H3 basándote solo en el tamaño del texto. Elige el encabezado basándote en la importancia de la sección. Si visualmente es una sección secundaria, debe ser un H3 independientemente de si quieres que se vea grande o pequeño.
• Especifica el Tab Order: Si tu layout es complejo (rejillas o asimetrías), añade anotaciones en el handoff para indicar el orden de lectura deseado.
• Cuidado con el order de CSS: Pide a los desarrolladores que usen la propiedad order de Flexbox/Grid con precaución, ya que cambia la posición visual pero suele dejar el DOM intacto, rompiendo la accesibilidad del foco.

Consejos de Mentor

• No asumas la Inteligencia del Navegador: El navegador lee tu código de arriba a abajo. Si diseñas una cabecera que visualmente está abajo, el navegador la leerá primero solo si el código está arriba. Sé consciente de este desfase.
• Prueba el “Orden de Capas” en Figma: Figma tiene un plugin para reordenar capas automáticamente según su posición visual. Úsalo antes de entregar el archivo.
• La ley de la Proximidad: Los elementos que están juntos visualmente deben estar juntos en el DOM. Esto parece obvio, pero en diseños complejos a menudo se rompe.

Recursos y Herramientas

• W3C: Content Structure and Hierarchy
• MDN Web Docs: HTML Structural Elements
• WebAIM: Semantic Structure in HTML
• Artículos: Visual vs DOM order in accessible interfaces

accessibility-tree gestion-de-foco estrategia-tab-order pruebas-lectores-pantalla heuriaticas-de-usabilidad