aria-autocomplete

Cuándo utilizarlo

En un role="combobox" o role="textbox" personalizado que ofrece sugerencias mientras el usuario escribe. El atributo indica a la tecnología de asistencia qué tipo de comportamiento de autocompletado se puede esperar, de modo que el usuario pueda anticipar si debe mirar en el propio campo de entrada, en una lista emergente o en ambos.

No se debe colocar en un <input type="text"> nativo sin mecanismo de sugerencias: no habría nada que anunciar.

Este atributo se confunde con frecuencia con el atributo HTML autocomplete. Son distintos. El autocomplete de HTML ("email", "current-password", "street-address", …) indica al navegador cómo rellenar el campo. aria-autocomplete indica a la tecnología de asistencia qué patrón de interfaz de usuario ha implementado el desarrollador. Ambos pueden aparecer en el mismo campo de entrada sin conflicto.

Cómo se comporta

Acepta cuatro valores de tipo token:

• "none": valor predeterminado. El cuadro de texto no realiza autocompletado. Generalmente no es necesario establecerlo de forma explícita.
• "inline": a medida que el usuario escribe, el texto sugerido se añade al propio campo, normalmente seleccionado para que la siguiente pulsación de tecla lo reemplace.
• "list": las sugerencias aparecen en una ventana emergente separada (habitualmente un role="listbox"). El valor del campo no cambia de forma automática.
• "both": ambas opciones a la vez: la lista emergente es visible y la sugerencia principal se inserta en línea en el campo.

Se debe usar el valor que corresponda a lo que implementa realmente el componente. Si el combobox muestra un menú desplegable de opciones pero no modifica el campo mientras el usuario escribe, el valor correcto es "list", no "both".

Errores frecuentes

• Confundirlo con el atributo HTML autocomplete. Se parecen, hacen cosas distintas y normalmente se necesitan los dos.
• Establecer aria-autocomplete="list" sin también establecer aria-controls apuntando al listbox y aria-expanded para reflejar el estado abierto/cerrado.
• Establecer aria-autocomplete="both" cuando el campo nunca se rellena automáticamente. El usuario escucha la indicación y espera una sugerencia en línea que nunca llega.
• Poner aria-autocomplete en un control que no es un cuadro de texto ni un combobox, por ejemplo un botón. El atributo se ignora.
• Olvidar gestionar aria-activedescendant para la opción resaltada en la lista. El usuario escucha que existen sugerencias, pero no puede saber cuál está activa en ese momento.
• Codificar aria-autocomplete="list" de forma fija sin comprobar la salida del lector de pantalla. Muchas tecnologías de asistencia tienen patrones de anuncio inconsistentes, y un valor incorrecto produce frases confusas.

Ejemplo

<label for="city">City</label>
<input
  id="city"
  role="combobox"
  type="text"
  autocomplete="address-level2"
  aria-autocomplete="list"
  aria-controls="city-listbox"
  aria-expanded="true"
  aria-activedescendant="city-opt-3"
>
<ul id="city-listbox" role="listbox">
  <li id="city-opt-1" role="option">Bristol</li>
  <li id="city-opt-2" role="option">Birmingham</li>
  <li id="city-opt-3" role="option">Brighton</li>
</ul>