Què és la jerarquia d’encapçalaments?
Els encapçalaments HTML (H1, H2, H3, H4, H5, H6) estructuren el contingut d’una pàgina de forma jeràrquica, com el sumari d’un document. H1 és el títol principal, H2 son les seccions principals, H3 son subseccions dins d’un H2, i així successivament.
El criteri WCAG 1.3.1 exigeix que la informació i les relacions del contingut siguin perceptibles programàticament. Aplicat als encapçalaments, significa que l’estructura ha de tenir sentit per a un lector de pantalla, no només visualment.
Per què és important per a l’accessibilitat?
Els usuaris de lectors de pantalla naveguen freqüentment per una pàgina saltant d’encapçalament en encapçalament, igual que una persona amb visió escaneja visualment els títols d’un article. Quan un lector de pantalla com NVDA o JAWS llegeix una pàgina, permet a l’usuari demanar una llista de tots els encapçalaments per navegar-hi directament.
Si una pàgina salta de H1 a H3 directament, el lector de pantalla informa d’un alt de nivell que desorientació l’usuari. Si una pàgina té múltiples H1, l’usuari no pot identificar quin és el títol principal. Si els encapçalaments s’usen per estil (un H3 petit perquè és «bonic») en lloc d’estructura, el document no té sentit auditiu.
Regles bàsiques
Una sola H1 per pàgina
Cada pàgina ha de tenir exactament un H1 que descrigui el contingut principal. Ha de coincidir o ser molt similar al títol de la pàgina i al meta title. Tenir dos H1 confon els lectors de pantalla i dilueix el senyal SEO.
No saltar nivells
Pots passar de H2 a H3, de H3 a H4, però no pots saltar de H2 a H4 directament. L’ordre ha de ser seqüencial en profunditat.
Els encapçalaments son per estructura, no per estil
Si vols que un text sigui gran i en negreta, usa CSS. No uses H2 perquè et sembla gran. No uses H5 perquè és petit i discret. L’elecció del nivell ha de basar-se en l’estructura del contingut.
Exemples de jerarquia correcta i incorrecta
— MAL: salt de nivell —
H1: Serveis d’accessibilitat web
H3: Auditoria WCAG (falta el H2!)
H3: Implementació de millores
— MAL: múltiples H1 —
H1: Serveis d’accessibilitat web
H1: Per què triar webaccessible.cat
— CORRECTE —
H1: Serveis d’accessibilitat web
H2: Auditoria WCAG
H3: Revisió automàtica
H3: Revisió manual
H2: Implementació de millores
H2: Testing i validació
Errors habituals en WordPress i Divi
A WordPress, un error freqüent és usar el títol del widget de sidebar com a H2 quan el contingut principal té H2 per a les seccions. Divi per la seva banda permet configurar el nivell d’encapçalament de cada mòdul de títol, però molts usuaris el deixen per defecte sense revisar si és coherent amb l’estructura.
Un altre error comú: el títol principal de la pàgina és un H2 perquè «queda millor visualment» però Divi el renderitza com a H2, i llavors les seccions de sota son H3. Resultat: no hi ha H1 a la pàgina.
Com detectar i corregir els errors
L’eina d’autoevaluació de webaccessible.cat detecta automàticament errors de jerarquia d’encapçalaments: salts de nivell, manca de H1, H1 duplicats. L’informe mostra l’estructura actual i indica on cal fer ajustos.
Per corregir-ho a Divi, ves a cada mòdul de títol o text i comprova el camp «Heading Level» a les opcions de contingut. Ajusta’l per mantenir la jerarquia lògica. Recorda que el títol de la pàgina (el camp Title de WordPress) sol renderitzar-se com a H1 a la majoria de templates.
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.