Creare risorse accessibili: Collegamenti

I link accessibili aiutano tutti gli utenti (soprattutto quelli che utilizzano screen reader o la navigazione da tastiera) a capire dove li porterà un link e come interagire con esso. Questo articolo illustra le migliori pratiche per scrivere un testo chiaro sui link, utilizzare un contesto significativo ed evitare frasi vaghe come “clicca qui”. Scopri come rendere i tuoi link più usabili, informativi e conformi agli standard di accessibilità.

Requisiti

• I link devono essere semanticamente designati come tali.
• Idealmente, ciò significa utilizzare un elemento <a> con un valore href valido. L’impostazione di role="link" (e l’aggiunta di tutti gli altri aspetti della funzionalità di link) può essere accettabile in rari casi problematici.
• Un link deve avere un testo che un programma possa riconoscere, seguendo l’algoritmo di calcolo dei nomi accessibili.
• Le specifiche di tali informazioni sono definite da altre specifiche, come WAI-ARIA, o dagli standard della piattaforma in questione.
• Lo scopo di ogni link deve essere chiaro e distinguibile dagli altri link presenti nella stessa pagina, sia dal testo stesso del link (preferibilmente) sia dal contesto che lo circonda.
• Si consiglia di evitare nomi di link come:
  • Per saperne di più,
  • Scopri di più,
  • Clicca qui per maggiori dettagli.
• I link che portano alle stesse destinazioni devono utilizzare lo stesso testo (o un testo molto simile) in tutte le pagine del sito web
• I link devono poter essere messi a fuoco da tastiera senza richiedere tempi precisi per la pressione dei tasti.
• Inoltre, i link devono essere attivati con il tasto Invio/Return.
• L’ordine di navigazione degli elementi focalizzabili (link, elementi del modulo, ecc.) deve essere logico e intuitivo.
• L’ordine degli elementi deve essere in una sequenza logica.
• I link devono essere visivamente distinguibili dal testo circostante non linkato.
• I link non devono basarsi esclusivamente sul colore per differenziarsi dal testo circostante, a meno che non ci sia un contrasto sufficiente tra loro e il testo.
• Quando si passa il mouse sul link o lo si mette a fuoco, deve apparire un’ulteriore indicazione visiva (come una sottolineatura o un contorno).
• I link devono avere un rapporto di contrasto di 4,5 a 1 (per il testo piccolo) o 3 a 1 (per il testo grande) rispetto allo sfondo.
• Tutti i link devono mostrare un indicatore visivo di attenzione quando sono a fuoco.
• Il contrasto di tutti gli indicatori visivi di messa a fuoco rispetto allo sfondo deve essere almeno di 3 a 1.
• Gli utenti devono avere la possibilità di saltare i blocchi di contenuto ripetuti su più pagine web (ad esempio, un lungo elenco di archivi su un sito di e-commerce che è un elemento standard di molte pagine).
  • Il link “salta” deve essere il primo elemento focalizzabile della pagina.
  • Il link “salta” deve essere sempre visibile o in primo piano sulla tastiera.
  • i link “salta”, i punti di riferimento (ad esempio, <nav>, <main>, ecc.) e l’indice della pagina sono tutti metodi accettabili per soddisfare il requisito WCAG 2.4.1 che consente agli utenti di evitare i blocchi di contenuto. L’ideale è incorporare tutte queste tecniche nel design, laddove sia opportuno.
• L’indice della pagina può essere collocato all’inizio del contenuto o nell’intestazione.
• Idealmente, i link dell’indice dovrebbero corrispondere alla struttura dei titoli del contenuto della pagina.

Esempi

	Il pannello dei filtri si apre su richiesta dell’utente, consentendo di saltare la lettura del contenuto di questa colonna di rifiuti tramite screen reader.
	NON FARE: Il seguente esempio utilizza erroneamente il tabindex per specificare un ordine alternativo delle schede. Se questo elenco viene navigato con il tasto tab, la navigazione avviene nell’ordine Homepage, capitolo 3, capitolo 2, capitolo 1, che non segue la sequenza del contenuto.
	Quando i campi di testo ricevono l’attenzione, viene visualizzata una barra verticale nel campo, a indicare che l’utente può inserire del testo, oppure tutto il testo viene evidenziato, a indicare che l’utente può digitare sopra il testo.
	NON FARE: In questo esempio, quando si utilizza una tastiera, il pulsante di invito all’azione viene saltato (o addirittura l’intero elemento che fornisce all’utente informazioni cruciali).
	NON FARE: Tutti gli elementi contrassegnati in rosso hanno lo stesso aspetto, ma View pricing è un link. Il resto del testo blu è solo un’evidenziazione. Ciò significa che i link non sono visivamente distinguibili dal testo circostante non linkato. NON FARE: Allo stesso tempo, gli elementi contrassegnati in verde causano un’azione, ma sembrano testo normale. Ciò significa che i link non sono visivamente distinguibili dal testo non linkato circostante.