Accessibilità

Link in evidenza

1. Documentazione W3C sulle Linee guida per l’accessibilità dei contenuti Web
2. Documentazione Shopify sull’accessibilità dei temi
3. Documentazione per sviluppatori Shopify sull’accessibilità dei temi
4. Rapporto di contrasto
5. Documentazione Shopify sull’editor di testo avanzato
6. Documentazione Shopify sull’aggiunta del testo alternativo alle immagini dei prodotti
7. Documentazione Shopify sull’aggiunta del testo alternativo alle immagini del tema
8. Articolo di The A11Y Project sui disturbi vestibolari
9. Documentazione W3C sulla sintesi vocale

Video utili

Articolo del Centro assistenza Vimeo su didascalie e sottotitoli

Quando personalizzi Align in Shopify e aggiungi contenuti al negozio, le scelte di design accessibili aiutano un maggior numero di clienti a usare il tuo negozio online, comprese le persone con disabilità.

Questi consigli si basano sulle Linee guida per l’accessibilità dei contenuti Web (WCAG). L’accessibilità dipende da molti fattori, quindi seguire solo queste linee guida non garantisce che il tuo negozio sia completamente accessibile. Per ulteriori indicazioni, consulta le risorse sull’accessibilità di Shopify.

Consiglio

Per indicazioni avanzate sull’accessibilità dei temi, visita Shopify.dev

Accessibilità del testo

Un testo chiaro e leggibile aiuta i clienti ipovedenti e quelli che hanno difficoltà a leggere contenuti densi.

Contrasto dei colori

Usa un contrasto sufficiente tra il testo e lo sfondo, in modo che i clienti possano distinguere i contenuti, comprese le persone daltoniche o ipovedenti. Verifica le combinazioni di colori con uno strumento online per il rapporto di contrasto

Ad esempio, per alcuni clienti un testo con un rapporto di contrasto di 2.4:1 può essere difficile da leggere, mentre un rapporto di 4.8:1 è più facile da leggere per molte persone. Controlla il testo del corpo, i titoli, i link, i campi dei moduli e il testo sovrapposto alle immagini.

1. Usa un rapporto di contrasto di almeno 4.5:1 per il testo del corpo e il testo dei pulsanti.
2. Usa un rapporto di contrasto di almeno 3:1 per i titoli e gli altri testi di grandi dimensioni, pari o superiori a 24 px.
3. Assicurati che il testo sovrapposto a immagini, presentazioni, banner e video rispetti il rapporto appropriato: almeno 3:1 per i testi di grandi dimensioni e 4.5:1 per i testi più piccoli.
4. Usa un rapporto di contrasto di almeno 3:1 per gli elementi non testuali, come i bordi dei campi di input e le icone.

Consiglio

Se Align include un’opzione di sovrapposizione delle immagini per il contenuto che stai modificando, usala dietro al testo su un’immagine per migliorare il contrasto e la leggibilità.

Titoli del testo

Usa i livelli dei titoli in sequenza quando aggiungi titoli con l’editor di testo avanzato. Le tecnologie assistive usano i titoli per comunicare l’organizzazione di una pagina, quindi passare dal livello di titolo 2 al livello 4 può creare confusione.

1. Usa i livelli dei titoli in ordine sequenziale, senza saltare alcun livello.

Dimensione e allineamento del testo

Scegli dimensioni del testo che i clienti possano leggere comodamente e mantieni una spaziatura uniforme tra parole e lettere. Evita l’allineamento giustificato, perché può creare spazi irregolari tra le parole.

1. Imposta il testo del corpo sull’equivalente di almeno 16 px.
2. Usa testo allineato a sinistra invece del testo giustificato.

Nota

Le famiglie di caratteri possono apparire più grandi o più piccole a parità di dimensione. Se un carattere appare più piccolo di altri caratteri a 16 px, scegli una dimensione maggiore.

Link nel testo

Rendi i link identificabili senza affidarti solo al colore. Sottolineare i link o usare un’altra distinzione visiva chiara rispetto al testo normale aiuta i clienti che hanno difficoltà a percepire i cambiamenti di colore.

1. Sottolinea i link testuali o fornisci un altro elemento visivo chiaramente distinguibile dal testo circostante.

Testo alternativo per le immagini

Il testo alternativo aiuta i clienti ciechi o ipovedenti a comprendere il contenuto delle immagini tramite gli screen reader. Aggiungi un testo alternativo accurato a ogni immagine significativa.

Puoi aggiungere il testo alternativo alle immagini dei prodotti nell’admin Shopify. Puoi aggiungere il testo alternativo alle altre immagini del tema nell’editor del tema.

Scrivi il testo alternativo come se stessi descrivendo l’immagine a una persona con gli occhi chiusi. Descrivi i dettagli importanti nel contesto della pagina e della tua attività. Ad esempio, un’agenzia di viaggi potrebbe descrivere il luogo e il paesaggio di un’immagine, mentre un negozio di attrezzatura per attività all’aperto potrebbe concentrarsi sui marchi e sulle caratteristiche degli zaini mostrati.

Per un’agenzia di viaggi, “Due persone davanti all’oceano” fornisce pochi dettagli utili. “Due amici in viaggio a Lagos, in Portogallo, guardano la caletta sabbiosa di Praia do Camilo in una giornata di sole” è più descrittivo.

Aggiungere il testo alternativo alle immagini del tema

1. Nell’admin Shopify, vai su Online Store > Themes
2. Trova il tema Align che vuoi modificare, quindi fai clic su Customize.
3. Nella barra laterale dell’editor del tema, seleziona la sezione che contiene l’immagine.
4. Seleziona Edit sull’immagine.
5. Inserisci il testo alternativo nella finestra di dialogo, quindi fai clic su Save.
6. Fai di nuovo clic su Save per salvare le modifiche al tema.

Accessibilità di presentazioni e video

Quando aggiungi presentazioni e video, considera i clienti ipovedenti, i clienti sordi o con problemi di udito e i clienti che potrebbero essere soggetti a disturbi vestibolari

Alcuni clienti usano la sintesi vocale degli screen reader e l’audio o la musica imprevisti dei video possono rendere difficile l’utilizzo di una pagina. I sottotitoli aiutano i clienti sordi o con problemi di udito ad accedere ai contenuti video. I contenuti in movimento possono causare vertigini ai clienti con disturbi vestibolari.

Presentazioni

1. Non impostare le presentazioni per la riproduzione automatica.
2. Se una presentazione viene riprodotta automaticamente, fornisci un’impostazione che i clienti possano usare per metterla in pausa o interromperla.

Video

1. Non impostare i video per la riproduzione automatica.
2. Se un video viene riprodotto automaticamente, disattiva l’audio.
3. Mantieni i video con audio completamente visibili e senza ostacoli, in modo che i sottotitoli rimangano visibili.
4. Fornisci trascrizioni testuali per i video con dialoghi, sulla pagina o tramite un link a una pagina separata.
5. Applica queste linee guida anche ai video inclusi nelle presentazioni.

Supporto per la tastiera

I clienti con disabilità visive o motorie possono usare una tastiera per navigare e completare le attività. Un chiaro indicatore visivo del focus mostra quale elemento della pagina è attualmente selezionato, ad esempio un campo Email.

1. Assicurati che ogni elemento interattivo disponga di un chiaro indicatore visivo del focus da tastiera, inclusi link, pulsanti e campi dei moduli.