Spiegare l'apertura di nuove schede

Silktide individua i link che si aprono in una nuova scheda o finestra e segnala quelli che non lo indicano. I visitatori dovrebbero essere avvisati prima che un link li porti fuori dalla pagina in cui si trovano.

Perché è importante

Aprire una nuova scheda senza avvisare interrompe le aspettative del visitatore: il pulsante Indietro smette di funzionare e potrebbe non accorgersi affatto dell'esistenza di una nuova scheda. Gli utenti di potrebbero non sentire alcun segnale che indichi il cambiamento di contesto, mentre le persone con difficoltà cognitive o con poca esperienza del web potrebbero ritrovarsi senza sapere come tornare indietro. Poche parole di avviso nel testo del link evitano tutto questo.

Spesso la soluzione migliore è non aprire affatto nuove schede: lascia che siano i visitatori a scegliere. Quando è necessario farlo, questo controllo verifica che il link lo indichi, supportando il criterio di successo 3.2.5 delle (Change on Request), un requisito di .

Come risolvere il problema

Preferisci rimuovere target="_blank", in modo che il link si apra normalmente.
Quando una nuova scheda è giustificata, aggiungi una spiegazione al testo del link:

<a href="products.html" target="_blank">
  Prodotti (si apre in una nuova scheda)
</a>

Per un link immagine, inserisci la spiegazione nel :

<a href="products.html" target="_blank">
  <img src="products.jpg" alt="Prodotti (si apre in una nuova scheda)">
</a>

Per applicare la soluzione a molti link contemporaneamente, può aggiungere automaticamente il testo:

\/* Adds the warning to every new-tab link *\/
a[target="_blank"]::after {
  content: " (si apre in una nuova scheda)";
}

In alternativa, usa un'etichetta , che modifica ciò che viene annunciato senza cambiare l'aspetto del link. Tieni presente che aria-label sostituisce interamente il testo del link, quindi deve ripeterlo:

<a href="products.html" target="_blank" aria-label="Prodotti (si apre in una nuova scheda)">
  Prodotti
</a>

Un'icona da sola non è sufficiente: l'avviso deve essere presente come testo che uno screen reader può annunciare (il testo alt di un'icona è considerato valido).

Come Silktide esegue il controllo

Individua ogni link nella pagina con target="_blank", l'attributo che apre una nuova scheda o finestra, ignorando gli elementi esclusi dal controllo.
Raccoglie il testo leggibile di ogni link: il contenuto testuale, il testo alternativo e il testo del titolo degli elementi al suo interno, qualsiasi etichetta ARIA e il testo aggiunto con CSS tramite ::before e ::after.
Considera superato il controllo se il testo contiene una spiegazione riconosciuta: "nuova scheda", "nuova finestra", "nuova scheda del browser", "nuova finestra del browser" o "link esterno" (sono riconosciuti anche gli equivalenti in gallese).
Segnala ogni altro link che apre una nuova scheda.

Risoluzione dei problemi

Il mio link si spiega usando altre parole

Vengono riconosciute solo le espressioni indicate sopra. Se la formulazione è un vero sinonimo, come "si apre in un popup", usa un'espressione riconosciuta oppure il risultato.

"Finestra" o "scheda"?

Quasi tutti i browser moderni aprono i link con target="_blank" in una scheda, quindi "si apre in una nuova scheda" è generalmente la formulazione più chiara, anche se entrambe superano il controllo.