Etiquetes de formulari

Què és una etiqueta de formulari?

Una etiqueta de formulari (element HTML <label>) és el text que descriu el propòsit d’un camp d’entrada: «Nom», «Correu electrònic», «Telèfon». Visualment, és el text que apareix al costat o a sobre del camp. Tècnicament, ha d’estar associat programàticament al camp amb l’atribut for.

El criteri WCAG 4.1.2 exigeix que tots els components de la interfície d’usuari tinguin un nom accessible. Per als camps de formulari, això significa que cada camp ha de tenir una etiqueta que el lector de pantalla pugui llegeixi quan l’usuari hi arriba.

Quin és el problema quan no hi ha etiquetes?

Imagina’t omplint un formulari de contacte mentre un lector de pantalla et llegeix el contingut. Sense etiquetes correctes, el lector de pantalla diu «editar text» en arribar a un camp, sense indicar si és el nom, l’email o el telèfon. L’usuari no sap quin camp està omplint.

El placeholder —el text gris dins del camp que desapareix quan escrius— no és una alternativa vàlida a l’etiqueta. Per dues raons: primer, desapareix en començar a escriure, i l’usuari no pot revisar quin camp estava omplint. Segon, molts lectors de pantalla no llegeixen el placeholder com a etiqueta del camp.

Com associar correctament una etiqueta a un camp

Mètode 1: for i id

El mètode estàndard és usar l’atribut for a l’etiqueta que coincideixi amb l’atribut id del camp. Quan el lector de pantalla arriba al camp, llegeix automàticament l’etiqueta associada.

<label for="email">Correu electrònic</label>
<input type="email" id="email" name="email">

Mètode 2: etiqueta embolcallant el camp

L’etiqueta pot envoltar el camp directament, sense necessitat d’usar for i id:

<label>
  Correu electrònic
  <input type="email" name="email">
</label>

Mètode 3: aria-label

Per a casos on l’etiqueta visible no és possible (com un camp de cerca amb botó), es pot usar aria-label:

<input type="search" aria-label="Cercar al web">

Errors habituals en WordPress

Gravity Forms, el plugin de formularis més usat a WordPress, genera etiquetes correctes per defecte. Però hi ha situacions on els formularis perden les etiquetes:

• Formularis creats manualment amb HTML sense afegir els labels.
• Plugins de formularis de tercers que usen placeholder com a única referència.
• Formularis de Divi amb els camps configurats sense label visible i sense aria-label.
• Formularis importats d’altres eines sense revisar l’accessibilitat.

El cas dels botons d’enviar

El botó d’enviar del formulari també ha de tenir text accessible. Un botó amb text «Enviar» és correcte. Un botó amb una icona de fletxa sense text necessita aria-label=»Enviar formulari» per ser accessible.

Com detectar formularis sense etiquetes

L’eina d’autoevaluació de webaccessible.cat identifica camps de formulari sense etiquetes associades. L’informe indica quins camps estan afectats i la seva ubicació a la pàgina, permetent corregir-los de forma prioritzada.