-
Customer Experience -
Employee Experience -
Brand Experience -
Core XM -
Design XM
Accessibilità Insights sito Web/app
Funzionalità di accessibilità di Insights sito Web/app
I progetti Website / App Insights hanno molte funzionalità integrate per rendere l’accessibilità senza sforzo. Di seguito sono riportate alcune delle funzionalità di accessibilità che ci si aspetta di trovare in tutta la piattaforma:
- Tutti gli elementi creativi sono tabulabili e selezionabili tramite tastiera. Sono supportati TAB, ESC e Enter (e invio, per Mac Users), ma non i tasti freccia o altri.
- Per gli editor di intercetta Pop Over e Dialogo reattivo, gli utenti non possono effettuare la scheda al di fuori del creativo fino a quando non è chiuso. Inoltre, non consente l’inserimento di tabulazioni nella pagina sottostante.
- Per i creativi Pop Over e Dialogo reattivo, lo stato attivo viene applicato direttamente al creativo una volta visualizzato.
- Se vengono utilizzate destinazioni incorporate, gli utenti possono fare clic con il pulsante destro del mouse sulla destinazione incorporata e aggiungere un titolo iframe.
- Se le finestre incorporate sono utilizzate nelle opzioni avanzate dell’intercettazione, gli utenti possono aggiungere un titolo iframe.
Poi, tratteremo le funzioni di accessibilità uniche per le esigenze del design di ogni creativo.
Creativo dialogo reattivo
- Facile definizione di Testo Alt: se viene utilizzata un’icona personalizzata all’interno della finestra di dialogo, si consente agli utenti di specificare Testo Alt per indicare il testo che il programma di lettura dello schermo deve leggere quando l’area attiva è sull’icona.
Qtip: se scegli di includere un’icona per scartare l’intercettazione, il testo alternativo per il pulsante X che appare nell’angolo in alto a destra del creativo è “chiuso”. Anche questo testo alternativo è localizzato.
- Etichette ARIA per i controlli dei pulsanti: per impostazione predefinita, i programmi di lettura dello schermo leggeranno il testo specificato per l’etichetta del pulsante. Tuttavia, in alcuni casi, è possibile che si desideri che il programma di lettura dello schermo legga un contesto aggiuntivo, ad esempio “Fare clic su questo pulsante per aprire una nuova finestra del sondaggio”. In questo caso, è possibile specificare l’etichetta ARIA per i pulsanti di comando.
- Differenze di colore per gli elementi all’interno del Creativo stesso: Sebbene Qualtrics non possa fornire una guida diretta al contrasto, gli utenti hanno pieno controllo per scegliere il colore appropriato per gli elementi creativi.
Creativo pulsante feedback
- Titoli iframe: Capacità di specificare un titolo iframe nella sezione Animazione.
- Testo alternativo pulsante personalizzato: possibilità di specificare testo alternativo per un’immagine se viene utilizzato un pulsante personalizzato.
Pop over, slider, InfoBar e editor di intercetta HTML personalizzati
- Differenze di colore per gli elementi all’interno del Creativo stesso: Sebbene Qualtrics non possa fornire una guida diretta al contrasto, gli utenti hanno pieno controllo per scegliere il colore appropriato per gli elementi creativi.
Qtip: i pulsanti target su questi creativi necessitano di ulteriori modifiche per renderli accessibili, poiché i nomi e i ruoli dei pulsanti scelti possono variare. Consultare le sezioni collegate della pagina di supporto per maggiori dettagli.
App mobile SDK
- Accessibile alle utilità per la lettura dello schermo mobile:
- Semplifica la navigazione e l’uscita dalla finestra di dialogo da parte dei programmi di lettura dello schermo.
- Consente la lettura del testo all’interno dei pulsanti e anche del tipo di posizione (ad es. pulsante di comando).
Creazione di un editor di intercetta per dialogo reattivo accessibile
Questa sezione descrive come modificare un editor di intercetta per finestre di dialogo reattive in modo che sia accessibile ai lettori schermo.
- Navigare alla pagina Progetti, quindi creare un progetto Website / App Insights.
- Fare clic su Crea nuovo.
- Seleziona Finestra di dialogo reattiva come tipo di intercetta.
- Assegna un nome all’intercetta.
- Scegliere un sondaggio da collegare o immettere un URL personalizzato a cui indirizzare.
- Fare clic su Successivo.
- Selezionare Pulsanti.
- Inserire il testo appropriato per ciascuno dei pulsanti nella sezione Testo. Questo testo verrà visualizzato agli utenti e letto ad alta voce dai programmi di lettura dello schermo.
- Fare clic su Loghi & immagini.
- Modificare la sezione Testo alternativo per fornire una descrizione scritta del grafico. I visitatori che utilizzano programmi di lettura dello schermo avranno il testo alternativo letto, in modo da sapere che cos’è l’immagine se sono ipovedenti.
- Se stai visualizzando il tuo sondaggio direttamente nella finestra di dialogo, vai a Dimensioni & Stile.
- Casella di spunta per Visualizzare indagine direttamente nella finestra di dialogo.
- Nella casella del titolo Iframe, immettere il testo che si desidera venga letto dai programmi di lettura dello schermo quando incontrano per la prima volta il sondaggio.
Consiglio Q: se non stai utilizzando il flusso di lavoro guidato per creare la tua intercetta, segui i passaggi 7-13 per ogni editor di intercetta.
Creazione di un creativo pulsante feedback accessibile
- Navigare alla pagina Progetti, quindi creare un progetto Website / App Insights.
- Fare clic su Crea nuovo.
- Seleziona Pulsante feedback come tipo di intercetta.
- Assegna un nome all’intercetta.
- Scegliere un sondaggio da collegare o immettere un URL personalizzato a cui indirizzare.
- Fare clic su Successivo.
- Passa a aspetto & sentimento.
- Inserire il testo appropriato per i pulsanti nella sezione Testo pulsante. Questo testo verrà visualizzato agli utenti e letto ad alta voce dai programmi di lettura dello schermo.
- Se si utilizza un pulsante personalizzato, selezionare Usa il mio pulsante e caricare l’immagine appropriata dal computer.
- Una volta caricata l’immagine, modificare il testo Alt per fornire una descrizione scritta del pulsante. I visitatori che utilizzano programmi di lettura dello schermo avranno il testo alternativo letto, in modo da sapere che cos’è l’immagine se sono ipovedenti.
- Fare clic su Visualizzazione sondaggio.
- Specificare un titolo iframe nella sezione Titolo Iframe. Se hai aggiunto una destinazione incorporata alla tua intercetta, questa opzione aggiungerà un titolo all’iframe che i lettori dello schermo possono interpretare.
Aggiunta di testo alternativo e ruoli ai pulsanti di comando di destinazione
Qtip: se non hai accesso a nessuna delle funzionalità descritte in questa sezione, contatta il tuo Account Executive. Per ulteriori informazioni sulle differenze tra Digital Feedback e CustomerXM for Digital, consultare Digital Feedback vs. CustomerXM for Digital.
Qtip: le finestre di dialogo reattive e i pulsanti di feedback non richiedono questo passaggio.
Attenzione: le funzionalità di codifica personalizzata sono fornite così com’è e potrebbero richiedere conoscenze di programmazione per l’implementazione. Il nostro team di supporto non offre assistenza o consulenza sulla codifica personalizzata. Puoi invece provare a domandare alla nostra community di utenti esperti. Se desideri saperne di più sui nostri servizi di programmazione personalizzata disponibili per l’acquisto, contatta il tuo Account Executive Qualtrics.
Se la destinazione è sotto forma di immagine del pulsante caricata, l’aggiunta di testo alternativo e di un attributo del ruolo consente al programma di lettura dello schermo di comprendere cosa si suppone debba dire e cosa fare il pulsante.
- Apri il tuo creativo nella scheda Creativi.
- Fare doppio clic sull’elemento Destinazione che contiene l’immagine.
- Fare clic su Origine.
- All’interno del<img> tag, aggiungere un attributo
<img alt="text here" />alt al tag e impostare il valore uguale al testo dell’immagine.<img alt="Sign Up Now" ... />Qtip: il software di lettura dello schermo leggerà ad alta voce ciò che è contenuto nell’attributo alt quando arriverà all’immagine.
- Circonda il<img> tag con un<span> tag.
- Aggiungere un attributo role=”button” al<span> tag.
<span role="button"><img .../></span>Qtip: l’attributo del ruolo indica al visitatore che utilizza un lettore schermo che questo elemento è un pulsante attivabile.
Destinazioni standard (testo link)
- Apri il tuo creativo nella scheda Creativi.
- Fare doppio clic sull’elemento di destinazione che contiene il testo.
- Fare clic su Origine.
- Aggiungere un attributo role=”button” al<span> tag.
<span role="button" ... >Contenuto casella di testo</span>
Aggiunta di testo alternativo e ruoli per i pulsanti di chiusura
Qtip: le finestre di dialogo reattive e i pulsanti di feedback non richiedono questo passaggio.
Attenzione: le funzionalità di codifica personalizzata sono fornite così com’è e potrebbero richiedere conoscenze di programmazione per l’implementazione. Il nostro team di supporto non offre assistenza o consulenza sulla codifica personalizzata. Puoi invece provare a domandare alla nostra community di utenti esperti. Se desideri saperne di più sui nostri servizi di programmazione personalizzata disponibili per l’acquisto, contatta il tuo Account Executive Qualtrics.
Pulsante Chiudi come immagine
- Apri il tuo creativo nella scheda Creativi.
- Fare doppio clic sull’elemento Close che contiene l’immagine.
- Fare clic su Origine.
- Aggiungere l’attributo alt=”close” al<img> tag.
<img alt="close" ... />Qtip: il software di lettura dello schermo leggerà ad alta voce ciò che è contenuto nell’attributo alt quando arriverà all’immagine.
- Circonda il<img> tag con un<span> tag.
- Aggiungere un attributo role=”button” al<span> tag.
<span role="button"><img .../></span>Qtip: l’attributo del ruolo indica al visitatore che utilizza un lettore schermo che questo elemento è un pulsante attivabile.
Pulsante Chiudi come testo
- Apri il tuo creativo nella scheda Creativi.
- Fare doppio clic sull’elemento Close che contiene il testo.
- Fare clic su Origine.
- Aggiungere un attributo role=”button” al<span> tag.
<span role="button" ...>Contenuto casella di testo</span>Qtip: l’attributo del ruolo indica al visitatore che utilizza un lettore schermo che questo elemento è un pulsante attivabile.