WCAG 2.4.9: Scopo del collegamento (solo collegamento)

Cosa Significa Questa Regola

\n

WCAG 2.4.9 — Scopo del collegamento (solo collegamento) è un criterio di successo di livello AAA in WCAG 2.1 e 2.2. Richiede che lo scopo di ogni collegamento possa essere determinato dal solo testo del collegamento. A differenza del corrispondente criterio di livello AA, WCAG 2.4.4 (Scopo del collegamento — nel contesto), che consente di dedurre lo scopo del collegamento dal contesto circostante come un’intestazione, un paragrafo o una cella di tabella, la 2.4.9 è significativamente più rigorosa: il testo del collegamento deve essere completamente autoesplicativo, senza alcun affidamento sul contenuto circostante.

\n

Il criterio si applica a tutti gli hyperlink creati con l’elemento <a>, così come a qualsiasi elemento interattivo che abbia un nome accessibile e si comporti come un collegamento. Questo include collegamenti costituiti da immagini (dove l’attributo alt dell’immagine o un aria-label fornisce il nome accessibile), collegamenti con stile di pulsante e collegamenti basati su SVG. Il nome accessibile del collegamento — calcolato dal testo visibile, da aria-label, aria-labelledby o dal testo alternativo dell’immagine — deve da solo comunicare dove porta il collegamento o cosa fa.

\n

Cosa è considerato conforme: Un collegamento soddisfa la 2.4.9 quando un utente che legge solo il testo del collegamento — e nient’altro nella pagina — può comprendere con sicurezza la destinazione o la funzione del collegamento. Ad esempio, un collegamento che recita “Scarica il Rapporto Annuale di Accessibilità 2024 (PDF, 2,4 MB)” è conforme perché tutte le informazioni rilevanti sono contenute nel testo del collegamento stesso. Un collegamento che recita “Leggi l’articolo completo: Come scrivere testi di collegamento accessibili” è anch’esso conforme. Un collegamento immagine con alt='Visualizza i piani tariffari' è conforme perché il testo alternativo è completamente descrittivo.

\n

Cosa è considerato non conforme: Collegamenti il cui testo è “clicca qui”, “leggi di più”, “scopri di più”, “questo”, “qui” o qualsiasi altra espressione significativa solo nel contesto non soddisfano questo criterio. Allo stesso modo, un collegamento che racchiude un’immagine il cui attributo alt è vuoto o assente, lasciando il collegamento senza un nome accessibile, non è conforme. Anche i collegamenti che usano aria-label o aria-labelledby ma il cui nome accessibile calcolato è comunque vago non sono conformi.

\n

Eccezioni ufficiali: WCAG indica esplicitamente un’eccezione — quando lo scopo del collegamento è intenzionalmente ambiguo per tutti gli utenti, non solo per le persone con disabilità. Ad esempio, un collegamento teaser in un gioco di mistero che recita “Procedi” (dove l’ambiguità è parte intenzionale del design) non sarebbe considerato un errore, a condizione che l’ambiguità si applichi universalmente. Questa eccezione è limitata e non dovrebbe essere usata come scappatoia per pratiche scorrette nella scrittura dei testi dei collegamenti.

\n\n

Perché È Importante

\n

Un testo di collegamento significativo è uno dei miglioramenti di accessibilità più incisivi che un sito web possa apportare. Le popolazioni più direttamente colpite da testi di collegamento vaghi sono le persone che usano screen reader, chi naviga tramite tastiera, le persone con disabilità cognitive e chi utilizza software di controllo vocale.

\n

Le persone che usano screen reader — tipicamente persone cieche o con grave ipovisione — navigano spesso una pagina richiamando un elenco di tutti i collegamenti. Screen reader diffusi come NVDA, JAWS e VoiceOver offrono tutti questa funzionalità, che estrae il nome accessibile di ogni collegamento e li presenta come elenco autonomo. Quando i collegamenti recitano “clicca qui”, “leggi di più” o “dettagli”, questo elenco diventa una serie di voci identiche e prive di significato. L’utente non ha modo di determinare quale collegamento attivare senza leggere il contenuto circostante per ognuno — un compito lento, frustrante e spesso impossibile, soprattutto su pagine con decine di collegamenti.

