En resum
Què es mesura
camps de formulari (quadres de text, caselles, desplegables) sense una etiqueta associada per programari.
Referència
MDN: no n’hi ha prou amb text al costat del camp; cal un element label implícit o explícit. El placeholder no és una etiqueta.
Per què importa
el lector de pantalla llegeix l’etiqueta en entrar al camp i prémer-la porta el focus al camp: sense ella es perden totes dues coses.
Severitat a Wakaris
Crític. Falla al 12 % de les pàgines analitzades.
Què és i què mesura aquesta troballa
Aquesta troballa salta quan a la teva pàgina hi ha camps de formulari sense una etiqueta associada per programari. L’etiqueta és l’element label de l’HTML, que segons MDN representa el rètol d’un element de la interfície. La seva funció no és només mostrar un text al costat del camp: és dir al navegador, i a la tecnologia de suport, que aquest text descriu aquest camp.
L’associació es fa de dues maneres. L’explícita: el camp porta un id i l’etiqueta un atribut for amb el mateix valor. La implícita: el camp va niat dins de l’etiqueta, sense for ni id. Qualsevol de les dues és vàlida.
El que no és vàlid és el que MDN descarta expressament: no n’hi ha prou de tenir text pla adjacent a l’input; la usabilitat i l’accessibilitat requereixen una etiqueta implícita o explícita. Un text que sembla un rètol però no està associat és, per al programari, un paràgraf qualsevol.
Com es mesura
Wakaris carrega l’URL que li indiquis, localitza cada camp de formulari de la pàgina i comprova si té una etiqueta associada: un label amb for que apunta al seu id, un label que l’embolcalli, o un nom accessible donat per una altra via. El resultat és un recompte de camps sense etiqueta, amb la instància i el fragment de codi de cadascun.
El llindar és estricte: la troballa salta des del primer camp sense etiqueta, amb talls addicionals a 3 i a 10 camps que donen idea de la magnitud. La severitat és la del check, Crític, sigui quin sigui el recompte.
Un matís per llegir bé l’informe: l’atribut placeholder, el text gris que apareix dins del camp buit, no compta com a etiqueta. MDN és taxatiu: no és una etiqueta i no s’ha de fer servir com a substitut, perquè desapareix en escriure, no és accessible per als lectors de pantalla i els traductors automàtics se’l poden saltar. Un camp que només té placeholder és un camp sense etiqueta per a Wakaris, igual que per al lector.
Per què importa
Importa perquè l’etiqueta converteix una casella en una pregunta. Sense ella, qui no veu la pantalla sap que hi ha un camp, no què se li demana.
MDN descriu els dos beneficis que es perden. El primer és per a qui fa servir un lector de pantalla: el lector llegeix l’etiqueta quan la persona entra al camp, i així sap quina dada ha d’introduir. Sense associació, sent "camp de text" i endevina pel context. El segon és per a tothom: en prémer o tocar l’etiqueta, el navegador passa el focus al camp. Aquesta zona de pulsació ampliada ajuda qualsevol persona, sobretot en pantalles tàctils.
I hi ha un pla de conformitat. Les WCAG demanen al criteri 3.3.2, de nivell A, etiquetes o instruccions quan el contingut requereix entrada de dades. Aquest criteri no exigeix que l’etiqueta estigui associada; això ho cobreix a part l’1.3.1, Informació i relacions, també de nivell A. Un formulari amb textos al costat dels camps pot complir el primer i fallar el segon, que és el que detecta aquesta troballa.
Causes habituals
Les causes gairebé mai no són una decisió: són maneres de construir formularis que semblen correctes a la pantalla.
La primera és el placeholder com a única etiqueta. És el patró més estès en formularis compactes: el camp diu "Nom" en gris fins que escrius. Es veu net, però MDN adverteix que el placeholder no hauria de ser mai necessari per entendre el formulari i recomana evitar-lo.
La segona és el text solt al costat del camp. Un paràgraf, un span o una cel·la de taula amb el rètol, i al costat el camp, sense for ni niament. Es veu idèntic a un formulari ben fet; per al programari no hi ha relació.
La tercera és l’etiqueta trencada: existeix un label amb for, però l’id del camp ha canviat, està duplicat o el genera un script amb un altre valor. El rètol hi és i l’associació no.
La quarta són els camps generats per components: cercadors de la capçalera, butlletins, formularis de tercers o de constructors visuals que creen el camp sense etiqueta o amb una d’oculta mal enllaçada. Qui munta la pàgina no ha escrit aquest HTML.
Com solucionar-ho
Comença per l’informe de Wakaris: et dona cada camp sense etiqueta amb el seu fragment de codi, i amb això saps de quina causa ve cadascun.
Si el camp té un text al costat que fa de rètol, converteix-lo en un label. La via més senzilla és l’explícita: un id al camp i un for amb el mateix valor a l’etiqueta. Niar el camp dins del label també és vàlid i no necessita identificadors.
Si el camp només té placeholder, afegeix-hi una etiqueta visible. El placeholder pot quedar-se com a exemple del format esperat, que és la seva funció segons MDN, no com a substitut del rètol. Si el disseny no admet etiqueta visible, dona al camp un nom accessible per una altra via, tot i que és menys robust.
Si l’etiqueta existeix però no enllaça, comprova que el for i l’id coincideixen i que l’id és únic a la pàgina. No posis enllaços, botons ni encapçalaments dins del label: MDN adverteix que dificulten activar el camp. Després torna a passar la pàgina per Wakaris i comprova que el recompte baixa a zero.
Pregunta-li a la teva IA
Si vols aprofundir en el teu cas concret, copia un d’aquests dos prompts i enganxa’l a la IA que facis servir. Tria segons la teva situació.
Ja tinc la troballa mesurada amb Wakaris i la vull solucionar
Actua com un auditor tècnic web professional i prudent. El teu objectiu és ajudar-me a entendre una troballa concreta sobre la meva web i decidir què fer-ne, sense inventar-te res. Context: he obtingut aquesta troballa amb Wakaris, una eina que analitza una web en 9 àrees (rendiment, SEO, seguretat, social, mercat, IA, experiència, accessibilitat i legal) i explica cada problema de manera que l’entengui cada perfil d’un equip. La troballa és: Etiquetatge de formularis. Hi ha camps de formulari a la meva pàgina (quadres de text, caselles, desplegables) sense una etiqueta associada per programari, així que un lector de pantalla els anuncia com a "camp de text" sense dir què s’hi ha d’escriure. Referència: cada camp ha de tenir un element label associat, explícit (for i id) o implícit (niat), o un nom accessible per una altra via; el placeholder no compta. El llindar de Wakaris és zero camps sense etiqueta. Enganxa aquí el resultat de Wakaris: quants camps sense etiqueta hi ha, a quina pàgina i, si ho indica, el fragment de codi de cadascun. Si no el tens, digues-m’ho i et diré com obtenir-lo abans de continuar. Regles que has de seguir en tot moment: 1. No donis res per fet sobre la meva web. Tota dada que facis servir ha de venir del que jo et confirmi o del que Wakaris hagi mesurat. Si no ho saps, pregunta-m’ho abans d’afirmar-ho. 2. Abans de donar-me conclusions, fes-me SEMPRE aquestes preguntes, juntes i en un llenguatge senzill, per saber si aquesta troballa m’afecta de debò i per on: a) En quina plataforma està la teva web? (WordPress, Shopify, web a mida, una altra) b) Els camps assenyalats són en un formulari concret (contacte, butlletí, cercador, pagament) o repartits per diversos? c) Aquests camps mostren un text gris a dins (placeholder) com a única indicació, o tenen un rètol visible al costat? d) El formulari el genera un plugin, un constructor visual o un servei de tercers, o l’HTML el va escriure algú del teu equip? e) Pots editar l’HTML del formulari, o només les seves opcions en un tauler? f) Ha canviat recentment el formulari o la plantilla? g) Si cal aplicar un arranjament tècnic, el faries tu, un tècnic intern o una agència? 3. Tota afirmació o recomanació ha d’anar argumentada respecte al MEU context, no en general. Si em recomanes alguna cosa, explica’m per què s’aplica al meu cas. 4. Marca sempre el teu nivell de certesa. Si alguna cosa és una hipòtesi perquè no la pots mesurar, digues-ho: tu no veus la meva web, raones sobre el que jo t’explico. 5. No em proposis canvis tècnics irreversibles o de risc (configuració de servidor, esborrar recursos, canvis directes en producció) sense avisar-me abans del risc i que convé una còpia de seguretat o un entorn de prova. 6. Si necessites una dada que només s’obté comprovant la web (confirmar el resultat real, la pàgina exacta, o si l’arranjament ha funcionat), digues-m’ho i recomana’m tornar a passar la pàgina per Wakaris: això es comprova, no s’endevina. 7. La decisió final és meva, no teva. El teu paper és ajudar-me a entendre i a preparar l’acció, no decidir per mi. 8. Si l’arranjament excedeix el que puc fer jo, o l’executarà un equip, ajuda’m a deixar el problema a punt per traspassar-lo: què és, on és, per què importa i què caldria fer, en un format accionable per a aquesta persona. Font d’aquesta troballa: https://www.wakaris.com/ca/guias/accesibilidad/etiquetado-de-formularios Per comprovar-ho o tornar-ho a comprovar: https://www.wakaris.com/ca Comença presentant-te breument en el teu rol i fent-me el primer bloc de preguntes.
Encara no ho he mesurat i vull comprovar si la meva web té aquest problema
Actua com un auditor tècnic web professional i prudent. Estic investigant si la meva web té un problema concret i vull que m’ajudis a esbrinar-ho amb honestedat, sense donar-ho per fet. Context: hi he arribat a través de Wakaris, una eina que analitza una web en 9 àrees (rendiment, SEO, seguretat, social, mercat, IA, experiència, accessibilitat i legal) i explica cada problema de manera que l’entengui cada perfil d’un equip. El problema que vull investigar és: Etiquetatge de formularis. Consisteix que algun camp de formulari de la meva pàgina (quadre de text, casella, desplegable) no té una etiqueta associada per programari, i un lector de pantalla l’anuncia com a "camp de text" sense dir què es demana. Referència: cada camp ha de tenir un element label associat; el placeholder no compta. El llindar és zero camps sense etiqueta. Encara NO sé si la meva web el té: ho vull esbrinar. Regles que has de seguir en tot moment: 1. El primer i més important: això es COMPROVA sobre la pàgina real, i tu no pots comprovar la meva web des d’aquesta conversa. Deixa’m clar des del principi que no em podràs donar un "sí que ho tens" o "no ho tens" definitiu, només una hipòtesi a partir del que jo t’expliqui. 2. No donis res per fet. Abans de donar-me cap valoració, fes-me SEMPRE aquestes preguntes, juntes i en un llenguatge senzill, per estimar si és probable que tingui el problema: a) Els teus formularis mostren el nom del camp només com a text gris dins de la casella, que desapareix en escriure? b) Si prems el text que hi ha al costat d’un camp, el cursor se situa dins del camp o no passa res? c) Els formularis els genera un plugin, un constructor visual o un servei extern? d) Quants formularis té la web: només contacte, o també cercador, butlletí, registre, pagament? e) En quina plataforma està? (WordPress, Shopify, web a mida, una altra; o no ho sé) f) Algú ha revisat mai l’accessibilitat de la web? 3. Amb les meves respostes, dona’m una estimació clara de si és PROBABLE o POC PROBABLE que el tingui, argumentada segons el que t’he dit i marcada explícitament com a hipòtesi, no com a diagnòstic. 4. Digues-me de manera directa que l’única manera de saber-ho de debò és comprovar-ho, i que ho puc fer gratis i sense crear compte passant la meva web per Wakaris, que em donarà el resultat real, el recompte de camps sense etiqueta amb el fragment de codi de cadascun i de passada l’estat de les altres àrees. 5. Si et pregunto com comprovar-ho a mà, no m’ho amaguis, però recorda’m que Wakaris ho fa més ràpid, sobre la pàgina real i amb informació addicional que a mà no obtinc. 6. Si en comprovar-ho resulta que sí que el tinc, digues-me que el pas següent és entendre com m’afecta i com solucionar-ho en el meu cas concret. 7. La conclusió i la decisió són meves, no teves. Tu m’ajudes a orientar-me. Font d’aquesta troballa: https://www.wakaris.com/ca/guias/accesibilidad/etiquetado-de-formularios Per comprovar-ho: https://www.wakaris.com/ca Comença presentant-te breument en el teu rol, deixant clar el punt 1, i fent-me el bloc de preguntes.
Preguntes freqüents
El placeholder no serveix com a etiqueta? +
No. MDN ho diu sense matisos: el placeholder no és una etiqueta i no s’ha de fer servir com a substitut. Desapareix en escriure, no és accessible per als lectors de pantalla i els traductors automàtics se’l poden saltar. Serveix per donar un exemple del format esperat, no per dir què és el camp.
Quina diferència hi ha entre associar l’etiqueta amb for i id i niar el camp? +
Cap en el resultat: en tots dos casos el navegador associa el text al camp, el lector de pantalla el llegeix en entrar-hi i prémer l’etiqueta porta el focus al camp. L’explícita, amb for i id, permet col·locar l’etiqueta en un altre lloc de l’HTML; la implícita evita inventar identificadors.
Si el text és al costat del camp i es veu clar, per què falla? +
Perquè la relació que veus tu no la veu el programari. MDN és explícit: no n’hi ha prou amb text pla adjacent al camp; cal una etiqueta implícita o explícita. Sense associació, el lector de pantalla anuncia un camp sense nom i prémer el text no porta el focus a la casella.
Un camp pot tenir nom accessible sense un label visible? +
Sí, se li pot donar un nom per altres vies, i Wakaris el dona per etiquetat si aquest nom existeix. Però l’etiqueta visible és la que MDN descriu com a sempre apropiada: la veu tothom, amplia la zona de pulsació i no depèn que la tecnologia de suport interpreti un atribut.
Fonts citades
- developer.mozilla.org<label>: The Label element, MDN Web Docs: què és l’etiqueta, associació explícita i implícita, lectura pel lector de pantalla en entrar al camp, zona de pulsació ampliada i què no posar dins d’un
label. - developer.mozilla.org<input>: The HTML Input element, MDN Web Docs: el placeholder no és una etiqueta ni un substitut, per què, i la insuficiència del text pla adjacent davant d’una etiqueta implícita o explícita.
- w3.orgUnderstanding Success Criterion 3.3.2: Labels or Instructions, W3C WAI: text del criteri, nivell A, la seva intenció i l’aclariment que l’associació correcta la cobreix el criteri 1.3.1.
- web.devLabels and text alternatives, web.dev: les dues maneres d’associar un
labela un camp, el text de l’etiqueta com a zona de clic i el que anuncia el lector de pantalla d’una casella ben etiquetada.
Actualitzat: 7 de setembre de 2026.
Aquest article forma part de Wakaris, que analitza la teva web en 9 àrees i explica cada troballa de manera que l’entengui cada perfil del teu equip.