Probar un diálogo de dirección con el teclado
Un ejemplo resuelto muestra el orden del foco, la cancelación y el guardado de una dirección para reproducir fallos de teclado.
Un diálogo de dirección de entrega debe poder utilizarse por completo con el teclado. Compruebe el recorrido desde su apertura hasta el regreso a la página. Alcanzar el botón de guardar no basta.
El ejemplo es ficticio: la dirección D-17 del portal de clientes es «Hafenweg 8». La persona quiere cambiar el número a 10. El diálogo contiene calle y número, además de «Cancelar» y «Guardar dirección». Es una prueba funcional manual, no una evaluación completa de accesibilidad.
Registrar el fallo como un recorrido
En el estado inicial supuesto, el diálogo se abre, pero el foco permanece en «Cambiar dirección de entrega», detrás de la superficie oscurecida. Tab lleva después a enlaces del pie de página. Los campos visibles se omiten. Una prueba con ratón podría haber pasado por alto este fallo.
Registre la página inicial, el control que abre el diálogo, las teclas y el elemento que realmente recibe el foco. Desarrollo podrá reproducir el mismo problema. Utilice un entorno seguro con datos de prueba; no cambie una dirección real para experimentar.
Definir el comportamiento esperado
En este diálogo breve, Calle es una posición inicial de foco razonable. Los diálogos largos o con consecuencias importantes pueden necesitar otra posición. El patrón WAI explica estas diferencias.
Acción | Resultado esperado en el ejemplo |
|---|---|
Llegar al control con Tab y pulsar Intro | Se abre el diálogo; el foco es visible en Calle. |
Avanzar con Tab | Calle, número, Cancelar, Guardar dirección; después Calle otra vez. |
Retroceder con Shift+Tab | Los mismos controles al revés; sin pasar detrás del diálogo. |
Introducir 10 y pulsar Escape antes de guardar | Se cierra; el foco vuelve al control inicial; D-17 sigue en Hafenweg 8. |
Abrir de nuevo y guardar 10 | El éxito aparece tras confirmar el guardado; D-17 muestra Hafenweg 10. |
Guardado rechazado por reglas de negocio | Error comprensible; entradas conservadas; zona afectada accesible. |
Este orden de tabulación corresponde al ejemplo concreto. Su interfaz puede incluir otros controles.
Corregir la causa en el lugar adecuado
Use botones reales para las acciones y campos bien etiquetados. Un diálogo personalizado necesita un nombre accesible y una gestión correcta del foco. role="dialog" o aria-modal="true" por sí solos no bloquean el fondo ni implementan interacción por teclado.
Desarrollo debe tratar conjuntamente la apertura, el mantenimiento del foco dentro del diálogo modal y el cierre. Aquí el control inicial sigue existiendo al cerrar. Si otro flujo lo elimina, hace falta otro punto de retorno lógico. Los estilos no deben ocultar el indicador visible del foco.
Probar el cierre durante el guardado
Escape no retira automáticamente una petición ya enviada al servidor. En este ejemplo, la ventana también puede cerrarse durante el procesamiento. La página sigue mostrando «Cambio de dirección en proceso» para D-17. Una respuesta confirmada actualiza la dirección; un resultado incierto queda pendiente de aclarar. «Cambio descartado» sería incorrecto en esa situación.
Repita la prueba corregida en los navegadores compatibles y con una configuración adecuada de lector de pantalla. Registre observaciones y fallos pendientes. El recorrido de teclado corregido no demuestra todavía el estado de las demás páginas, contrastes o contenidos.
Fuentes
Seguir leyendo
Todos los artículos
Diseño y UX con ASES
Experiencia de usuario, interfaces e imagen de marca