\n

Secondo l’Organizzazione Mondiale della Sanità, circa 2,2 miliardi di persone nel mondo hanno qualche forma di compromissione visiva, di cui almeno 1 miliardo ha una condizione che avrebbe potuto essere prevenuta o che non è ancora stata affrontata. Anche tra le persone senza disabilità visive, gli utenti con disabilità motorie che si affidano a sistemi di accesso a scansione o alla navigazione vocale (usando strumenti come Dragon NaturallySpeaking) traggono enorme beneficio da testi di collegamento descrittivi, perché possono attivare un collegamento direttamente pronunciandone o selezionandone il nome. Anche i gruppi con disabilità cognitive — incluse persone con deficit di attenzione, problemi di memoria o difficoltà di lettura — traggono beneficio da etichette di collegamento chiare, perché riducono il carico cognitivo e la necessità di rileggere il contesto.

\n

Consideriamo uno scenario reale: una cittadina o un cittadino turco che visita il sito web di un ospedale pubblico per prenotare un appuntamento. La pagina ha tre pulsanti di servizio, ciascuno contenente la frase “Randevu Al” (Prenota appuntamento) senza ulteriore contesto nel testo del collegamento. Una persona cieca che apre l’elenco dei collegamenti del proprio screen reader vede “Randevu Al”, “Randevu Al” e “Randevu Al” — tre opzioni indistinguibili. Non può determinare quale collegamento sia per la cardiologia, quale per la medicina generale e quale per la radiologia senza tornare al contesto. Soddisfare WCAG 2.4.9 richiederebbe che ogni collegamento reciti “Randevu Al — Kardiyoloji”, “Randevu Al — Genel Pratisyen” e “Randevu Al — Radyoloji”, rendendo lo scopo inequivocabile dal solo testo del collegamento.

\n

Oltre all’accessibilità, un testo di collegamento descrittivo ha un notevole valore SEO. I crawler dei motori di ricerca attribuiscono peso al testo di ancoraggio quando indicizzano le pagine, e i collegamenti descrittivi migliorano i segnali di pertinenza sia per la pagina di origine sia per la pagina di destinazione. Sostituire testi di ancoraggio generici con frasi significative migliora la reperibilità e riduce i tassi di rimbalzo, a beneficio di tutte le persone che usano il sito.

\n\n

Regole Axe-core Correlate

\n

WCAG 2.4.9 richiede test manuali perché gli strumenti automatici non possono determinare significato o intento — possono segnalare l’assenza di un nome accessibile, ma non possono giudicare se un dato nome accessibile sia sufficientemente descrittivo.

\n

\n
• Test manuale richiesto — link-name (regola axe): La regola link-name di axe-core rileva i collegamenti che non hanno affatto un nome accessibile (ad esempio, un elemento <a> senza contenuto testuale, senza aria-label, senza aria-labelledby e senza immagine con un attributo alt non vuoto). Sebbene questa regola intercetti i collegamenti completamente vuoti, non può valutare se il nome accessibile esistente sia significativo. Un collegamento che recita “qui” supererà la regola automatizzata link-name perché tecnicamente ha un nome accessibile — ma non soddisfa WCAG 2.4.9 perché quel nome non è autoesplicativo. Questo è esattamente il motivo per cui la 2.4.9 è contrassegnata come criterio che richiede revisione manuale: una persona deve leggere ogni etichetta di collegamento e giudicare se comunichi lo scopo in isolamento.
\n
• Test manuale richiesto — identical-links-same-purpose: Axe-core include una regola che segnala insiemi di collegamenti con nomi accessibili identici ma destinazioni diverse. Si tratta di un euristico che fa emergere potenziali violazioni della 2.4.9 — per esempio, più collegamenti “Leggi di più” che puntano ad articoli diversi. Tuttavia, anche questa regola richiede conferma umana, perché nomi identici che puntano alla stessa destinazione non costituiscono una violazione. La regola propone candidati alla revisione, non errori definitivi.
\n
• Perché l’automazione è insufficiente: Per valutare lo scopo di un collegamento è necessaria la comprensione del linguaggio naturale. Uno strumento automatico può calcolare che il nome accessibile di un collegamento è la stringa “dettagli” ma non può sapere che questa stringa non descrive adeguatamente una destinazione. Allo stesso modo, uno strumento non può valutare se “Visualizza” sia sufficiente (magari lo è, in un’interfaccia molto specifica e con ambito ristretto) o se “Visualizza il rendiconto finanziario del Q3” sia migliore. Il giudizio umano, idealmente combinato con test tramite screen reader, è l’unico metodo affidabile.
\n

