Sito in aggiornamento

Il sito è in fase di aggiornamento dopo la sostituzione del sito vecchio.

Capire come funzionano gli anchor link

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:

 Slide 1: Capire come funzionano gli anchor link

Cosa trovi in questa pagina:

  1. Come fare gli Anchor Link accessibili?
  2. Vantaggi degli Anchor Link
  3. Perché non trasformare l’intero titolo in un link?
  4. I vantaggi sono molti
  5. Morale della favola
  6. Soluzioni convincenti
  • 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.