Accessibilità del sito web/app Insights

Funzionalità di accessibilità del sito web/app Insights

I progetti di Website Insights hanno molte funzioni integrate per facilitare l’accessibilità. In particolare, si consiglia di provare una finestra di dialogo reattiva o un pulsante di feedback, progettati tenendo conto dell’accessibilità.

In questa pagina verranno descritte le impostazioni specifiche e le migliori pratiche per migliorare l’accessibilità del vostro progetto Website Insights.

Creazione di una finestra di dialogo reattiva accessibile

Le
finestre di dialogo reattive sono sovrapposizioni di siti web sviluppate tenendo conto dell’accessibilità. Di seguito, evidenziamo alcune delle funzioni di accessibilità che potete aspettarvi di trovare:

• Facilità di definizione del testo Alt: Se si utilizza un’icona personalizzata all’interno della finestra di dialogo, gli utenti possono specificare il testo di riferimento (Alt Text) per indicare il testo che lo screen reader deve leggere quando l’attenzione è sull’icona.
  Consiglio Q: se si seleziona Includi un’icona per chiudere l’intercetta, il testo alt del pulsante X che appare in alto a destra della finestra di dialogo è “chiudi” Anche questo testo alt è localizzato.
• Etichette ARIA per i controlli dei pulsanti: Per impostazione predefinita, gli screen reader leggono il testo specificato per l’etichetta del pulsante. Tuttavia, in alcuni casi, è possibile che lo screen reader legga un contesto aggiuntivo, come ad esempio: “Fare clic su questo pulsante per aprire una nuova finestra di sondaggio” In questo caso, è possibile specificare l’etichetta ARIA per i controlli dei pulsanti.
• Titoli iframe per i sondaggi incorporati: Se volete incorporare un sondaggio nel vostro dialogo, è facile aggiungere un titolo iframe per gli screen reader.
• Contrasti di colore per gli elementi all’interno dell’editor di intercettazioni: Sebbene QUALTRICS non possa fornire indicazioni dirette sul contrasto, è possibile regolare il colore dei pulsanti e del testo della finestra di dialogo in base alle esigenze.

Creazione di un pulsante di feedback accessibile Editor di intercettazioni

I
pulsanti di feedback sono schede opinioni presenti a lato di una pagina su cui l’utente può fare clic per lasciare un feedback. Ecco alcune funzioni di accessibilità del pulsante di feedback:

• Titoli iframe: Possibilità di specificare un titolo iframe nella sezione Animazione.
• Testo Alt del pulsante personalizzato: Per impostazione predefinita, gli screen reader leggono il testo specificato per l’etichetta del pulsante. Tuttavia, in alcuni casi, è possibile utilizzare un’immagine personalizzata per il pulsante. In questo caso, è possibile specificare il testo alt per l’immagine del pulsante.
• Titoli iframe per i sondaggi incorporati: Se volete incorporare un sondaggio nel vostro dialogo, è facile aggiungere un titolo iframe per gli screen reader.
• Contrasti di colore per gli elementi all’interno dell’editor di intercetta: Sebbene QUALTRICS non possa fornire indicazioni dirette sul contrasto, è possibile regolare il colore dello sfondo e del testo del pulsante in base alle esigenze.

Aggiunta di testo Alt e ruoli ai pulsanti di destinazione per le creazioni legacy

Se la destinazione è un’immagine caricata su un pulsante, l’aggiunta di un testo alt e di un attributo role aiuta lo screen reader a capire cosa deve dire e fare il pulsante. Questo consiglio riguarda gli editor di intercettazioni tradizionali, come il pop over o l’infobar.

1. Aprire l’editor di intercettazioni nella scheda Creativi.
2. Fare doppio clic sull’elemento Destinazione che contiene l’immagine.
   
3. Fonte del clic.
4. All’interno del tag <img>, aggiungere un attributo alt <img alt="text here" /> al tag e impostare il valore uguale al testo dell’immagine.

   <img alt="Sign Up Now" ... />

   Consiglio Q: i software di lettura dello schermo leggono ad alta voce ciò che è contenuto nell’attributo alt quando arrivano all’immagine.

   

5. Circondare il tag <img> con un tag <span>.
   
6. Aggiungere un attributo role=”button” al tag <span>.

   <span role="button"><img .../></span>

   Consiglio Q: l’attributo role indica al visitatore che utilizza uno screen reader che questo elemento è un pulsante che può essere attivato.

   

Destinazioni standard (testo del collegamento)

1. Aprire l’editor di intercettazioni nella scheda Creativi.
2. Fare doppio clic sull’elemento Destinazione che contiene il testo.
   
3. Fonte del clic.
4. Aggiungere un attributo role=”button” al tag <span>.

   <span role="button" ... >Contenuto della casella di testo</span>

   

Aggiunta di testo Alt e ruoli ai pulsanti di chiusura per i creativi legacy

Le creazioni tradizionali, come pop over e slider, richiedono un’ulteriore personalizzazione per rendere accessibili i pulsanti di chiusura.

Pulsante di chiusura come immagine

1. Aprire l’editor di intercettazioni nella scheda Creativi.
2. Fare doppio clic sull’elemento Chiudi che contiene l’immagine.
   
3. Fonte del clic.
4. Aggiungere l’attributo alt=”close” al tag <img>.

   <img alt="close" ... />

   Consiglio Q: i software di lettura dello schermo leggono ad alta voce ciò che è contenuto nell’attributo alt quando arrivano all’immagine.

   

5. Circondare il tag <img> con un tag <span>.
   
6. Aggiungere un attributo role=”button” al tag <span>.

   <span role="button"><img .../></span>

   Consiglio Q: l’attributo role indica al visitatore che utilizza uno screen reader che questo elemento è un pulsante che può essere attivato.

   

Pulsante di chiusura come testo

1. Aprire l’editor di intercettazioni nella scheda Creativi.
2. Fare doppio clic sull’elemento Chiudi che contiene il testo.
   
3. Fonte del clic.
4. Aggiungere un attributo role=”button” al tag <span>.

   <span role="button" ...>Contenuto della casella di testo</span>

   Consiglio Q: l’attributo role indica al visitatore che utilizza uno screen reader che questo elemento è un pulsante che può essere attivato.

   

FAQ