Encapçalaments i accessibilitat. Aspectes que cal tenir en compte.

Els encapçalaments són un dels aspectes bàsics que cal considerar a l'hora de fer que un lloc web sigui accessible. Moltes vegades, en ser un aspecte tan bàsic, es dedica menys esforç del necessari a reflexionar sobre ells i a implementar una bona estructura d’encapçalaments al web.

A continuació, plantegem una aproximació des del punt de vista de l'accessibilitat.

Criteris WCAG que cobreixen la gestió d’encapçalaments

En primer lloc, hem de considerar les fonts d'informació que tenim a l'hora de considerar si el nostre web és accessible o no en relació a l’ús d’encapçalaments. En aquest sentit, sempre ens haurem de guiar per les WCAG (Web Content Accessibility Guidelines ) de la WAI (Web Accessibility Iniciative). En aquest estàndard que es pren com a referència quant a accessibilitat web per la normativa vigent, hi ha diversos criteris que fan referència a l'ús d’encapçalaments:

• 1.3.1 Informació i relacions (nivell A): Aquest criteri fa referència al fet que la mateixa informació que es transmet de manera visual al web s'ha de transmetre a les tecnologies d'assistència com els lectors de pantalla. En el cas dels encapçalaments, bàsicament, hem d'indicar-los amb les etiquetes h1-h6 d'HTML o utilitzant el role =” heading ” d'ARIA juntament amb un atribut arialevel que ens indiqui el nivell de l’encapçalament. A més, cal verificar que no hi ha salts de nivell (no es pot saltar d'un h1 a un h3).
• 2.4.6 Encapçalaments i etiquetes descriptives (nivell AA): És el criteri que cobreix específicament els encapçalaments. Aquest criteri s'assegura que els nostres encapçalaments siguin descriptius i que s'adeqüin a una estructura lògica de la informació. Per això, és important que ens assegurem que els encapçalaments sense el contingut tindrien sentit. Per exemple, en el cas d'aquest article no són del tipus “Introducció”, “Explicació” o “Conclusions”, sinó que amb una llista dels títols podem fer-nos una idea de l'organització de la informació a l'article.
•  2.4.1 Saltar blocs (nivell A): Un dels grans oblidats a l'hora de considerar els encapçalaments. Aquest criteri ens indica que hem de facilitar un mecanisme als usuaris perquè puguin evitar els blocs amb informació repetitiva a cada pàgina, com el menú. Oferir encapçalaments al principi de cada secció, si aquests estan organitzats correctament, és una tècnica suficient per passar aquest criteri. De totes maneres, fins i tot complint amb això, recomanem encaridament que s'hi afegeixi un mecanisme alternatiu com un enllaç per “Saltar al contingut principal”.
• 2.4.10: Encapçalaments de secció (nivell AAA): En aquest cas, se'ns planteja que la pàgina hauria d'estar organitzada amb encapçalaments i que cada secció del contingut ha de tenir-ne un. S'inclou al nivell AAA, com s'especifica al criteri, perquè no tot el contingut el pot complir. Per exemple, si incloem en una web un document existent que no té capçaleres de cap tipus.

Bones pràctiques per a una estructura d’encapçalaments accessible

És important recordar que l'accessibilitat no és una qüestió de “complir” o de marcar un “ check ” un cop complim els criteris. L'accessibilitat és un treball constant de posar l'usuari i les seves circumstàncies i necessitats diverses al centre del procés de desenvolupament d'un projecte. A més, l'accessibilitat sempre “suma” i ens ajuda en altres aspectes com ara la usabilitat o fins i tot el posicionament web. Com a exemples de bones pràctiques podem considerar:

• Que l’organització visual de la informació a través dels encapçalaments sigui equivalent a l’organització no visual. Més enllà que complim el criteri, podem reflexionar sobre si l'estructura d’encapçalaments h1-h6 és similar a la que es reflecteix de manera visual a través de diferents mides i decoracions de la tipografia.
• Que els encapçalaments hagin de tenir una estructura lògica i que siguin descriptives ens pot ajudar també en el posicionament SEO de la web.
• Tot i que està permès i fins i tot contemplat en els exemples de la WAI, no és recomanable que, en iniciar l'estructura, un encapçalament de nivell inferior precedeixi un de nivell superior al DOM. És a dir, que el primer de la pàgina sigui un h2 en lloc d'un h1. En optar per una solució d'aquest tipus, cal considerar si realment és necessari fer-ho i quines implicacions tindrà per als usuaris.

