En resum
Què es mesura
botons, enllaços i marcs (iframes) que no tenen un nom que la tecnologia de suport pugui llegir.
Referència
el criteri 4.1.2 de les WCAG, de nivell A, exigeix que el nom de tot component d’interfície es pugui determinar per programari.
Per què importa
sense nom, qui navega amb lector de pantalla o per veu no pot saber què fa el control ni activar-lo amb seguretat.
Severitat a Wakaris
Crític. Falla al 72 % de les pàgines analitzades.
Què és i què mesura aquesta troballa
El nom accessible és el text amb què el programari identifica un control davant de la persona que el fa servir. MDN el defineix com el text associat a un element HTML que dona a qui fa servir tecnologia de suport una etiqueta per a aquell element. Pot ser visible, com el text d’un enllaç, o invisible, com un atribut que només llegeix el lector de pantalla.
Aquesta troballa mira tres tipus de control. Els botons, que prenen el nom del seu propi text; si només contenen una icona, no tenen d’on prendre’l. Els enllaços, que també s’anomenen pel seu contingut; un enllaç que embolcalla una imatge sense text alternatiu es queda sense nom. I els marcs o iframes, que necessiten un atribut title, perquè el lector de pantalla s’atura a la seva frontera i anuncia el rol "marc" seguit d’aquest títol.
La referència és el criteri 4.1.2 de les WCAG, Nom, Rol i Valor: el nom i el rol de tot component d’interfície s’han de poder determinar programàticament. És de nivell A.
Com es mesura
Wakaris carrega la URL que li indiques, construeix la mateixa representació que faria servir un lector de pantalla i revisa cada botó, cada enllaç i cada marc de la pàgina per comprovar si té nom accessible. El resultat és un recompte per tipus de control, amb la instància de cadascun i el fragment de codi on apareix, perquè qui ho arregli sàpiga a quin element ha d’anar.
El nom no es busca en un únic lloc. Seguint el càlcul del nom accessible que documenta MDN, un control el pot prendre del seu contingut de text, de l’atribut alt d’una imatge que contingui, d’un element label associat, d’aria-labelledby apuntant a un text visible, o d’aria-label quan no hi ha cap text visible per associar. Wakaris dona el control per anomenat si qualsevol d’aquestes vies produeix un text no buit.
El llindar és exigent: n’hi ha prou amb un sol control sense nom perquè salti, i la lectura empitjora a mesura que creix el recompte. Un botó sense nom al cercador de la capçalera afecta tota la navegació: el nombre importa menys que on són.
Per què importa
Importa perquè el nom és l’única cosa que una part dels teus visitants rep del control. Les WCAG ho resumeixen així: exposar nom, rol i valor permet la compatibilitat amb tecnologies de suport com lectors de pantalla, magnificadors i programari de reconeixement de veu. Qui navega per veu no pot dir "prem Cercar" perquè el control no es diu així per al programari.
Hi ha un efecte concret als enllaços. Els lectors de pantalla permeten llistar tots els enllaços d’una pàgina per saltar directament al que interessa. Si diversos es diuen "aquí" o "llegir-ne més", o no es diuen de cap manera, aquesta drecera deixa de servir: la documentació de web.dev ho il·lustra amb un menú ple de la paraula "here".
I hi ha un pla de conformitat. El criteri 4.1.2 és de nivell A, el graó més baix de les WCAG: incomplir-lo deixa la pàgina fora de qualsevol nivell de conformitat.
Causes comunes
La causa més freqüent són els botons d’icona: la lupa del cercador, l’hamburguesa del menú, la creu que tanca un avís, les fletxes d’un carrusel. Es dibuixen amb un SVG, una font d’icones o una imatge de fons, i el botó es queda sense text d’on treure el nom. La documentació de web.dev assenyala precisament que un botó sempre intenta calcular el seu nom a partir del seu contingut de text, i que als botons d’icona convé donar-li un nom explícit amb aria-label.
La segona són els enllaços que embolcallen imatges: el logotip que porta a la portada, les miniatures d’una galeria, les xarxes socials del peu. Si la imatge no té alt, l’enllaç no té nom.
La tercera són els iframes sense title: vídeos incrustats, mapes, formularis de tercers, xats. S’enganxen tal com venen del proveïdor i ningú no hi afegeix el títol. Sovint el problema l’arrossega un component extern, no la teva plantilla.
Com es resol
Comença per l’informe de Wakaris: et dona cada control sense nom amb el seu tipus i el seu fragment de codi. Prioritza per ús, no per nombre: cercador, menú, tancament d’avisos i navegació del carrusel abans que una icona decorativa del peu.
Per a un botó d’icona, la solució és un aria-label que digui el que fa el botó, no el que dibuixa: "Cercar", no "lupa"; "Obrir el menú", no "hamburguesa". Si el botó pot portar text visible, encara millor.
Per a un enllaç amb imatge, posa a la imatge un alt que descrigui el destí: "Inici" al logotip, el nom de la xarxa a les icones socials. I evita que el nom acabi sent "aquí" o "llegir-ne més".
Per a un iframe, afegeix-hi title amb el contingut que incrusta: "Vídeo de presentació", "Mapa de la botiga". Després torna a passar la pàgina per Wakaris i comprova que el recompte baixa a zero.
Taula amb les fonts de les quals un botó, un enllaç i un iframe prenen el seu nom accessible: contingut de text, alt, aria-label, aria-labelledby i title
Brief per generar la imatge
Il·lustració editorial per a una guia tècnica de Wakaris. Tema: Taula amb les fonts de les quals un botó, un enllaç i un iframe prenen el seu nom accessible: contingut de text, alt, aria-label, aria-labelledby i title. Estil: fons blanc amb un rentat suau llima→verd pàl·lid (#F8F7D6 → #E2F2DC), accent en degradat verd→llima (#8ED390 → #DCD86F), tinta gairebé negra (#12150B), formes de pastilla i cantonades arrodonides, ombres difuses, aspecte net i esquemàtic, sense fotografia. Format: 16:9, 1440 píxels d’amplada. Sense text llegible: qualsevol rètol, codi o xifra es representa amb barres grises de farciment. El significat el porta el peu de foto, no la imatge. Sense logotips reals ni marques de tercers. Sense persones reconeixibles. Etiquetes: taula, fonts, quals, enllaç, iframe, prenen, accessible, contingut
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 resoldre
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: Noms accessibles de controls. Hi ha botons, enllaços o marcs (iframes) a la meva pàgina que no tenen un nom que un lector de pantalla o el control per veu puguin llegir, així que s’anuncien només com a "botó" o "enllaç". Referència: el criteri 4.1.2 de les WCAG, de nivell A, exigeix que el nom de tot control es pugui determinar per programari; el llindar de Wakaris és zero controls sense nom. Enganxa aquí el resultat de Wakaris: quants controls sense nom hi ha, de quin tipus (botó, enllaç, marc), en 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) Dels controls sense nom, quants són botons, quants enllaços i quants marcs? c) Els botons afectats són d’icona (lupa, menú, tancar, fletxes) o tenen text visible? d) Els enllaços afectats embolcallen imatges (logotip, miniatures, xarxes socials) o són de text? e) Els marcs afectats són contingut de tercers (vídeo, mapa, xat, formulari) o propis? f) El codi d’aquests controls el generes tu, un tema o plantilla, o un connector o component extern? 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é mesurant la web (confirmar quins controls continuen sense nom, o si l’arranjament ha funcionat), digues-m’ho i recomana’m tornar a passar la pàgina per Wakaris: això es mesura, 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/nombres-accesibles-de-controles Per mesurar-ho o tornar-ho a mesurar: 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: Noms accessibles de controls. Consisteix que algun botó, enllaç o marc (iframe) de la meva pàgina no té un nom que un lector de pantalla o el control per veu puguin llegir, i s’anuncia només com a "botó" o "enllaç". Referència: el criteri 4.1.2 de les WCAG, de nivell A; el llindar és zero controls sense nom. 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 MESURA revisant cada control de la pàgina, i tu no pots mesurar 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) La teva web té botons que són només una icona, sense text al costat? (lupa del cercador, menú de tres ratlles, creu de tancar, fletxes d’un carrusel) b) Tens enllaços que són només una imatge? (logotip que porta a l’inici, icones de xarxes socials, miniatures de galeria) c) Incrustes contingut d’altres llocs: vídeos, mapes, formularis, xats? d) En quina plataforma està la teva web? (WordPress, Shopify, web a mida, una altra; o no ho sé) e) Fas servir un tema o plantilla comprat, o un disseny fet a mida? f) Algú ha revisat mai l’accessibilitat de la web, o és la primera vegada que t’ho plantejes? 3. Amb les meves respostes, dona’m una estimació clara de si és PROBABLE o POC PROBABLE que el tingui, i de quin tipus de control seria el sospitós, 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 mesurar-ho, i que ho puc fer gratis i sense crear compte passant la meva web per Wakaris, que em donarà el recompte real de controls sense nom, 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 mesurar-ho resulta que sí que el tinc, digues-me que el pas següent és entendre com m’afecta i com resoldre’l 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/nombres-accesibles-de-controles Per mesurar-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
Quina diferència hi ha entre nom accessible i etiqueta visible? +
L’etiqueta visible la veu tothom; el nom accessible és el text que el programari exposa a la tecnologia de suport, i pot estar amagat. Les WCAG ho diuen així: el nom pot estar amagat i exposar-se només mitjançant tecnologia de suport, mentre que l’etiqueta es presenta a totes les persones. L’ideal és que coincideixin.
Un botó amb una icona i un títol en passar el ratolí ja té nom? +
L’atribut title pot servir de nom com a últim recurs, però és fràgil: no apareix a les pantalles tàctils i alguns lectors l’ignoren o el llegeixen com a descripció. Per a un botó d’icona, la via fiable és aria-label amb l’acció que fa, o text visible dins del botó quan el disseny ho permeti.
Per què "llegir-ne més" compta com a problema si l’enllaç sí que té text? +
Estrictament aquest enllaç té nom, així que Wakaris no el compta com a control sense nom. El problema és d’utilitat: quan un lector de pantalla llista els enllaços de la pàgina, diversos "llegir-ne més" seguits no diuen on va cadascun. Posar dins de l’enllaç el text que descriu el destí ho arregla.
Els iframes de tercers són responsabilitat meva? +
L’atribut title de l’iframe va al teu codi, no al del proveïdor, així que sí que el pots i l’has de posar. El que passi dins del marc depèn del tercer, però el nom del marc, que és el que anuncia el lector de pantalla en arribar-hi, és teu. Wakaris comprova aquest títol a la teva pàgina.
Fonts citades
- w3.orgUnderstanding Success Criterion 4.1.2: Name, Role, Value, W3C WAI: text del criteri, nivell A, definició de nom davant d’etiqueta i tecnologies de suport beneficiades.
- developer.mozilla.orgAccessible name, MDN Web Docs: definició de nom accessible i les vies de les quals es deriva (contingut, alt, label, aria-labelledby, aria-label).
- web.devLabels and text alternatives, web.dev: com calcula el seu nom un botó, l’ús d’aria-label als botons d’icona, el llistat d’enllaços del lector de pantalla i l’atribut title als iframes.
- web.devThe Accessibility Tree, web.dev: què és l’arbre d’accessibilitat i com el lector de pantalla anuncia el rol, el nom, l’estat i el valor de cada element.
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.