Come fare gli Anchor Link accessibili?
Prima di capire l’utilità di avere anchor link accessibili, cerchiamo di capire qual è la differenza tra link standard e anchor link. La differenza principale è questa:
- Il link standard apre una pagina dall’inizio;
- l’Anchor Link ti porta alla sezione specifica nella stessa pagina.
Vantaggi degli Anchor Link
- Miglioramento dell’esperienza di utilizzo del sito: puoi avere una lista iniziale di argomenti;
- Miglioramento della navigazione accessibile: anche con Screen Reader e tastiera;
- Possibilità di condivisione di link specifici: ad esempio, puoi inviare un link via Whatsapp senza ulteriori indicazioni, in poco tempo e senza fare errori. Chissà quante volte ti è successo di farlo.
Per un progetto su cui sto lavorando vorrei aggiungere degli Anchor Link nel testo. Niente di più semplice vero? Però vorrei farli accessibili, e come si fa?
Su internet trovo un articolo di Amber Wilson che si interroga sull’argomento. Sono descritti vari tentativi: è un percorso tortuoso e, tutto questo, solo per un elemento semplice come l’Anchor Link. Premessa: il suo obiettivo era di avere il link nell’icona hashtag.
- Versione 1: link all’hashtag – problema di lettura dello SR;
- Versione 2: link fuori dal title – problema di associazione al title;
- Versione 3: uso di aria-label + aria-describedby da migliorare
- Versione 4: title prima del aria-label + aria-describedby
- Versione 5: con description nascosta solo visivamente, senza aria-label che su alcuni SR ha dei problemi.
L’articolo è molto partecipato. Evidentemente il tema è caldo. Ci sono dei commenti. Uno di questi è illuminante ed evidenzia una soluzione tanto semplice quanto banale:
Perché non trasformare l’intero titolo in un link?
Non servono altri span interni. È un sistema semplice usato da siti come:
- Developer Mozilla
- Web Almanac
I vantaggi sono molti
Si usa l’HTML semantico;
- Non c’è paura che alcuni Screen Reader si comportino in modo diverso;
- Formattazione facile con CSS;
- Nessuna sovrastruttura ad hoc solo per accessibilità;
- Più facile da usare per tutti.
Morale della favola
Come dicevano i ragazzi di Docebo agli A11y Days: cerchiamo di usare bene quello che abbiamo già, cioè partiamo dall’HTML semantico, usando gli attributi ARIA solo quando è necessario. Però attenzione: il link va dentro al titolo H, non il contrario.
Soluzioni convincenti
Come detto, questo è un argomento che prevedere tante soluzioni con approcci diversi. Probabilmente le migliori solo quelle più semplici.