\n\n

Come Eseguire i Test

\n

\n
1. Baseline con scansione automatizzata: Esegui axe DevTools (estensione del browser) o Lighthouse sulla pagina da testare. In axe DevTools, cerca eventuali violazioni della regola link-name — queste rappresentano collegamenti privi di nome accessibile e sono errori garantiti rispetto alla 2.4.9. Esporta i risultati e annota tutti i collegamenti segnalati. Questo passaggio non completa il tuo audit per la 2.4.9; identifica solo gli errori più evidenti.
\n
2. Genera un elenco di collegamenti con uno screen reader: Apri la pagina in Firefox con NVDA installato. Premi Insert + F7 (scorciatoia di NVDA per l’Elenco elementi) e seleziona “Collegamenti” dalla finestra di dialogo. Esamina l’elenco completo delle etichette dei collegamenti. Chiediti: una persona che leggesse solo questo elenco potrebbe capire la destinazione o la funzione di ogni collegamento? Ripeti questo test in JAWS premendo Insert + F7 per aprire la finestra di dialogo Links List e in VoiceOver su Safari (macOS) premendo VO + U per aprire il Rotor e navigare alla sezione Collegamenti. Segnala qualsiasi collegamento la cui etichetta sia ambigua, duplicata con una destinazione diversa o composta interamente da una stringa di URL.
\n
3. Audit tramite tabulazione da tastiera: Naviga nella pagina usando solo il tasto Tab. Ogni volta che il focus si posiziona su un collegamento, leggi solo il testo visibile dell’elemento focalizzato (o ascolta l’annuncio dello screen reader). Senza guardare il contenuto circostante, decidi se lo scopo del collegamento è chiaro. Documenta ogni collegamento per il quale lo scopo non è chiaro dal solo testo del collegamento.
\n
4. Verifica dei collegamenti immagine: Identifica tutti i collegamenti che contengono solo un’immagine (nessun testo visibile). Ispeziona ciascuno di essi con gli strumenti di sviluppo del browser per verificare che l’immagine abbia un attributo alt non vuoto e descrittivo, oppure che il collegamento abbia un aria-label descrittivo. Il calcolo del nome accessibile dovrebbe produrre una frase significativa.
\n
5. Verifica dei testi di collegamento duplicati: Cerca nell’HTML della pagina più istanze dello stesso testo di collegamento (ad esempio, più ancore “Leggi di più” o “Acquista ora”). Verifica se questi collegamenti puntano alla stessa destinazione (accettabile) o a destinazioni diverse (una violazione della 2.4.9, a meno che non siano disambiguati tramite aria-label o aria-labelledby).
\n
6. Test con controllo vocale: Usando Dragon NaturallySpeaking o Windows Voice Access, prova ad attivare i collegamenti pronunciando la loro etichetta visibile. Se l’etichetta pronunciata è ambigua e compaiono più candidati (ad esempio, pronunciando “Clicca Leggi di più” vengono evidenziati diversi collegamenti), ciò conferma un problema di usabilità reale in linea con la 2.4.9.
\n

\n\n

Come Correggere

\n

