L’etiqueta “autocomplet” a formularis web

Quan un usuari torna a emplenar un formulari diferent del ja completat, el navegador pot oferir suggeriments basats en la informació emmagatzemada prèviament. Això estalvia temps i facilita la tasca d’emplenar-lo. No obstant això, quan la funció “autocomplet” no està configurada correctament, podeu presentar barreres d’accessibilitat per a alguns usuaris.

Per exemple, les persones amb discapacitats visuals o de motricitat poden trobar difícil completar els formularis sense aquesta característica. És per això que és important que els desenvolupadors de llocs web afegeixin l’etiqueta “autocomplet” als camps de formulari apropiats, indicant quin tipus d’informació s’espera a cada camp.

En resum, l’etiqueta “autocomplet” és important per millorar l’accessibilitat i la usabilitat dels formularis web per a una àmplia varietat d’usuaris, especialment aquells amb discapacitats o limitacions físiques.

Com s’insereix en HTML?

1. Identifica els camps del formulari: Identifica els camps del formulari als quals vols afegir l’etiqueta “autocomplet”.
2. Afegeix l’etiqueta “autocomplet” als teus camps de formulari: Per afegir l’etiqueta “autocomplet” als teus camps de formulari, simplement afegeix l’atribut “autocomplet” al codi HTML i assigna el valor corresponent que s’ajusti al tipus d’informació que se sol·licita en aquest camp. Per exemple, per a un camp de “Nom”, podeu afegir l’etiqueta “autocomplet” amb el valor “name”. Us mostrem alguns exemples:

   See the Pen
   Autocomplet by Taller Agència (@webmastertalleragencia)
   on CodePen.

3. Assigna els valors correctes a l’etiqueta “autocomplet”: Assegureu-vos d’assignar els valors correctes a l’etiqueta “autocomplet” per a cada camp de formulari. Alguns dels valors més comuns inclouen “name” per a camps de noms, “email” per a camps de correu electrònic, “tel” per a camps de telèfon i “address” per a camps d’adreça.

Com sé quin valor correspon a cada camp?

El valor que cal assignar a l’etiqueta “autocomplet” en un formulari depèn del tipus d’informació que se sol·liciti al camp. Els més comuns són:

• “name”: s’utilitza per a camps de nom, com ara “Nom” o “Cognoms”.
• “email”: s’utilitza per a camps de correu electrònic, com ara “Correu electrònic” o “Email”.
• “tel”: s’utilitza per a camps de números de telèfon, com ara “Telèfon” o “Nombre de telèfon”.
• “address-line1”, “address-line2”, “address-level1”, “address-level2”, “postal-code”, “country”: s’utilitzen per a camps d’adreça, com ara “Adreça” o “Codi postal”.

Per obtenir una llista completa de valors d’”autocomplet” i els tipus d’informació que representen, podeu consultar l’especificació HTML de l’etiqueta “autocomplet” al lloc web del World Wide Web Consortium (W3C) oa HTML attribute: autocomplete, on apareixen nombrosos exemples de com es podrien inserir aquests valors.

És important assegurar-se d’utilitzar els valors correctes d’”autocomplet” al formulari per garantir que els usuaris puguin completar el formulari de manera eficient i sense problemes.

Com s’insereix a WordPress amb Contact Form?

Per inserir l’etiqueta “autocomplet” als formularis de WordPress, la seva implementació dependrà del plugin de formulari que es faci servir. En concret per al plugin Contact Form, que és el que fem servir des del teu web Accessible es fa seguint aquests passos:

1. Anar a la secció de Plugins instal·lats.
   <img class="alignnone size-full wp-image-2703" src="https://www.tuwebaccesible.es/wp-content/uploads/2023/04/1.png" alt="Pas 1. Anar a Plugins instal·lats" width="323" height="115
2. Seleccionar el Plugin de contacte que tinguem (en el nostre cas Contact Form 7).
   <img class="alignnone size-full wp-image-2699" src="https://www.tuwebaccesible.es/wp-content/uploads/2023/04/2.png" alt="Pas 2. Seleccionar Configuració de Contact Form" width="236" height="
3. Cerca el formulari que vulguem editar.
   <img class="alignnone size-full wp-image-2700" src="https://www.tuwebaccesible.es/wp-content/uploads/2023/04/3.png" alt="Pas 3. Editar Formulari de contacte" width="335" height="111"
4. Afegir l’etiqueta “autocomplet” amb l’atribut corresponent al vostre camp.
   <img class="alignnone size-full wp-image-2701" src="https://www.tuwebaccesible.es/wp-content/uploads/2023/04/4.png" alt="Pas 4. Inserir l'etiqueta "autocomplet" al camp corresponent" width="6
5. Guardar canvis.
   </

Per què és tan important en matèria d’accessibilitat web?

És determinant tenir l’etiqueta “autocomplet” als camps del teu formulari per així millorar l’accessibilitat i la usabilitat del teu lloc web. D’aquesta manera, tots aquells usuaris que utilitzen tecnologies d’assistència com ara lectors de pantalla o persones amb discapacitats cognitives podran emplenar els diferents camps del formulari sense problemes.

Cal destacar que navegadors com Google Chrome compta amb una implementació pròpia que recorda les dades de contacte de l’usuari per utilitzar-lo en posteriors ocasions. Tot i això, és imperatiu afegir l’etiqueta “autocomplet” als teus formularis, ja que hi podria haver usuaris que tinguin altres navegadors que no comptin amb aquesta implementació.

També és important recordar que, encara que l’etiqueta “autocomplet” pot millorar l’accessibilitat dels vostres formularis, no és l’única característica que cal tenir en compte perquè siguin accessibles. És important seguir totes les pautes establertes per la WCAG per garantir que els vostres formularis siguin accessibles.

Si tens consultes en matèria d’accessibilitat web, contacta amb nosaltres i et resoldrem tots els teus dubtes sobre això.