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.

CONSIGLIO Q: I creativi tradizionali come pop over, slider, infobar e feedback incorporati personalizzati non sono generalmente accessibili. Sebbene in questa pagina siano descritte alcune impostazioni che possono essere utilizzate per migliorare l’accessibilità, consigliamo vivamente di utilizzare una finestra di dialogo reattiva o un pulsante di feedback, soprattutto perché le loro impostazioni di accessibilità sono facili da regolare.

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

Consiglio Q: se non avete accesso a nessuna delle funzioni descritte in questa sezione, contattate il vostro Account Executive. Per ulteriori informazioni sulle differenze tra Digital Feedback e CUSTOMERXM for Digital, vedere Digital Feedback vs. CustomerXM per Digital.

Consiglio Q: le finestre di dialogo reattive e i pulsanti di feedback non richiedono questo passaggio.

Attenzione: Le funzioni di codifica personalizzate sono fornite così come sono e possono richiedere conoscenze di programmazione per essere implementate. Il nostro team di supporto non offre assistenza o consulenza per la codifica personalizzata. Puoi sempre provare a chiedere alla nostra community di utenti esperti. Se desiderate saperne di più sui nostri servizi di codifica personalizzata disponibili per l’acquisto, contattate il vostro Account Executive di QUALTRrics.

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.

Aprire l’editor di intercettazioni nella scheda Creativi.

Fare doppio clic sull’elemento Destinazione che contiene l’immagine.

---

×

close

Fonte del clic.

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.

---

×

close

Circondare il tag <img> con un tag <span>.

---

×

close

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.

---

×

close

Destinazioni standard (testo del collegamento)

Aprire l’editor di intercettazioni nella scheda Creativi.

Fare doppio clic sull’elemento Destinazione che contiene il testo.

---

×

close

Fonte del clic.

Aggiungere un attributo role=”button” al tag <span>. <span role="button" ... >Contenuto della casella di testo</span>

---

×

close

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

Consiglio Q: le finestre di dialogo reattive e i pulsanti di feedback non richiedono questo passaggio.

Attenzione: Le funzioni di codifica personalizzate sono fornite così come sono e possono richiedere conoscenze di programmazione per essere implementate. Il nostro team di supporto non offre assistenza o consulenza per la codifica personalizzata. Puoi sempre provare a chiedere alla nostra community di utenti esperti. Se desiderate saperne di più sui nostri servizi di codifica personalizzata disponibili per l’acquisto, contattate il vostro Account Executive di QUALTRrics.

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

Pulsante di chiusura come immagine

Aprire l’editor di intercettazioni nella scheda Creativi.

Fare doppio clic sull’elemento Chiudi che contiene l’immagine.

---

×

close

Fonte del clic.

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.

---

×

close

Circondare il tag <img> con un tag <span>.

---

×

close

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.

---

×

close

Pulsante di chiusura come testo

Aprire l’editor di intercettazioni nella scheda Creativi.

Fare doppio clic sull’elemento Chiudi che contiene il testo.

---

×

close

Fonte del clic.

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.

---

×

close