Le pagine web utilizzano i link per indirizzare i visitatori verso nuovi contenuti o contenuti aggiuntivi. I link possono essere costituiti da testo o immagini. I link sono un efficace strumento di navigazione e devono essere strutturati in maniera appropriata per garantire la migliore esperienza.
Le linee guida WCAG (Web Content Accessibility Guidelines) definiscono i requisiti specifici per assicurarsi che i contenuti siano accessibili a tutti. Secondo le linee guida WCAG 2.1 AA, i link devono esplicitare il proprio scopo, in modo che i visitatori possano decidere se aprirli o meno. I link devono avere un testo distinguibile che informi i visitatori della destinazione.
Che cosa si intende per “testo distinguibile”?
I link generalmente contengono due informazioni:
- URL: l’indirizzo web di destinazione del link, se selezionato
- Testo visualizzato: testo visibile che informa i visitatori su cosa aspettarsi quando selezionano il link
Osserva questo link alle best practice: Best practice per i link. Nel codice sorgente HTML, il link alle best practice comparirà così:<a href="#best-practices">Best practices for links</a>
Se il testo visualizzato o il testo tra i tag non sono presenti<a>, il link non contiene testo distinguibile. Per “testo distinguibile” si intende un testo visualizzato che informi i visitatori dello scopo del link.
Quando ai link manca il testo distinguibile, si tratta di un errore di livello Minore. Risolvi i problemi di livello Minore per offrire un’esperienza migliore. I link con testo mancante o vago possono rendere la navigazione confusa ed essere fonte di frustrazione per le persone con disabilità.
In che modo le persone con disabilità utilizzano i link a piè di pagina
Ally ti aiuta a capire quando manca il testo ai link e ti spiega come risolvere il problema. Ally effettua i seguenti controlli:
- È presente il testo tra i tag hyperlink <a>?
- Il testo tra i tag <a> è nascosto?
- Le immagini utilizzate come link hanno descrizioni alternative?
Se il link non supera uno qualsiasi di questi controlli, Ally lo segnala come problema.
Usare Ally per trovare i link con testo mancante
Usa il report sull’accessibilità di Ally per individuare e correggere eventuali problemi di accessibilità presenti nel tuo sito. Usa il link fornito per il report e accedi. Apri il report e guarda l’elenco dei problemi nella tabella Problemi di accessibilità.
La tabella Problemi di accessibilità si trova nella scheda Panoramica e nella scheda Dominio. Inizia dalla scheda Dominio per visualizzare i problemi specifici di un dominio.
I link a cui manca il testo distinguibile vengono contrassegnati come problemi di livello Minore. Usa la scheda Minore nella tabella Problemi di accessibilità per visualizzare l’elenco dei problemi di livello Minore. Seleziona i problemi relativi ai link senza testo distinguibile.
Se inizi dalla scheda Panoramica, seleziona il problema, quindi il dominio che presenta tale problema.
Nell’elenco dei problemi del dominio, seleziona l’indicatore del punteggio accanto al contenuto che presenta il problema. Viene visualizzato il riquadro del feedback dell’editor dei contenuti.
Visualizzare l’anteprima del testo mancante
Il riquadro del feedback di Ally mostra un’anteprima del contenuto oltre a un feedback dettagliato e alle informazioni di supporto per risolvere i problemi di accessibilità. Usa l’anteprima per visualizzare i link con testo mancante.
L’anteprima evidenzia le aree specifiche in cui si trovano i problemi di accessibilità all’interno del documento. Le parti evidenziate mostrano contemporaneamente tutte le occorrenze di un determinato tipo di problema. Ad esempio, per i problemi relativi ai link con testo mancante, la funzione di anteprima evidenzia tutte le aree in cui si verifica questo problema specifico.
Strumenti di anteprima
Usa gli strumenti di anteprima per visualizzare i problemi presenti nel documento.
- Sfoglia l’anteprima pagina per pagina.
- Guarda quante volte si verifica un determinato problema.
- Passa da un’evidenziazione all’altra.
- Mostra o nascondi le evidenziazioni.
- Usa lo zoom per ingrandire o rimpicciolire l’anteprima dei contenuti.
- Se il problema si trova in un documento allegato, scarica il file originale.
Seguire i passaggi guidati di Ally per aggiungere il testo ai link
Ally parte dal presupposto che tu abbia una conoscenza basilare del codice HTML e di come usare il Content Management System (CMS). Per seguire la procedura guidata, devi sapere come modificare una pagina web nel codice HTML o sorgente del CMS.
Assieme all’anteprima, Ally fornisce una procedura guidata dettagliata su come risolvere il problema. Ally organizza il feedback sotto forma di struttura ad albero di decisione. Leggi le indicazioni e rispondi ai messaggi visualizzati sullo schermo. Scopri qual è il problema, perché è importante e come correggerlo in modo opportuno.
Seleziona Come correggere il testo dei link per seguire la procedura guidata.
Modi per aggiungere il testo ai link
Esistono più modi per risolvere i problemi relativi al testo dei link nelle pagine web.
- HTML: La procedura guidata di Ally illustra come trovare e risolvere i problemi relativi al testo dei link nel codice HTML. In pratica, devi individuare la pagina web con il link. Modifica la pagina. Nel codice HTML, aggiungi il testo tra i tag <a>. Salva la pagina.
- RTE: alcuni CMS hanno un Rich Text Editor (RTE) che offre metodi intuitivi per correggere il testo dei link. Individua il link nella pagina web. Selezionalo e usa gli strumenti del CMS per aggiungere il testo. Salva la pagina.
Visita w3schools per ulteriori informazioni sul codice HTML e su CSS.
Best practice per i link
- Il testo dei link deve essere significativo. Informa i visitatori sulla loro destinazione. Descrivi cosa deve aspettarsi l’utente quando seleziona il collegamento.
- Evita di inserire formule come “fai clic qui” e “ulteriori informazioni”. Queste frasi non dicono nulla ai visitatori su cosa aspettarsi quando selezionano il link. Alcune tecnologie di assistenza possiedono uno strumento che elenca i link presenti nella pagina. Frasi come queste non hanno alcun significato quando vengono estrapolate dal contesto della pagina e inserite in un elenco.
- Evita di usare gli URL come testo del link visibile. Un URL potrebbe non essere descrittivo. Gli screen reader leggono gli URL lettera per lettera e questo può essere frustrante per i visitatori che li utilizzano.
- Il testo dei link deve essere univoco. Ogni link deve essere diverso dagli altri presenti nella pagina. Ripetere il testo di un link può creare confusione quando il collegamento viene estrapolato dal contesto della pagina e inserito nello strumento di elenco dei link.
- I link devono essere distinguibili visivamente. Deve essere chiaro che si tratta di un link. Se non ti piace lo stile del link, puoi sempre aggiornare il modello.
- Distingui i link dal resto del testo senza basarti esclusivamente sulla differenza di colore. WCAG 2.1 - 1.4.1
L’aspetto visivo dei link è spesso definito nella guida di stile del sito e può dipendere dal brand. Prima di apportare modifiche, consulta la guida di stile e l’amministratore del sito.
- Distingui i link dal resto del testo senza basarti esclusivamente sulla differenza di colore. WCAG 2.1 - 1.4.1
- Comunica agli utenti se il link si apre in una nuova finestra. I link che si aprono in una nuova finestra possono disorientare gli utenti. Avvisa gli utenti quando li stai indirizzando a una nuova finestra o scheda.
- Non usare un’immagine per rappresentare qualcosa che puoi creare nel codice HTML. Ad esempio, non usare l’immagine di un pulsante al posto del pulsante vero e proprio. Non usare l’immagine di una tabella anziché una tabella creata nel codice HTML di origine.
Come le persone con disabilità utilizzano i link
Link appropriati che contengono un collegamento e del testo significativo offrono un’esperienza decisamente migliore per chiunque. I link che contengono informazioni accurate sono efficaci strumenti di navigazione e fanno capire immediatamente che cosa aspettarsi. Per questo motivo sono fondamentali per i visitatori con disabilità visive.
I link che presentano un testo univoco e significativo consentono una navigazione più rapida per molti utenti.
- In questo modo, coloro che utilizzano screen reader non dovranno ascoltare l’intera pagina, ma potranno scegliere di ascoltare e di interagire con un elenco di link.
- Gli utenti che utilizzano il riconoscimento vocale interagiscono con i link pronunciando ad alta voce il testo del link che vogliono selezionare.
Link nel formato corretto possono essere più facili da individuare e utilizzare per molte persone.
- Gli utenti che utilizzano solo la tastiera e che potrebbero non essere in grado di utilizzare il mouse, possono usare la tastiera per navigare tra i vari elementi, tra cui i link.
- Gli utenti affetti da daltonismo potrebbero non essere in grado di vedere la differenza di colore, ma possono vedere un link sottolineato.