Testo generico del collegamento “Read More” — Non corretto

\n

<!-- Non soddisfa la 2.4.9: lo scopo del collegamento non può essere determinato dal solo testo del collegamento -->\n<article>\n  <h3>How to Improve Your Website's Accessibility Score</h3>\n  <p>Accessibility improvements can dramatically increase your user base...</p>\n  <a href='/blog/improve-accessibility-score'>Read more</a>\n</article>

\n

Testo generico del collegamento “Read More” — Corretto

\n

<!-- Soddisfa la 2.4.9: lo scopo del collegamento è completamente chiaro dal solo testo del collegamento -->\n<article>\n  <h3>How to Improve Your Website's Accessibility Score</h3>\n  <p>Accessibility improvements can dramatically increase your user base...</p>\n  <a href='/blog/improve-accessibility-score'>\n    Read more about improving your website's accessibility score\n  </a>\n</article>\n\n<!-- Alternativa: mostrare visivamente un testo breve ma fornire il nome accessibile completo -->\n<a href='/blog/improve-accessibility-score'\n   aria-label='Read more about improving your website's accessibility score'>\n  Read more\n</a>

\n\n

Collegamento costituito solo da immagine con testo alternativo mancante — Non corretto

\n

<!-- Non soddisfa la 2.4.9: il collegamento immagine non ha un nome accessibile; gli screen reader annunciano l'URL o nulla -->\n<a href='https://accsible.com/pricing'>\n  <img src='/icons/pricing.svg' alt=''>\n</a>

\n

Collegamento costituito solo da immagine con testo alternativo mancante — Corretto

\n

<!-- Soddisfa la 2.4.9: il testo alternativo fornisce al collegamento un nome accessibile completamente descrittivo -->\n<a href='https://accsible.com/pricing'>\n  <img src='/icons/pricing.svg' alt='View Accsible pricing plans'>\n</a>\n\n<!-- Alternativa che usa aria-label sull'ancora -->\n<a href='https://accsible.com/pricing' aria-label='View Accsible pricing plans'>\n  <img src='/icons/pricing.svg' alt=''>\n  <!-- alt='' nasconde l'immagine decorativa alle tecnologie assistive; aria-label su <a> fornisce il nome -->\n</a>

\n\n

Più collegamenti identici “Satın Al” (Buy Now) — Non corretto

\n

<!-- Non soddisfa la 2.4.9: tre etichette di collegamento identiche che puntano a prodotti diversi -->\n<div class='product-card'>\n  <h3>Temel Plan</h3>\n  <a href='/plans/basic'>Satın Al</a>\n</div>\n<div class='product-card'>\n  <h3>Profesyonel Plan</h3>\n  <a href='/plans/pro'>Satın Al</a>\n</div>\n<div class='product-card'>\n  <h3>Kurumsal Plan</h3>\n  <a href='/plans/enterprise'>Satın Al</a>\n</div>

\n

Più collegamenti identici “Satın Al” (Buy Now) — Corretto

\n

<!-- Soddisfa la 2.4.9: ogni collegamento ha un nome accessibile univoco e descrittivo tramite aria-label -->\n<div class='product-card'>\n  <h3>Temel Plan</h3>\n  <a href='/plans/basic' aria-label='Temel Planı Satın Al'>Satın Al</a>\n</div>\n<div class='product-card'>\n  <h3>Profesyonel Plan</h3>\n  <a href='/plans/pro' aria-label='Profesyonel Planı Satın Al'>Satın Al</a>\n</div>\n<div class='product-card'>\n  <h3>Kurumsal Plan</h3>\n  <a href='/plans/enterprise' aria-label='Kurumsal Planı Satın Al'>Satın Al</a>\n</div>\n\n<!-- Alternativa: usare testo visivamente nascosto all'interno dell'ancora -->\n<a href='/plans/basic'>\n  Satın Al <span class='sr-only'>— Temel Plan</span>\n</a>

(Contenuto troncato a causa del limite di token — riprova a caricare questo articolo.)