Accessibilità Web:
Capire come funzionano
Gli anchor link

Vai all'archivio: #MartedìAccessibile

Numero del post: Settimana 12

Data di pubblicazione: 14 Giugno 2022

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

  1. Miglioramento dell’esperienza di utilizzo del sito: puoi avere una lista iniziale di argomenti;
  2. Miglioramento della navigazione accessibile: anche con Screen Reader e tastiera;
  3. 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.