Fallo común WCAG 2.2
F107Campos de datos personales con un valor autocomplete incorrecto
Nombre oficial en el W3C: Fallo del criterio de conformidad 1.3.5 debido a usar valores incorrectos del atributo autocomplete
En pocas palabras
El atributo autocomplete indica qué dato personal pide un campo: nombre, correo, teléfono, fecha de nacimiento, etc. El error es poner un valor que no corresponde o que no está en la lista oficial de HTML. Entonces el navegador rellena mal el formulario y las ayudas que dependen de ese dato no funcionan.
Por qué es importante
Rellenar formularios cuesta mucho a personas con problemas de memoria, dislexia o dificultades de movilidad. El autorrelleno del navegador les evita escribir los mismos datos una y otra vez.
Además, algunas herramientas usan ese valor para poner un icono junto al campo o explicarlo con palabras más sencillas. Con un valor inventado, como movil en lugar de tel, nada de esto funciona. Con un valor equivocado, el navegador puede escribir el correo en el campo del teléfono.
Cómo evitarlo
- Localice los campos que piden datos de la propia persona que rellena el formulario: nombre, apellidos, dirección, correo, teléfono, fecha de nacimiento.
- Ponga en cada uno el valor exacto de la lista de HTML:
name,given-name,family-name,email,tel,bday,postal-code… - No traduzca ni invente valores.
autocomplete="correo"no significa nada para el navegador. - Compruebe que el valor coincide con lo que pide la etiqueta. Si el campo pide el móvil, no ponga
email. - Estos valores solo son obligatorios en los datos de quien rellena. En los campos sobre otra persona, como un familiar, no se exigen.
Cómo comprobarlo
- Localizar en el formulario los campos que piden datos de quien lo rellena.
- Con las herramientas del navegador (F12), inspeccionar cada campo y leer el valor de
autocomplete. - Comparar ese valor con lo que pide la etiqueta y con la lista de valores de HTML.
- Si el valor es incorrecto o no existe, y el propósito del campo no se indica de otra forma que el navegador pueda reconocer, hay fallo.
- Probar también el autorrelleno del navegador. Si coloca datos en el campo equivocado, revisar ese campo.
Ejemplo
Dos campos de un formulario de inscripción, primero con valores inventados y después corregidos.
<!-- Incorrecto: valores que no existen en HTML -->
<label for="tel">Teléfono móvil</label>
<input id="tel" type="tel" autocomplete="movil">
<label for="nac">Fecha de nacimiento</label>
<input id="nac" type="date" autocomplete="nacimiento">
<!-- Correcto -->
<input id="tel" type="tel" autocomplete="tel">
<input id="nac" type="date" autocomplete="bday">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 F107 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
Esta técnica se aplica a los campos de formulario creados en HTML que recogen información sobre el usuario del formulario.
Descripción
El propósito de esta técnica es identificar una condición de fallo en la que los campos de formulario no tienen los valores correctos del atributo autocomplete en aquellos campos que solicitan información sobre el usuario del formulario.
El criterio de conformidad 1.3.5 Identificación del propósito del campo utiliza una lista fija de valores (tokens) recogida en Input Purposes for user interface components (propósitos de entrada para componentes de interfaz de usuario, basada en la lista fija de valores del atributo autocomplete de HTML 5.2), porque la asociación por software de los valores especificados (metadatos) permite otros tipos de procesamiento automático, como expresar la etiqueta del campo en distintas modalidades.
Otra parte importante de este criterio de conformidad es que los valores se asocian a campos que están dirigidos directamente al usuario final principal.
Ejemplos
Atributo incorrecto
Un formulario en línea empleado para recoger el nombre y la fecha de nacimiento del usuario que utiliza atributos autocomplete incorrectos. El valor correcto del atributo para el primer control es name, y para el segundo control se ha usado el valor inventado birthday en lugar de bday.
<h2>Your details:</h2>
<label for="uname">Name:</label>
<input autocomplete="email" id="uname" type="text">
<label for="ubirthday">Birthday:</label>
<input autocomplete="birthday" id="ubirthday" type="text">Pruebas
Procedimiento
Para cada campo de formulario que recoja información sobre el usuario del formulario:
- Comprobar que el campo de formulario tiene un par de atributo
autocompletey valor que no se corresponde con el propósito del campo. - Comprobar que el propósito del campo no se comunica por software mediante ningún otro método.
Resultados esperados
- Si las comprobaciones n.º 1 y n.º 2 son verdaderas, se cumple la condición de fallo y el contenido falla el criterio de conformidad.
Recursos
- WCAG - Input Purposes for User Interface Components (propósitos de entrada para componentes de interfaz de usuario).
-
HTML - Autofilling form controls: the
autocompleteattribute (relleno automático de controles de formulario: el atributo autocomplete).
Cómo lo comprobamos en ADDAW
Este error es uno de los que buscamos en cada auditoría de ADDAW. Se lo entregamos con capturas y la forma de corregirlo.
Basado en la técnica F107 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.