WCAG SC 2.4.4 - Link Purpose (In Context) (Level A)
Lo scopo dei link può essere determinato dal testo del link da solo o insieme al contesto determinato a livello di codice, tranne nei casi in cui lo scopo dei link è ambiguo in generale.
In altre parole: rendi il tuo contenuto comprensibile per tutti.
Progetta il contenuto per offrire la migliore esperienza di utilizzo possibile, sul monitor o con Screen Reader. Se fai Content Design troverai molto utile la collaborazione con le persone che fanno Design e Sviluppo.
Errori comuni: link che trovo spesso online
- Apri
- Qui
- Clicca qui
- Scopri di più
- Leggi
- Ordina
- … si ma cosa?
Nelle slide ho rappresentato questa mancanza con una nuvoletta.
Come fare per creare link comprensibili, senza nuvole?
Ecco 2 tecniche:
1. La tecnica più facile (puoi applicarla da subito)
Semplicemente spiega meglio il testo del link. Ad esempio:
- Ordina il mio nuovo libro
- Scopri di più sul mio nuovo libro
- Leggi di più su questo nuovo libro di architettura
- Vai al libro “Nome del libro”
2. La tecnica con sr-only (con il team design e sviluppo)
Utile soprattutto per link ripetitivi nelle card, dove è comune posizionare link uguali.
Dividi il link in 2 parti. Assegna la classe CSS sr-only alla parte del link che sarà annunciata solo dallo Screen Reader. Ad esempio:<a href=”#”>
<span>Apri</span>
<span class=”sr-only”>per ordinare il libro</span>
</a>Come funziona?
– Sul monitor vedo solo il link “Apri”.
– Lo Screen Reader annuncia il link completo “Apri per ordinare il libro”.