Técnica Técnicas generales WCAG 2.2
G71Poner enlaces de ayuda en las páginas con formularios
Nombre oficial en el W3C: Proporcionar un enlace de ayuda en todas las páginas web
En pocas palabras
Cada página con un formulario debe tener al menos un enlace a una ayuda que explique cómo rellenarlo. Aún mejor, cada campo puede llevar su propio enlace de ayuda justo antes o después. La ayuda debe abrirse sin que se pierdan los datos ya escritos.
Por qué es importante
Un formulario de solicitud o de cita previa puede pedir datos que no todo el mundo entiende: «referencia catastral», «código CSV», «NIF del representante». Sin ayuda, muchas personas se atascan, se equivocan o abandonan.
Las personas con dificultades cognitivas o de aprendizaje son las más afectadas. Si la ayuda está junto al campo, también la encuentra fácilmente quien usa teclado o lector de pantalla (programa que lee en voz alta lo que hay en la pantalla).
Cómo se hace
- Escriba una página de ayuda propia de ese formulario, con ejemplos de cómo rellenar cada dato.
- Ponga un enlace visible a esa ayuda en la página del formulario.
- Si un campo es difícil, añada su propio enlace de ayuda justo antes o después del campo. Así se llega a él con Tab.
- Puede incluir el enlace dentro de la etiqueta
<label>, para que el lector de pantalla lo relacione con el campo. - Abra la ayuda en una ventana nueva o en un panel, y avíselo en el texto del enlace. Así no se pierden los datos escritos.
Cómo comprobarlo
- Localice las páginas que tienen formularios.
- Compruebe que hay al menos un enlace a una ayuda sobre ese formulario, o un enlace de ayuda junto a cada campo.
- Escriba algunos datos, abra la ayuda y confirme que los datos no se borran.
- Recorra el formulario con Tab y verifique que se llega a los enlaces de ayuda.
Ejemplo
Campo de un formulario municipal con su enlace de ayuda dentro de la etiqueta.
<label for="catastro">
Referencia catastral
<a href="/ayuda/referencia-catastral" target="_blank">(ayuda, se abre en ventana nueva)</a>
</label>
<input type="text" id="catastro" name="catastro">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 G71 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
Todas las tecnologías.
Descripción
El objetivo de esta técnica es proporcionar ayuda contextual a los usuarios mientras introducen datos en formularios, ofreciendo al menos un enlace a la información de ayuda en cada página web. El enlace lleva a una página de ayuda con información específica de esa página web. Otro enfoque consiste en proporcionar un enlace de ayuda para cada control interactivo. Situar este enlace inmediatamente antes o después del control permite a los usuarios llegar a él fácilmente con la tecla de tabulación si tienen problemas con el control. Mostrar la información de ayuda en una ventana nueva del navegador garantiza que no se pierdan los datos que ya se hayan introducido en el formulario. NOTA: un enlace no es la única forma de proporcionar ayuda.
Ejemplos
El ejemplo siguiente muestra un elemento label que incluye un enlace de ayuda. Incluir el enlace de ayuda dentro del elemento label permite que los usuarios de lectores de pantalla tengan acceso al enlace de ayuda al interactuar con el control de formulario de entrada.
<form>
<label for="serial-number"><span>Serial Number</span>
<a href="help.html" target="_blank">Help</a></label>
<input type="text" name="serial-number" id="serial-number">
</form>
Pruebas
Procedimiento
- Identificar una página web que contenga formularios.
- Determinar si hay al menos un enlace a información de ayuda que explique cómo rellenar el formulario de esa página web.
- Determinar si hay enlaces, antes o después de cada control interactivo, a información específica de ese control.
Resultados esperados
- La comprobación n.º 2 o la n.º 3 es verdadera.
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.
Basado en la técnica G71 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.