En resum
Què es comprova
que existeixi una zona de contingut principal declarada i que les llistes facin servir marcatge de llista.
Què diu la norma
l’estructura que es percep mirant també s’ha de poder determinar en el codi (criteri 1.3.1 de les WCAG, nivell A).
Per què importa
qui navega amb lector de pantalla o només amb teclat fa servir aquesta estructura per saltar; si no hi és, recorre la pàgina sencera.
Severitat a Wakaris
Millora. Apareix al 29,9 % de les pàgines analitzades pel checker.
Què és i què mesura aquesta troballa
L’estructura semàntica és la part del codi que diu què és cada cosa, no com es veu. Un menú de navegació, el cos de l’article, una llista de característiques: per a qui mira la pantalla, tot això es distingeix per la posició, la mida i les vinyetes. Per a qui no la mira, només existeix si està escrit en el marcatge.
Aquesta troballa mira dues peces d’aquesta estructura. La primera és la zona de contingut principal: la part que conté el contingut propi de la pàgina, separada de la capçalera, el menú i el peu que es repeteixen a totes. La segona és l’estructura de les llistes: si el que es veu com una llista està construït amb els elements de llista de l’HTML o només ho sembla.
Totes dues responen al mateix criteri de les WCAG, l’1.3.1, de nivell A: la informació, l’estructura i les relacions que es transmeten visualment s’han de poder determinar des del codi.
Com es comprova
Wakaris analitza l’URL que li indiquis i et retorna dos resultats independents: si la pàgina declara o no la seva zona de contingut principal, i quants problemes d’estructura troba a les seves llistes. És la via directa per tenir-ho sense instal·lar res ni crear compte.
El segon resultat es llegeix per trams. Un sol problema de llista ja produeix troballa, i a partir de deu el resultat escala. Aquesta diferència orienta l’arranjament: un cas solt sol ser un bloc concret mal escrit, mentre que una desena o més apunta a la plantilla o a l’editor amb què es redacta el contingut.
Sobre l’abast convé ser precís en dos punts. La comprovació es fa sobre una adreça concreta, així que descriu aquesta pàgina; si la plantilla és comuna, el més probable és que el resultat es repeteixi, però això no ho afirma aquesta anàlisi. I el que es comprova és el marcatge, no la intenció: una llista visual construïda amb guions i salts de línia es veu com una llista per a qui mira, i des del codi no hi ha res que la delati com a tal.
Per què importa
El motiu és que l’estructura és la que permet moure’s ràpid. La documentació del W3C ho diu sense embuts en justificar el criteri de saltar blocs repetits: qui fa servir lector de pantalla s’estalvia així haver d’escoltar tota la capçalera i desenes d’enllaços de navegació a cada pàgina abans d’arribar al contingut, i qui navega només amb teclat hi arriba amb moltes menys pulsacions.
Amb les llistes passa una cosa semblant a menor escala. El W3C assenyala que algunes ajudes tècniques permeten navegar de llista en llista o d’element en element, i saltar-se un grup d’enllaços si l’usuari vol. Una llista que només ho sembla perd aquesta capacitat: es llegeix com un paràgraf llarg i ni s’anuncia ni es pot esquivar.
Hi ha, a més, un efecte que va més enllà de l’accessibilitat: un document el codi del qual distingeix el contingut propi del que es repeteix és més fàcil d’interpretar per a qualsevol sistema que el llegeixi sense veure’l, cercadors inclosos.
Causes habituals
El més habitual no és un error, sinó una omissió: el disseny es resol amb contenidors genèrics i estils, i ningú no arriba a declarar què és cada bloc.
A la zona principal, la causa més freqüent és una plantilla construïda sencera amb contenidors neutres, on el contingut es distingeix per la seva posició i les seves classes però cap element no diu «això és el principal». També apareix quan la plantilla original sí que ho declarava i una personalització posterior ho va substituir.
A les llistes, l’origen sol ser en el contingut més que en la plantilla. Textos enganxats des d’un processador de textos que porten guions o asteriscs al principi de cada línia i salts de línia entre elles. Llistes convertides en quadrícules de targetes, on cada targeta és un contenidor solt. I menús o galeries on s’han colat elements que no són de llista dins del contenidor de la llista, cosa que l’HTML no admet: els seus únics fills permesos són els elements de llista.
Com solucionar-ho
Els dos arranjaments són d’esforç molt diferent, i l’ordre importa. Wakaris et diu quin dels dos resultats ha fallat, i amb això ja saps per on començar.
Declarar la zona principal és gairebé sempre un canvi d’una línia a la plantilla: embolcallar el contingut propi de la pàgina amb l’element que l’HTML reserva per a això. Dues regles que convé respectar: només hi pot haver una zona principal visible per document, i a dins hi va el contingut propi, no la capçalera, el menú ni el peu. És l’arranjament més rendible de la troballa, i a més habilita l’enllaç de salt al contingut que agraeix qui navega amb teclat.
Amb les llistes la feina és de repàs. Converteix en llistes reals el que es veu com una llista, amb la variant ordenada quan l’ordre significa alguna cosa. Revisa que dins del contenidor només hi hagi elements de llista. I si el problema ve del contingut, l’arranjament durador és en com es redacta: fer servir el botó de llista de l’editor en lloc de guions.
Esquema d’una pàgina amb la capçalera, el menú i el peu atenuats i la zona de contingut principal ressaltada
Brief per generar la imatge
Il·lustració editorial per a una guia tècnica de Wakaris. Tema: Esquema d’una pàgina amb la capçalera, el menú i el peu atenuats i la zona de contingut principal ressaltada. 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, pàgina, capçalera, atenuats, contingut, principal, ressaltada
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: Estructura semàntica. Vol dir que la meva pàgina no declara en el seu codi l’estructura que sí que es veu en pantalla. Es comproven dues coses: si existeix una zona de contingut principal declarada, i si les llistes estan construïdes amb marcatge de llista. Referència: el criteri 1.3.1 de les WCAG 2.2, de nivell A, demana que l’estructura que es percep visualment també es pugui determinar des del codi. Enganxa aquí el resultat de Wakaris: si t’ha fallat la zona de contingut principal, quants problemes de llistes t’ha comptat 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) Quin dels dos resultats t’ha fallat: la zona de contingut principal, les llistes o tots dos? c) Si són les llistes, quants problemes t’ha comptat: un o dos, o més de deu? d) El contingut de la pàgina l’escriviu amb un editor visual, o va a la plantilla? e) Feu servir una plantilla comprada o feta a mida? L’heu personalitzada? f) Si cal tocar 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 directament en producció, reemplaçar blocs de contingut) sense avisar-me abans del risc i que convé una còpia de seguretat o un entorn de prova. 6. No em proposis afegir marcatge semàntic decoratiu per acumulació. Si em suggereixes marcar alguna cosa, digues-me què és exactament aquest bloc i per què aquest marcatge el descriu. 7. Si necessites una dada que només s’obté analitzant la web (confirmar el recompte real, en quins blocs és 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. 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/estructura-semantica 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: Estructura semàntica. Consisteix que la pàgina no declari en el seu codi l’estructura que es veu en pantalla: que no marqui quina és la seva zona de contingut principal, o que les seves llistes no estiguin fetes amb marcatge de llista. Referència: el criteri 1.3.1 de les WCAG 2.2, de nivell A. 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 mirant el codi de la pàgina, i tu no pots analitzar 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) En quina plataforma és la teva web i amb quina plantilla? (WordPress, Shopify, web a mida, una altra; o no ho sé) b) La plantilla és l’original o l’heu personalitzada força? c) El contingut l’escriviu en un editor visual o el maqueta un tècnic? d) Quan escriviu llistes, feu servir el botó de llista de l’editor o escriviu guions al principi de cada línia? e) Teniu blocs que es veuen com a llistes però són targetes o columnes de disseny? f) Algú ha revisat alguna vegada 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 i quina de les dues parts seria la sospitosa, 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 dirà si falta la zona de contingut principal, quants problemes de llistes hi ha 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-lo 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/estructura-semantica 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
Puc tenir diverses zones de contingut principal? +
No. La documentació de MDN és explícita: un document no ha de tenir més d’una zona principal que no estigui oculta. Si la teva plantilla en declara diverses, el resultat deixa de ser útil, perquè ja no identifica una única destinació on saltar.
Una llista de targetes compta com a llista? +
Depèn de com estigui construïda, no de com es vegi. Si cada targeta és un contenidor solt, no hi ha llista per a qui no mira la pantalla. Si van dins d’un contenidor de llista i cada targeta és un element de llista, sí, encara que el disseny sigui una quadrícula.
Què passa si escric les llistes amb guions? +
Que es veuen com una llista i es llegeixen com un paràgraf. El W3C descriu just aquest cas: posar un símbol al principi de cada línia i separar-les amb salts de línia no crea una llista, i qui fa servir una ajuda tècnica perd la possibilitat de recórrer-la o de saltar-se-la.
Això afecta el posicionament? +
No de manera directa ni declarada. El seu efecte és d’accessibilitat i de comprensió: un codi que distingeix el contingut propi del repetit és més fàcil d’interpretar per a qualsevol sistema que llegeixi la pàgina sense veure-la. Tracta-ho com a qualitat estructural, no com una palanca de posicions.
Fonts citades
- w3.orgUnderstanding Success Criterion 1.3.1: Info and Relationships, W3C: el criteri de nivell A que exigeix que l’estructura percebuda visualment es pugui determinar des del codi.
- w3.orgUnderstanding Success Criterion 2.4.1: Bypass Blocks, W3C: el cost de no poder saltar els blocs repetits, en escolta per al lector de pantalla i en pulsacions per al teclat.
- w3.orgH48: Using ol, ul and dl for lists or groups of links, W3C: la navegació de llista en llista i d’element en element, i el cas de les llistes fetes amb símbols i salts de línia.
- developer.mozilla.org<main>: The Main element, MDN: què conté la zona principal, la regla d’una sola per document i l’enllaç de salt al contingut.
- developer.mozilla.org<ul>: The Unordered List element, MDN: els únics fills permesos dins del contenidor d’una llista.
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.