Enllaços «Salta a»: com evitar errors comuns

Els «mecanismes per saltar blocs de contingut» (coneguts més sovint com a «enllaços salta a») són una funció d'accessibilitat essencial que permet als usuaris evitar els menús de navegació i altres blocs de contingut repetitiu.

La majoria dels CMS (sistemes de gestió de continguts) implementen automàticament el mecanisme per saltar blocs de contingut («enllaços salta a»). Dit d'una altra manera, si crees la teva pàgina web amb un CMS o instal·lant un plugin, és probable que ja tinguis aquest mecanisme, tot i que, malauradament, no sempre funciona.

En alguns casos, el mecanisme funciona perfectament (fins i tot sense que el propietari de la pàgina sàpiga que la web el té). Tot i així, és bona idea comprovar que funciona a la pàgina web.

Qui es beneficia dels «enllaços salta a» de navegació?

Els «enllaços salta a» són importants per a les persones que fan servir només el teclat (sense ratolí) per navegar per Internet. Això inclou les persones que utilitzen lectors de pantalla (programari que converteix el text en àudio o en braille) i altres tecnologies d'assistència.

Els usuaris de teclat naveguen sobretot amb les ordres Tab i Maj+Tab, que mouen el focus del teclat cap amunt i cap avall per la pàgina web.

Si un lloc web té desenes d'enllaços de navegació a la part superior de cada pàgina, potser hauràs de prémer la tecla Tab moltes vegades per arribar al contingut de cada pàgina, cosa que és frustrant, sobretot si fas un procés de diverses pàgines (com el procés de compra d'un article a la web).

Els mecanismes per saltar blocs de contingut solen aparèixer quan l'usuari prem Tab per primera vegada en una pàgina nova. L'usuari pot prémer Retorn per activar-lo i evitar així els elements repetitius que apareixen a tot el lloc web.

Però... i si la meva pàgina no en té? Com l'implemento?

En realitat és simplement un enllaç que apunta al primer element de la pàgina després del bloc de contingut repetitiu. A continuació et deixo el codi perquè el puguis copiar i enganxar a la teva web. Però compte: has de canviar l'identificador pel primer identificador que hi ha després del bloc que vulguis saltar (en aquest cas hem fet servir 'Content').

Al començament del body cal incloure el codi següent, en algun HTML genèric, per exemple el de la capçalera:

<a class='admin-bar skip-link' href='#content'>Salta al contingut principal</a>

I al full d'estils o a la capçalera:

