Comprender diseño, UX y accesibilidad

Un recorrido de lectura

1. Orientar la lectura

• jerarquía visual

  Organización gráfica que indica lo que se debe ver y entender primero a través del tamaño, el contraste, el espacio y la posición.

• arquitectura de la información

  Organización de contenidos, categorías, etiquetas y rutas de navegación para que la información sea fácil de encontrar y comprender.

• orden de lectura

  Secuencia en la que se encuentra el contenido de la página o del documento, incluso por teclado o tecnología de asistencia.

2. Describir interacciones

• Nombre accesible

  Nombre expuesto a tecnologías de asistencia para identificar un botón, campo, enlace u otro componente interactivo.

• Estado componente

  Condición visible de un control, como enfoque, error, carga o indisponibilidad.

• mensaje de error de campo

  Mensaje asociado con un campo de formulario que explica el problema y la corrección esperada.

3. Observar el uso

• usabilidad

  Facilidad con la que los usuarios pueden entender una interfaz, completar tareas y evitar o recuperarse de errores.

• Diseño receptivo

  Diseño adaptando diseño, medios e interacciones a diferentes tamaños y condiciones de pantalla.

• Cumulative Layout Shift (CLS)

  Métrica de estabilidad visual basada en la mayor ráfaga de desplazamientos inesperados del diseño.

Distinciones útiles

texto alternativo / Nombre accesible

La alternativa de una imagen comunica su función; el nombre accesible identifica un elemento. Si la imagen es un control, debe explicar la acción.

estructura metálica / simulacro

Un esquema explora organización; una maqueta detalla presentación. Ninguno demuestra que el recorrido funcione en el navegador.

Usar el vocabulario para decidir

Situación

Un error de formulario se ve, pero no permite encontrar el campo al usar teclado.

Antes de decidir

Compruebe nombre, asociación del mensaje y orden de recorrido. Cambiar únicamente el color no explica cómo corregir.

Una comprobación concreta

Repita con un dato inválido y compruebe la corrección sin ayuda de la persona que diseñó la pantalla.

Documentos de referencia primarios

Estos documentos explican conceptos técnicos. Los recorridos y ejemplos son métodos editoriales que se adaptan al proyecto.

• W3C WAI — Forms
• W3C WAI — Images
• web.dev

Temas relacionados

• Comprender desarrollo y código
• Comprender contenidos y su ciclo de vida