Link per lettori di schermo

Silktide individua gli elementi link con errori di struttura che ne compromettono il funzionamento con le tecnologie assistive: link senza testo leggibile, link senza destinazione e tag link vuoti rimasti nella pagina.

Per funzionare con le tecnologie assistive, un link deve avere sia una destinazione (un attributo href) sia del contenuto leggibile al suo interno:

<!-- Funziona: destinazione e testo leggibile -->
<a href="/about">Chi siamo</a>

<!-- Funziona: link immagine con testo alternativo -->
<a href="/apple"><img src="apple.png" alt="Mela"></a>

Perché è importante

Un lettore di schermo annuncia ogni link utilizzando il relativo testo. Un link con una destinazione ma senza testo viene annunciato semplicemente come "link": l'utente può attivarlo, ma non ha modo di sapere dove conduce. Un link con del testo ma senza destinazione sembra cliccabile, ma non porta da nessuna parte. Entrambi questi schemi violano il requisito di base che consente alle persone che utilizzano tecnologie assistive di navigare una pagina tramite i suoi link.

Come risolvere il problema

1. Per un link con una destinazione ma senza testo leggibile: aggiungi del testo all'interno del link oppure testo alternativo se contiene solo un'immagine.
2. Per un link con del testo ma senza destinazione: aggiungi l'href mancante oppure, se l'elemento è in realtà un punto di destinazione a cui devono saltare altri link, sposta il relativo id su un elemento che non sia un link:

<!-- Ancora di destinazione legacy, sconsigliata in HTML5 -->
<a name="example"></a>

<!-- Preferibile: un id su un elemento normale -->
<div id="example">...</div>

3. Per i tag <a></a> vuoti e privi di attributi: rimuovili, poiché non hanno alcuna utilità. Spesso vengono lasciati da editor o script.
4. Se l'elemento è in realtà un pulsante, ovvero attiva un'azione invece di consentire la navigazione, utilizza un elemento <button> oppure aggiungi role="button" al tag esistente.

Come Silktide esegue il controllo

1. Individua ogni elemento <a> nella pagina e ne legge il testo (compresi il testo alternativo delle immagini e il testo aggiunto tramite CSS), l'href e gli eventuali attributi id o name.
2. Segnala tre schemi problematici:
   • Un link con un href ma senza testo leggibile.
   • Un elemento con del testo e un id o name, ma senza href: una destinazione che si presenta come link oppure un link privo della sua destinazione.
   • Un'ancora completamente vuota, senza testo, href, id o name.
3. Due schemi non vengono segnalati intenzionalmente:
   • <a> con del testo ma senza href, id o name: HTML5 lo consente come "link segnaposto", che viene comunemente completato in seguito tramite JavaScript.
   • Ancore vuote con un id o name ma senza href: sono destinazioni legacy per i collegamenti interni, non link.

Per saperne di più

• Comprendere il criterio di successo 4.1.2: Nome, ruolo, valore (WCAG 2.2)
• H91: Utilizzo dei controlli dei moduli e dei link HTML (tecnica WCAG)
• Scopo del link
• Link vuoto