.skip-link{ z-index: 9999; padding: 5px; padding: 0.5rem; font-size: 1rem; color: #000; background: #FFF; position: absolute; top: -5rem;}

.skip-link:focus{top:0;} 

Ens hem d'assegurar que a tota la web el cos del contingut sempre està identificat amb l'id 'content'.

Errors comuns d'accessibilitat amb els «enllaços salta a»:

Les Pautes d'accessibilitat al contingut web (WCAG) exigeixen  «enllaços salta a» en el criteri d'èxit (SC) 2.4.1, 'Bypass Blocks' (Evitar blocs). Aquest és el text complet del requisit:

'Hi ha disponible un mecanisme per saltar blocs de contingut que es repeteixen en diverses pàgines web'.

Hem vist moltes implementacions d'«enllaços salta a» que compleixen el criteri WCAG SC 2.4.1, però que no compleixen altres criteris importants.

Per saber si el mecanisme per saltar blocs de contingut de la teva web millora l'accessibilitat, prova'l i comprova si comet algun d'aquests errors comuns:

1. El text de l'enllaç no explica bé el seu propòsit

Segons el WCAG SC 2.4.4, 'Link Purpose (In Context)' (Propòsit de l'enllaç [en context]), tots els enllaços han de tenir un text que n'expliqui el propòsit. Dit d'una altra manera, els usuaris han de poder entendre exactament quin és el propòsit o la funció de l'enllaç que segueixen.

Si el teu mecanisme per saltar blocs de contingut té un text curt, per exemple 'salta' o 'bypass', alguns usuaris no sabran per a què serveix. És molt millor posar-hi un text una mica més llarg però que els usuaris entenguin. Per exemple, «Ves al contingut» o «Salta al contingut».

2. El mecanisme per saltar blocs de contingut  és invisible.

Molts llocs web tenen aquest mecanisme ocult visualment fins que l'usuari prem la tecla Tab per primera vegada. Això és acceptable, però assegura't que el mecanisme es fa visible quan rep el focus del teclat.

Recorda que l'accessibilitat web no és només per a persones cegues: hi ha persones amb diferents tipus de discapacitat. Molts usuaris de teclat perceben el contingut visualment, i si el teu mecanisme no apareix realment a la pàgina, alguns no el podran trobar.

3. Els mecanismes per saltar blocs de contingut tenen un text amb poc contrast.

Tot el contingut textual ha de mantenir una relació de contrast de color adequada amb el fons (hi ha analitzadors de contrast de color per comprovar-ho). Si no, el text pot ser il·legible per a usuaris amb deficiències en la visió del color i altres discapacitats visuals.

Això també s'aplica al mecanisme. El WCAG SC 1.4.3 exigeix un contrast mínim de 4,5:1 per al text normal i de 3:1 per al text gran. En altres paraules, el text ha de destacar prou sobre el fons perquè tots els usuaris el puguin llegir fàcilment.

4. El lloc web té massa mecanismes per saltar blocs de contingut.

Pots tenir bons motius per afegir més d'un 'enllaç salta a' en una pàgina. Per exemple, si has publicat un article que ocupa diverses pàgines, pots incloure una taula de continguts al començament de cada pàgina. També podries afegir un «enllaç salta a» per al menú de navegació i un altre «enllaç salta a» per saltar la taula de continguts.

És important que recordis que els usuaris de teclat hauran de passar per cada mecanisme per saltar blocs abans d'arribar al contingut. La majoria de llocs web només en necessiten un o dos; si n'afegeixes de més, pensa en com afectaran l'experiència de l'usuari. Les pautes són més eficaces si les apliques abans de crear el contingut, i no després.

Si vols ajuda amb algun problema d'accessibilitat o saber si la teva web és realment accessible per a tots els usuaris, ADDAW et pot ajudar amb una auditoria completa de la teva pàgina web.

Resum.

Punts clau:

1. Enllaços per saltar blocs de contingut:

-Essencials per a l'accessibilitat: permeten als usuaris evitar menús repetitius.

-Alguns CMS implementen els mecanismes per saltar blocs de contingut automàticament o mitjançant algun plugin.

2. Qui se'n beneficia:

-Importants per als usuaris de teclat (sense ratolí), com les persones que fan servir lectors de pantalla.

3. Funcionament:

-Navegació principal amb les ordres Tab i Maj+Tab.

-Eviten la frustració de prémer Tab moltes vegades per arribar al contingut.

4. Errors comuns:

Text confús:

-Ha d'explicar clarament el propòsit; evita termes poc clars o curts com 'salta' o 'bypass'.

-Recomanem un text més descriptiu, com «Ves al contingut» o «Salta al contingut».

5. Enllaç ocult:

-Que estigui ocult visualment és acceptable, però s'ha de fer visible quan rep el focus del teclat.

6. Poc contrast:

-L'«enllaç salta a» ha de tenir un contrast adequat perquè sigui llegible, d'acord amb els estàndards WCAG.

7. Massa enllaços:

-Limita't a un o dos enllaços per no complicar l'experiència de l'usuari de teclat.

8. Ajuda especialitzada:

-Associacions com ADDAW et poden fer una auditoria completa per garantir l'accessibilitat de la teva pàgina web.

Gisela López Ramón

Desenvolupador/a de contingut i gestió de xarxes socials, incloent altres mitjans audiovisuals. El progrés no consisteix en millorar el que ja està fet, sinó en esforçar-se per aconseguir el que encara queda per fer.