Problema comú: accessibilitat i encapçalaments

Precisament la situació comentada a l'últim punt de les bones pràctiques, tenir un encapçalament de nivell inferior que precedeix un de nivell superior al DOM, és una situació que ens trobem de forma força habitual.

A mesura que ens anem allunyant temporalment de la creació de la World Wide Web, les aplicacions web se n'han anat fent més complexes. Ja no tenim molts llocs web que funcionin com a "documents" bàsics amb un títol i alguns subtítols per organitzar la informació. Ens trobem amb tota mena d'aplicacions i estructures. En aquest sentit, en molts projectes es planteja la qüestió:

El títol de la pàgina ha de ser el títol del meu web (normalment el logo) o el títol del contingut? 

És una pregunta habitual que ens trobem a molts projectes. Si la responem estrictament des del punt de vista de l’organització del contingut i de l’accessibilitat, la resposta és que el títol del web ha de ser el h1. Des d'una perspectiva de la lògica de l'organització de la informació, tot el contingut que hi hagi a la pàgina “depèn” del títol del web. Per exemple, si el títol del web és “Un blog diferent” i el títol del contingut és “El meu primer article”, el més lògic és que tot el contingut de la pàgina pengi de “Un bloc diferent” que seria el h1. D'aquesta manera, si, per exemple, al footer hi ha un encapçalament (“Enllaços d'interès”) aquest penjarà del títol del web. D'altra manera, semblaria que els “Enllaços d'interès” pertanyen a “El meu primer article” (que seria l'h1) i tindríem a més “Un blog diferent” com un h2 que està abans del títol principal de la pàgina. Per veure-ho més clarament:

En el primer cas trobaríem:

• <h1>Un blog diferent</h1>
• <h2>El meu primer article</h2>
• <h2>Enllaços d'interès</h2>

En el segon cas:

• <h2>Un blog diferent</h2>
• <h1>El meu primer article</h1>
• <h2>Enllaços d'interès</h2>

Seria més recomanable el primer cas.

No obstant això, no podem obviar que cada cop més webs utilitzen una estructura amb una barra de menú que conté el logo i els enllaços de navegació i, a continuació, el contingut del web. És cert que en aquests casos seria estrany que totes les pàgines del web tinguin el mateix h1 (l'alternativa textual al logotip) i que el títol del contingut, que realment actua visualment com a encapçalament de primer nivell, sigui un h2. És per això que, en aquests casos, es pot considerar que el títol del contingut sigui el h1. La nostra recomanació, per evitar que quedi un h2 abans de l'h1 amb el títol del lloc, és tractar aquest logo (i la seva alternativa textual) o text com a enllaç de navegació. Realment, podríem dir que visualment actua com a tal perquè ja és un estàndard trobar un logotip al menú i saber que la seva utilitat és navegar fins a la pàgina d'inici. En aquest cas trobaríem:

El logo o títol del lloc:

• <a href ="#" aria- label ="Un blog diferent"><img src ="logo.png" alt =""></a>

L'estructura d’encapçalaments:

• <h1>El meu primer article</h1>
• <h2>Enllaços d'interès</h2>

Seria una estructura d’encapçalaments correcta i fins i tot considerada per la WAI, però, com podem observar, no solucionem el problema de la lògica d'informació perquè “Enllaços d'interès” (encapçalat al footer) segueix semblant que pertany a “El meu primer article ”.

Per solucionar aquest problema una recomanació seria l'ús de les page regions d'HTML (header, footer, nav, aside, etc.) que ens permeten definir quin contingut és el principal i quin contingut, com seria el cas dels enllaços d'interès, és complementari (per exemple, col·locant-ho dins de la regió "aside"). El tema de les regions (i dels aria landmarks ) és extens i el tractarem específicament en un altre article.

Checklist per testejar l'accessibilitat dels encapçalaments

• Només hi ha un h1 a la web
• No hi ha salt de nivell entre encapçalaments (no passa d'un h1 a un h3 o d'un h2 a un h4).
• Els encapçalaments són descriptius. 
• Els encapçalaments del web estan correctament identificats com a tals utilitzant les etiquetes h1-h6 d'HTML o el role =”heading” d'ARIA acompanyat de l'atribut aria-level indicant el nivell.

Com testejar els encapçalaments

A l'hora de testejar, ens poden ser útils:

• L'extensió HeadingsMap per obtenir a nivell visual una llista d’encapçalaments.
• La guia de WebAIM per testejar amb lector de pantalla.

Alejandro Suárez Domínguez.