Etiqueta cada camp de formulari

Què comprova aquesta auditoria

Recorre cada <input>, <textarea> i <select> de la pàgina i verifica que tinguin un nom accessible per una d’aquestes vies:

• Un <label for="id"> explícit
• Un <label>…<input>…</label> envoltant
• Un atribut aria-label="…"
• Un aria-labelledby="altre-id" que apunti a text visible
• Un atribut title (la pitjor opció: un tooltip al passar el cursor és un recurs inferior, però compta)

La comprovació falla quan un camp no té cap d’aquests i no és un camp ocult, un botó d’enviament o un token csrf.

Per què importa

Un usuari de lector de pantalla emplenant un formulari de pagament sent “edit text, edit text, edit text” en lloc de “número de targeta, caducitat, CVV”. Els camps sense etiqueta són inutilitzables.

• Impacte en la conversió, no només en el compliment. Qualsevol estudi UX sobre formularis de pagament mostra el mateix: les etiquetes visibles als camps (no només placeholders) augmenten la taxa de finalització entre un 10 i un 20%. Els placeholders desapareixen quan comences a escriure, l’usuari no pot revisar què està escrivint.
• Exposició legal. Les etiquetes de formulari són una de les errades WCAG més citades en demandes d’accessibilitat perquè són fàcils de verificar (obre la pàgina amb NVDA i recórrer amb el tabulador). La majoria de queixes de l’ADA Title III contra llocs ecommerce dels EUA inclouen les etiquetes entre les tres infraccions més comunes.
• L’emplenament automàtic funciona millor. Els navegadors i els gestors de contrasenyes utilitzen el text de l’etiqueta per detectar el tipus de camp. Un camp etiquetat “Correu electrònic” s’emplena amb el correu; un <input type="text"> sense etiqueta no.

Com solucionar-ho

Utilitza un <label> visible connectat al camp amb for/id. No confiïs només en el text del placeholder.

El patró canònic:

<label for="email">Adreça de correu electrònic</label>
<input id="email" name="email" type="email" autocomplete="email" required>

Patró envoltant (label com a pare, sense for):

<label>
  Adreça de correu electrònic
  <input name="email" type="email" autocomplete="email" required>
</label>

Botons amb només icona (sense text visible), utilitza aria-label:

<button type="submit" aria-label="Cerca">
  <svg aria-hidden="true">…</svg>
</button>

React amb camps controlats:

<label htmlFor="email">Adreça de correu electrònic</label>
<input
  id="email"
  type="email"
  value={email}
  onChange={(e) => setEmail(e.target.value)}
  autoComplete="email"
  required
/>

(Nota: JSX usa htmlFor, no for, perquè for és una paraula reservada.)

Etiquetes flotants (Material Design, shadcn/ui): l’etiqueta visible s’anima, però l’HTML subjacent ha de continuar emparellant <label for> amb <input id>. Si el teu sistema de disseny amaga l’etiqueta visualment, utilitza class="sr-only" (una utilitat de Tailwind) en lloc d’eliminar l’element:

<label for="search" class="sr-only">Cerca als docs</label>
<input id="search" type="search" placeholder="Cerca…">

No facis això.

• No utilitzis el placeholder com a única etiqueta: desapareix quan comences a escriure i té menys contrast.
• No utilitzis <div> o <span> com a etiqueta: no exposen l’associació a la tecnologia assistiva.
• No reutilitzis el mateix id en diversos camps: l’associació es trenca silenciosament.

Linters i CI. eslint-plugin-jsx-a11y inclou una regla label-has-associated-control. Afegeix-la a la teva configuració i fes fallar el CI quan faltin etiquetes. axe-core / Playwright les poden detectar en temps d’execució, consulta el fragment a la pàgina puntuació d’accessibilitat de Lighthouse.

Preguntes freqüents

És placeholder una etiqueta?

No. Els placeholders són pistes per a camps buits; desapareixen quan el camp rep focus. WCAG diu explícitament que els placeholders no satisfan el requisit d’etiquetes.

I aria-label?

aria-label funciona, però les etiquetes visibles funcionen millor: els usuaris vidents amb discapacitats cognitives, els usuaris amb visió reduïda que utilitzen lupa i els usuaris que tradueixen la pàgina al navegador es beneficien d’un text que poden veure. Utilitza aria-label només quan una etiqueta visible seria redundant (botons amb només icona, camps de cerca amb una icona clara d’enviament).

Necessito una etiqueta per als botons d’enviament?

<button type="submit">Registra't</button> ja té el seu propi text visible, aquest és el nom accessible, no cal cap etiqueta extra. El mateix per a <input type="submit" value="Registra't">. Els botons d’enviament amb només icona necessiten aria-label.