Ti è mai capitato di cliccare su un link e ritrovarti in una nuova scheda del browser senza averlo deciso? Forse solo un piccolo fastidio per la maggior parte degli utenti, ma per chi naviga con tecnologie assistive o ha disabilità cognitive, può diventare una vera e propria barriera.

Spesso, come sviluppatori o designer, impostiamo il fatidico target="_blank" convinti di non far scappare l’utente dal nostro sito, ma la verità è che l’accessibilità riguarda proprio questo: dare il controllo a chi naviga.

Prendendo spunto da un’ottima analisi di Pope Tech, vediamo come gestire i link esterni in modo che siano chiari, sicuri e, soprattutto, accessibili.

La regola di base: la stessa scheda è meglio

La maggior parte degli esperti di accessibilità concorda: i link dovrebbero aprirsi, di default, nella stessa scheda, per almeno due motivi:

1. Scelta dell’utente: se il link si apre nella stessa scheda, l’utente può decidere di aprirlo in una nuova (tasto destro o Ctrl/Cmd + click); se lo forziamo noi, gli togliamo questa scelta;
2. Disorientamento: per chi usa uno screen reader o strumenti di ingrandimento, un cambio improvviso di scheda può essere confusionario: il tasto “Indietro” smette di funzionare come previsto, interrompendo il flusso di navigazione.

E se devo proprio aprirli in una nuova scheda?

Esistono casi in cui ha senso usare una nuova scheda, ad esempio, se l’utente sta compilando un modulo e il link serve a consultare delle istruzioni senza perdere i dati. In questi casi, la parola chiave è prevedibilità. Dobbiamo avvisare l’utente di cosa accadrà prima che clicchi.

Il codice accessibile

Ecco come dovresti strutturare il codice HTML per non creare rumore inutile per gli screen reader:

<a href="https://esempio.it" target="_blank" rel="noopener noreferrer">
  Visita il sito esterno
  <!-- Testo nascosto visivamente ma letto dagli screen reader -->
  <span class="screen-reader-text">(si apre in una nuova scheda)</span>
</a>

Nell’esempio ho usato la classe screen-reader-text, con la denominazione usata nativamente da WordPress, ma se lavori con Bootstrap, Tailwind CSS o un altro framework, potresti ritrovarti la classe sr-only o qualcos’altro di simile. In ogni caso, eccoti il CSS necessario che puoi inserire nel tuo progetto:

/* Hides the element visually but keeps it accessible to screen readers */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

Perché rel=“noopener noreferrer” e non solo noopener?

Noterai che nell’esempio ho usato entrambi i valori. Ognuno ha il suo scopo:

• noopener impedisce alla nuova pagina di accedere all’oggetto window.opener, chiudendo una potenziale falla di sicurezza (il cosiddetto tabnapping);
• noreferrer evita che il sito di destinazione riceva informazioni sulla provenienza dell’utente (privacy): nei browser moderni, implica già noopener.

Usarli insieme è la pratica raccomandata: sicurezza e privacy in un colpo solo.

Il riferimento normativo: WCAG 3.2.2

Questa pratica non è solo buon senso: ha una base nelle Web Content Accessibility Guidelines. Il criterio WCAG 3.2.2 – On Input stabilisce che cambiare il contesto di navigazione senza che l’utente lo abbia richiesto esplicitamente è una violazione di accessibilità — a meno che l’utente non sia stato avvisato in anticipo.

Avvisare l’utente con il testo nascosto (si apre in una nuova scheda), come mostrato sopra, è esattamente il modo corretto per soddisfare questo criterio.

Come gestire i link in WordPress

Anche se oggi molti di noi usano framework moderni (come Astro, nel mio caso), capita spesso di dover mettere mano a progetti in WordPress. WordPress rende facilissimo forzare l’apertura in una nuova scheda, ma purtroppo non aggiunge automaticamente l’avviso per l’accessibilità. Ecco come rimediare.

1. La soluzione manuale (per i Content Editor)

Se stai scrivendo un articolo nel blocco Link di Gutenberg:

1. Inserisci il link e attiva “Apri in una nuova scheda”
2. Clicca sui tre puntini della barra del blocco e seleziona “Modifica come HTML”
3. Aggiungi lo span con la classe dedicata dopo il testo del link: <span class="screen-reader-text">(si apre in una nuova scheda)</span>

2. La soluzione automatica (per i Developer)

Se vuoi automatizzare il processo su tutto il sito WP, puoi aggiungere questo filtro nel file functions.php. Il codice cercherà tutti i link con target="_blank" e aggiungerà l’avviso automaticamente:

add_filter( 'the_content', 'accessibile_target_blank' );

function accessibile_target_blank( $content ) {
    // Find all links that open in a new tab
    $pattern = '/<a(.*?)target="_blank"(.*?)>(.*?)<\/a>/i';
    $replacement = '<a$1target="_blank" rel="noopener noreferrer"$2>$3 <span class="screen-reader-text">(si apre in una nuova scheda)</span></a>';

    return preg_replace($pattern, $replacement, $content);
}

Ricorda di controllare che il CSS necessario, ovvero la classe .screen-reader-text, sia dichiarata nel tuo tema, altrimenti puoi prenderla da su e aggiungerla al tuo progetto.

Checklist per i tuoi prossimi link

In sintesi, prima di pubblicare, fatti queste domande:

• Il testo del link è descrittivo? (Evita “clicca qui”).
• Il link può aprirsi nella stessa scheda? Se sì, rimuovi target="_blank".
• Se deve aprirsi in una nuova scheda, c’è un avviso? (Testo nascosto per screen reader).
• È presente il rel="noopener noreferrer"? (Per sicurezza e privacy).

Ricorda che l’accessibilità non è un peso, ma un modo per scrivere codice migliore e più umano.

Peace&Love! ✌️