H98Usar los atributos autocomplete de HTML 5.2

Aplicabilidad

Todos los campos de formulario HTML que se corresponden con los propósitos de entrada para componentes de la interfaz de usuario.

Descripción

El objetivo de esta técnica es vincular por software un término taxonómico predefinido y publicado al campo de entrada, de modo que las entradas también puedan ser interpretadas por una máquina. De esta forma, el campo siempre tendrá asociado un valor común, referenciable e identificable, independientemente del idioma que se use o del término visible en pantalla con el que se etiquete el campo. A partir de ahí puede personalizarse o manipularse por software de otras maneras para ayudar a los usuarios.

La técnica consiste en añadir el token autocomplete adecuado a cada campo del formulario para que las entradas identificadas sean determinables por software. Esto ayudará a las personas con discapacidades cognitivas que quizá no reconozcan de inmediato el propósito del campo porque la etiqueta elegida por el autor no les resulta familiar. Cuando las entradas se han asignado por software, los complementos y programas de terceros pueden manipular estos campos de formulario para hacerlos más accesibles a las personas con discapacidades cognitivas. Por ejemplo, un complemento podría detectar un token autocomplete con la cadena de texto «tel» e insertar un icono de teléfono. Además, permitirá que programas de terceros sustituyan las etiquetas existentes por etiquetas de texto que al usuario le resulten más familiares. Por ejemplo, podría cambiar «Given Name» (nombre de pila) por «First Name» (nombre).

El atributo autocomplete también mejora la capacidad del navegador para rellenar previamente los campos de formulario con los valores preferidos por el usuario. Cuando el campo se ha «etiquetado» correctamente con el valor de token conocido, el valor introducido por el usuario se almacena localmente en el equipo y se asocia al valor del token para reutilizarlo. Ayuda a las personas con discapacidades de destreza que tienen dificultades para teclear, a quienes necesitan más tiempo y a cualquiera que desee reducir el esfuerzo de rellenar un formulario.

El atributo autocomplete permite al navegador comparar patrones con una lista de valores almacenados localmente en el navegador y suministrar el valor correspondiente adecuado cuando el campo está etiquetado por software. Es un ajuste del usuario que la persona usuaria final puede activar, desactivar o modificar. Esto reduce la escritura y la dependencia de la memoria, porque usa valores almacenados para rellenar los campos.

Es importante señalar que el criterio de conformidad Identificación del propósito del campo y el atributo autocomplete solo imponen requisitos a los campos de entrada que recogen información sobre el usuario.

Para el criterio de conformidad, se da por supuesto que el atributo autocomplete no se usa en campos de formulario que no se correspondan con un campo de autocompletado descrito en la especificación del atributo autocomplete de HTML. Si el campo autocomplete se usa para describir una taxonomía «personalizada», en lugar de la descrita en la especificación, esta regla puede producir resultados incorrectos.

Ejemplos

<form method="post" action="step2">
  <div>
    <label for="fname">First Name</label>
    <input autocomplete="given-name" id="fname" type="text">
  </div>
  <div>
    <label for="lname">Last Name</label>
    <input autocomplete="family-name" id="lname" type="text">
  </div>
  <div>
    <label for="cc-num">Credit card number:</label>
    <input autocomplete="cc-number" id="cc-num" type="text">
  </div>
  <div>
    <label for="exp-date">Expiry Date:</label>
    <input autocomplete="cc-exp" id="exp-date" type="month">
  </div>
  <div>
    <input type="submit" value="Continue">
  </div>
</form>

Pruebas