En resum
Què es mesura
quants elements interactius de la pàgina són massa petits o estan massa enganxats a un altre.
Referència de la norma
24 per 24 píxels CSS com a mínim (nivell AA de les WCAG 2.2) i 44 per 44 com a objectiu reforçat (nivell AAA).
Per què importa
qui té tremolor, poca mobilitat fina o simplement dits grossos falla la pulsació i acaba activant el que no volia.
Severitat a Wakaris
Millora. Apareix al 31,2 % de les pàgines analitzades pel verificador.
Què és i què mesura aquesta troballa
Un objectiu tàctil és qualsevol zona de la pàgina que respon quan la prems o hi fas clic: un botó, un enllaç, una icona del peu, l’aspa que tanca un avís, la fletxa d’un carrusel. La troballa salta quan algun d’aquests objectius és tan petit, o és tan a prop d’un altre, que encertar-lo deixa de ser trivial.
La referència ve de les WCAG 2.2, la norma d’accessibilitat web del W3C. El seu criteri 2.5.8, de nivell AA, demana que l’objectiu faci almenys 24 per 24 píxels CSS. El criteri 2.5.5, més exigent i de nivell AAA, apuja la recomanació a 44 per 44.
Convé retenir dos matisos des del principi. El primer és que la norma compta la mida i la separació com dues cares del mateix problema: un element petit deixa d’incomplir si està prou aïllat. El segon és que hi ha excepcions previstes, i la més habitual són els enllaços dins d’una frase.
Com es mesura
Wakaris analitza l’URL que li indiquis, recorre els elements amb què es pot interactuar i et retorna quants es queden curts de mida o de separació, juntament amb la severitat de la troballa. És la via directa per tenir el número sense instal·lar res ni crear compte.
El recompte es llegeix per trams, i aquesta és la dada que decideix quanta feina tens per endavant. Un sol element petit ja produeix troballa; a partir de deu, i de nou a partir de trenta, el resultat escala. La diferència entre aquests trams importa més del que sembla: un o dos casos solen ser una icona solta, mentre que trenta apunten que el problema és a la plantilla i es repeteix a cada pàgina del lloc.
Dues precisions sobre l’abast. La mesura es fa sobre una adreça concreta, així que descriu aquesta pàgina i no tot el lloc. I la mida no és un valor absolut: depèn de l’amplada amb què es dibuixa la pàgina, així que el mateix botó pot complir a l’escriptori i quedar-se curt al mòbil.
Per què importa
El motiu de fons l’explica la mateixa documentació del criteri: qui té limitacions de destresa o dificultats amb el moviment fi no aconsegueix activar amb precisió objectius petits. El W3C esmenta expressament el tremolor de mans, l’espasticitat i la tetraplegia, i hi afegeix les persones que tenen dits grossos o fan servir el mòbil amb el artell o amb una part del dit.
Hi ha a més una raó física que afecta tothom: el dit és més gros que un punter de ratolí i tapa just el punt de la pantalla que s’està tocant. Ningú no veu el que està prement en el moment de prémer-ho.
El cost pràctic no és només d’accessibilitat. Fallar la pulsació vol dir activar l’enllaç del costat, tornar enrere i repetir: en un peu amb icones atapeïdes és molest, i en un pas de compra és una fuga directa. Per això convé no llegir la severitat Millora com a sinònim d’irrellevant: el criteri que hi ha al darrere és de nivell AA.
Causes habituals
Gairebé sempre és la mateixa història: un disseny pensat per a ratolí que es trasllada al mòbil sense revisar les zones de contacte. Aquests són els focus que més es repeteixen.
Les icones de xarxes socials del peu, servides a la mida exacta del dibuix i col·locades l’una al costat de l’altra sense marge. Les paginacions i els filtres, on els números o les aspes de treure filtre ocupen el que ocupa el text i res més. Els botons de tancar d’avisos de galetes, finestres emergents i barres promocionals, que solen ser l’element més petit de la pàgina i el que més es prem.
També és freqüent que la zona premible sigui més petita que el dibuix: una icona que es veu gran perquè té un fons decoratiu, però l’enllaç real de la qual només cobreix el traç. I les taules i llistats densos amb enllaços a cada fila, on encabir molta informació en poca alçada deixa les línies enganxades.
Com solucionar-ho
Comença pel número que et doni Wakaris: amb un o dos casos vas a elements concrets, i amb trenta l’arranjament és a la plantilla i compensa fer-lo una vegada per a tot el lloc.
La correcció més rendible no és agrandar el dibuix, sinó la zona que respon. S’aconsegueix afegint farciment al voltant de l’element premible, de manera que la icona continuï veient-se igual i l’àrea que accepta el toc creixi per sota. Sobre aquesta idea, el W3C documenta una tècnica directa: donar al contenidor de l’objectiu una alçada i una amplada mínimes de 24 píxels i centrar-hi l’enllaç, amb un petit marge que impedeixi que dos objectius contigus es toquin.
A partir d’aquí, tres revisions que ho cobreixen gairebé tot. Separa el que estigui enganxat, perquè la norma admet objectius petits si estan ben aïllats. Agranda els botons de tancar, que són els que més es fallen. I comprova el resultat en una amplada de mòbil, no a l’escriptori on el dissenyes: és on el problema es manifesta.
Esquema d’una icona petita amb una àrea premible ampliada mitjançant farciment al voltant, sense canviar la mida visible de la icona
Brief per generar la imatge
Il·lustració editorial per a una guia tècnica de Wakaris. Tema: Esquema d’una icona petita amb una àrea premible ampliada mitjançant farciment al voltant, sense canviar la mida visible de la icona. 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: esquema, icona, petita, premible, ampliada, mitjançant, farciment, voltant
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: Mida dels objectius tàctils. Vol dir que la meva pàgina té elements premibles (botons, enllaços, icones) massa petits o massa junts per encertar-los amb el dit. Referència: les WCAG 2.2 demanen un mínim de 24 per 24 píxels CSS en nivell AA, i en recomanen 44 per 44 en nivell AAA. Enganxa aquí el resultat de Wakaris: quants elements t’ha comptat per sota del mínim i a quina pàgina. 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) Quants elements t’ha comptat l’anàlisi: un o dos, una desena, o més de trenta? c) On són la majoria: al peu, al menú, en una paginació o filtres, en botons de tancar avisos, o repartits pel contingut? d) Aquests elements apareixen a totes les pàgines del lloc o només en aquesta? e) Els enllaços afectats estan solts, o són enllaços dins d’un paràgraf de text? f) Si cal tocar el full d’estils o la plantilla, ho 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 (tocar la plantilla o el full d’estils directament en producció) sense avisar-me abans del risc i que convé una còpia de seguretat o un entorn de prova. 6. Tingues en compte que la norma admet excepcions: un enllaç dins d’una frase, o un objectiu petit que estigui prou separat dels altres, no incompleixen. No em facis agrandar coses que no cal agrandar. 7. Si necessites una dada que només s’obté mesurant la web (confirmar el recompte real, en quina zona són 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. 8. La decisió final és meva, no teva. El teu paper és ajudar-me a entendre i a preparar l’acció, no decidir per mi. 9. Si l’arranjament supera 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/tamano-de-objetivos-tactiles 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: Mida dels objectius tàctils. Consisteix a tenir botons, enllaços o icones massa petits o massa junts per prémer-los amb el dit. Referència: les WCAG 2.2 demanen un mínim de 24 per 24 píxels CSS en nivell AA. 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: la mida dels objectius tàctils es MESURA sobre la pàgina real, 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 el tens" o "no el 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) Quan fas servir la teva web des del mòbil, et passa que prems alguna cosa i s’activa la del costat? b) Tens icones de xarxes socials, d’idioma o de compartir posades en fila i enganxades les unes a les altres? c) Hi ha avisos, finestres emergents o barres que es tanquen amb una aspa petita? d) Tens paginacions, filtres o taules amb molts enllaços en poc espai? e) El disseny es va pensar primer per a escriptori i després es va adaptar al mòbil, o al revés? f) En quina plataforma està? (WordPress, Shopify, web a mida, una altra; o no ho sé) 3. Amb les meves respostes, dona’m una estimació clara de si és PROBABLE o POC PROBABLE que el tingui i en quina zona seria, 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 d’elements afectats 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/tamano-de-objetivos-tactiles 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 mida mínima ha de tenir un botó? +
Les WCAG 2.2 fixen 24 per 24 píxels CSS com a mínim en el seu criteri 2.5.8, que és de nivell AA. El criteri 2.5.5, de nivell AAA, en recomana 44 per 44. El mateix W3C aconsella superar àmpliament el mínim per reduir les pulsacions no intencionades.
Un enllaç dins d’un paràgraf incompleix? +
No. La norma preveu una excepció expressa per als objectius que són dins d’una frase o la mida dels quals depèn de l’alçada de línia del text que els envolta. Un enllaç enmig d’un paràgraf no ha de fer 24 píxels d’alçada per complir el criteri.
I si l’element és petit però està molt separat? +
També hi ha excepció. El W3C la defineix amb precisió: si un cercle de 24 píxels de diàmetre centrat a l’objectiu no toca cap altre objectiu, la mida reduïda s’admet. Per això separar és de vegades millor arranjament que agrandar.
Si és severitat Millora, ho puc deixar per al final? +
Pots prioritzar-ho per darrere del que és crític, però no confonguis Millora amb opcional: el criteri que hi ha al darrere és de nivell AA, el que solen exigir els plecs d’accessibilitat. A més, l’arranjament és barat, sobretot si el recompte apunta a la plantilla.
Fonts citades
- w3.orgUnderstanding Success Criterion 2.5.8: Target Size (Minimum), W3C: el mínim de 24 per 24 píxels CSS, el nivell AA, l’excepció dels enllaços en línia, la del cercle de 24 píxels de diàmetre i les limitacions de destresa que motiven el criteri.
- w3.orgUnderstanding Success Criterion 2.5.5: Target Size (Enhanced), W3C: l’objectiu reforçat de 44 per 44 píxels CSS en nivell AAA, la recomanació de superar el mínim i el fet que el dit tapa el punt que es prem.
- w3.orgC42: Using min-height and min-width on target container to ensure sufficient target spacing, W3C: la tècnica de donar 24 píxels d’alçada i amplada mínimes al contenidor i centrar-hi l’enllaç amb marge.
- developer.mozilla.orgMobile accessibility checklist, MDN: el requisit que els objectius tàctils siguin prou grans per poder-hi interactuar.
Actualitzat: 8 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.