ACCESSIBILITAT ≠ OVERLAY · 37
Enllaços accessibles: saber on vas abans de fer clic
📅 10 de novembre del 2026 · ⏱ 7 min de lectura
Un enllaç ha d’ajudar a decidir, no obligar a endevinar. El text, el context i el comportament determinen si una persona es pot orientar amb lector de pantalla, teclat, veu o ampliació.
01. Quan tots els camins es diuen «aquí»
Imagina una pàgina de serveis amb vuit enllaços que diuen «més informació». Si veus tota la pàgina, potser relaciones cadascun amb la targeta que l’envolta. Però qui escolta una llista d’enllaços pot rebre vuit noms idèntics. Ha de tornar al contingut, trobar cada bloc i reconstruir la relació amb el destí. Una operació senzilla es transforma en una cerca innecessària.
No afecta només les persones cegues. Qui utilitza ampliació pot veure únicament una part de la targeta; qui navega amb teclat ha de decidir si cada aturada li interessa. Un enllaç descriptiu redueix esforç abans d’activar-lo. La pregunta útil és què pot anticipar la persona amb la informació que realment té disponible.
02. Explica el propòsit, no una ordre buida
«Consulta els horaris d’atenció» permet anticipar millor el destí que «fes clic aquí». «Descarrega la guia d’inscripció» explica més que «descarrega». No cal convertir cada enllaç en una frase interminable: tria les paraules que distingeixen el recurs i evita repetir tot el paràgraf.
El text ha de correspondre al contingut de destí. Si promet «Tarifes del servei» i obre una portada comercial sense tarifes, l’etiqueta no resol la tasca. Revisa també els enllaços després d’actualitzar documents o reorganitzar pàgines. Un nom correcte pot deixar de ser-ho encara que l’URL continuï responent. La precisió editorial forma part de l’accessibilitat i del manteniment quotidià; cal revisar les etiquetes quan canvia allò que descriuen.
03. Context vàlid i comprensió fora de context
Les WCAG 2.2 distingeixen el propòsit de l’enllaç dins del context de l’exigència més estricta d’entendre’l només pel nom. El criteri 2.4.4, de nivell A, permet combinar el text amb un context que el programari pugui determinar. Un paràgraf, un element de llista o una cel·la relacionats poden aportar informació pertinent.
Per tant, «llegeix més» no incompleix automàticament en qualsevol situació. Examina l’associació real i no només la proximitat visual. Encara que el context permeti satisfer el criteri, un nom específic sol facilitar les llistes d’enllaços i l’exploració ràpida. Diferencia la comprovació normativa de la decisió d’oferir una experiència més clara. Una recomanació útil no s’ha de convertir en una regla inventada.
04. El que es veu i el que s’anuncia han d’encaixar
El nom accessible pot provenir del text, d’una imatge o d’un mecanisme com aria-label. Si l’etiqueta visible diu «Contacta» però el nom accessible és completament diferent, qui utilitza control per veu pot tenir dificultats per activar l’enllaç dient el que veu. El criteri 2.5.3 exigeix que el nom contingui el text de l’etiqueta visible quan correspon.
La primera opció acostuma a ser millorar el text visible per a tothom. Evita afegir descripcions ocultes llargues sense comprovar quin nom resulta finalment. L’atribut title tampoc ha de ser l’únic lloc on s’explica el destí: no s’hi accedeix igual amb tots els dispositius. Revisa el nom calculat i escolta’l dins de la interfície real.
05. Una imatge enllaçada també necessita propòsit
Si una imatge és l’únic contingut d’un enllaç, l’alternativa textual ha de transmetre’n la funció. En un logotip que porta a l’inici, interessa identificar aquesta navegació i no descriure cada corba del dibuix. Una lupa enllaçada no hauria de quedar amb un nom d’arxiu com «icona-final-2.svg».
Quan la imatge i el text són dins del mateix enllaç i el text ja explica el propòsit, una imatge decorativa pot tenir l’alternativa buida per evitar repeticions. Revisa també les targetes amb imatge, títol i botó cap al mateix recurs. Diversos enllaços consecutius poden crear aturades redundants. Busca una solució coherent sense niar enllaços ni fer perdre al contenidor la semàntica o la interacció nativa.
06. Enllaç i botó fan feines diferents
Un enllaç navega cap a un recurs o una ubicació. Un botó executa una acció, com obrir un panell o enviar un formulari. Poden tenir una aparença semblant, però el comportament i les expectatives canvien. Utilitza elements natius adequats a la funció; un enllaç sense destí real no és una solució universal per a qualsevol control.
No substitueixis aquesta base per un div amb un esdeveniment de clic i un rol improvisat. També caldria resoldre el focus, l’activació amb teclat i altres comportaments que l’element natiu ja proporciona. Comprova que els enllaços funcionen amb Retorn i que els botons responen segons la interacció esperada. La tecnologia ha d’acompanyar la tasca i no crear una sorpresa a cada component.
07. Descàrregues i canvis de context previsibles
Si un enllaç condueix a un document, identifica’n clarament el tema. Afegir el format i, quan sigui útil, la mida ajuda a decidir si convé obrir-lo des del mòbil o amb una connexió limitada. «Guia d’inscripció, PDF» informa més que una adreça llarga o una icona sense explicació.
Evita obrir pestanyes noves per costum. Quan hi hagi un motiu, avisar del comportament ajuda a mantenir l’orientació. És una bona pràctica que no equival a afirmar que qualsevol pestanya nova incompleix automàticament les WCAG. Un nom perfecte tampoc fa accessible el fitxer de destí. Un PDF sense estructura continua creant barreres. Revisa el recorregut complet des de l’elecció fins a la consulta del recurs.
08. Visibilitat, focus i espai per activar
Els enllaços dins d’un paràgraf s’han de poder identificar sense dependre només del color; el subratllat acostuma a ser una solució clara i estable. Comprova el contrast i evita que l’estat visitat o el focus facin il·legible el text. Cal reconèixer la interacció abans de passar-hi el ratolí.
Recorre els enllaços amb Tab i Maj+Tab. L’indicador de focus ha de ser visible i el component no ha de quedar completament ocult per contingut creat pel lloc quan rep el focus; les WCAG 2.2 tracten aquest últim cas a 2.4.11. Revisa també la separació i els requisits aplicables a la mida dels objectius, amb les excepcions corresponents. Ampliar l’àrea clicable no ha de crear solapaments que activin un altre destí.
09. Prova la decisió abans de comprovar el clic
Tria una tasca real: trobar els horaris o arribar al contacte de suport. Llegeix els noms dels enllaços sense activar-los i anota què esperes trobar. Després segueix el recorregut i compara l’expectativa amb el resultat. Repeteix amb lector de pantalla, llista d’enllaços, teclat i ampliació quan correspongui.
Les eines automàtiques poden detectar determinats noms absents o problemes de contrast, però no decideixen si «més informació» promet el recurs correcte ni si una traducció conserva el sentit. Documenta les ambigüitats amb la ubicació, el nom anunciat i el destí esperat. No valoris tot el web a partir d’un sol enllaç: revisa menús, targetes, peu de pàgina i contingut editorial, que sovint provenen de components diferents.
10. Corregeix l’origen i conserva la claredat
A WordPress i Divi, revisa el text de l’editor, l’HTML i el nom accessible del resultat. Corregeix el mòdul compartit quan moltes targetes repeteixin el problema. Tradueix els noms i comprova que apunten a l’idioma adequat: una etiqueta localitzada no ajuda si el destí canvia inesperadament de llengua.
Un overlay no coneix tot sol la intenció editorial de cada enllaç ni pot garantir que un nom genèric descrigui el recurs correcte. Els ajustos visuals poden complementar la feina, però no substitueixen aquesta decisió. Incorpora una pregunta senzilla a la revisió: pot la persona triar amb criteri abans d’activar? L’accessibilitat millora quan sap on va, arriba al contingut esperat i pot continuar amb autonomia.