Guida
Accedi

Accessibilità per i temi

Quando personalizzi il tema, fai scelte di design e di contenuto che aiutino a mantenere accessibile il tuo negozio online. Un sito web accessibile è progettato in modo che possa essere utilizzato da tutti, comprese le persone con disabilità. Fare scelte per il negozio online tenendo conto dell'accessibilità può aiutarti a fornire un'esperienza inclusiva a tutti i clienti.

Le seguenti linee guida sono state create tenendo conto delle Web Content Accessibility Guidelines (WCAG). Poiché i fattori da considerare per la creazione di un sito web accessibile sono molti, seguire solo le linee guida seguenti non garantisce che il tuo negozio online sia completamente accessibile. Puoi scoprire di più sull'accessibilità del web visitando il sito web delle WCAG o consultando le risorse elencate di seguito.

In questa pagina

Accessibilità del testo

È importante che il testo del negozio online sia leggibile per i clienti con disabilità visive o che hanno difficoltà a leggere blocchi di testo densi.

Contrasto cromatico

Quando modifichi i colori del negozio online, assicurati che tutto il testo sia accessibile ai clienti daltonici o con altre disabilità visive. Questi clienti si affidano a un contrasto cromatico adeguato per distinguere visivamente gli elementi tra loro. Puoi utilizzare uno strumento online per il rapporto di contrasto per controllare il contrasto delle diverse parti del negozio.

Nell'esempio seguente, il testo ha un rapporto di contrasto di 2,4:1 rispetto allo sfondo ed è difficile da leggere per alcuni clienti.

Un blocco di testo grigio chiaro e uno sfondo bianco a tinta unita.

Nell'esempio successivo, il testo ha un rapporto di contrasto di 4,8:1 ed è più facile da leggere per molti clienti.

Un blocco di testo grigio scuro su uno sfondo bianco a tinta unita.

Testa il contrasto di tutto il testo, inclusi corpo del testo, intestazioni, link e campi dei moduli. Utilizza le seguenti linee guida:

  • Il colore del corpo del testo e del testo dei pulsanti ha un rapporto di contrasto di almeno 4,5:1 rispetto allo sfondo.
  • Il colore delle intestazioni e di altro testo di grandi dimensioni (dimensione del font pari o superiore a 24 px) ha un rapporto di contrasto di almeno 3:1 rispetto allo sfondo.
  • Il colore di tutto il testo sopra le immagini, incluse presentazioni, banner e video, ha rapporti di contrasto sufficienti rispetto allo sfondo. Per il testo di grandi dimensioni (dimensione del font pari o superiore a 24 px), il contrasto è di almeno 3:1. Per il testo più piccolo, il contrasto è di almeno 4,5:1.
  • Il colore degli elementi non testuali, inclusi i bordi di input e le icone, ha un rapporto di contrasto di almeno 3:1 rispetto allo sfondo.

Intestazioni di testo

Quando aggiungi intestazioni alla pagina con l'editor di testo RTF, è importante mantenerle in ordine sequenziale (da 1 a 6). Le intestazioni vengono utilizzate dalle tecnologie assistive per comunicare l'organizzazione dei contenuti della pagina. Saltare i livelli, ad esempio utilizzare un'intestazione di livello 4 dopo una di livello 2, può confondere gli utenti. Utilizza la seguente linea guida:

  • Le intestazioni sono utilizzate in ordine sequenziale senza saltare alcun livello.

Dimensione e allineamento del testo

Quando modifichi le impostazioni tipografiche del tema, assicurati che il testo sia sufficientemente grande da poter essere letto comodamente dai clienti.

Il testo dovrebbe avere anche una spaziatura uniforme tra parole e lettere per facilitarne la lettura. Nell'esempio seguente, l'allineamento del testo è giustificato, il che crea una spaziatura non uniforme tra le parole.

Un blocco di testo con allineamento giustificato. Ogni riga di testo occupa l'intero spazio, forzando una spaziatura variabile tra le parole per adattarsi.

Nell'esempio successivo, l'allineamento del testo è a sinistra, il che crea una spaziatura uniforme tra le parole.

Un blocco di testo allineato a sinistra. La spaziatura tra ogni parola è uniforme.

Quando personalizzi la dimensione e l'allineamento del testo, segui queste linee guida:

  • La dimensione minima del font per il corpo del testo è l'equivalente di 16 px.
  • L'allineamento del testo non è giustificato. Il testo giustificato crea una spaziatura non uniforme tra le parole.

Link di testo

I link di testo dovrebbero essere sottolineati o avere un altro stile visivamente distinto rispetto al testo normale. Poiché alcuni clienti hanno difficoltà a distinguere i colori, non puoi basarti solo su una modifica del colore per differenziare un link dal testo normale.

I link di testo dovrebbero aprirsi nella stessa scheda. I link che si aprono in una nuova scheda o finestra possono creare confusione, specialmente sui dispositivi mobili dove la vecchia finestra non è visibile, e non sono inclusivi per i clienti, in particolare per quelli che utilizzano l'ingrandimento dello schermo o sono meno esperti di tecnologia.

Se modifichi il foglio di stile del tema, assicurati di non rimuovere gli stili dei link di testo. Segui queste linee guida:

  • I link di testo sono sottolineati o hanno un altro elemento di differenziazione visiva, che non sia solo il colore, in modo che i clienti possano differenziare i link dal testo normale.
  • I link di testo si aprono nella stessa scheda quando cliccati.

Testo alternativo per le immagini

Quando aggiungi immagini al negozio online, è importante renderle accessibili ai clienti non vedenti o ipovedenti. Puoi farlo aggiungendo un testo alternativo che descriva accuratamente ogni immagine. I clienti che utilizzano gli screen reader si affidano al testo alternativo per comprendere il contenuto delle immagini presenti sul negozio online.

Puoi aggiungere un testo alternativo alle immagini dei prodotti dal pannello di controllo Shopify. Puoi aggiungere un testo alternativo alle altre immagini del tema dall'editor del tema.

Quando aggiungi un testo alternativo a un'immagine, una buona prassi è fingere di descriverla a qualcuno che ha gli occhi chiusi. Aiutalo a crearsi un'immagine mentale. Il modo in cui descrivi un'immagine dipende anche dal contesto della pagina web. Ad esempio, potresti descrivere un'immagine in modo diverso a seconda che la tua attività sia un'agenzia di viaggi o un negozio di attrezzature per attività all'aperto. Considera l'immagine seguente:

Due amici con lo zaino in spalla, abbracciati, che guardano l'oceano

Per un'agenzia di viaggi, potresti fare riferimento al paese e all'area geografica in cui i due amici stanno viaggiando e al nome dell'oceano o del mare che stanno guardando. D'altra parte, per un negozio di attrezzature per attività all'aperto, potresti concentrarti sui brand e sulle caratteristiche degli zaini dei due amici.

Se la tua attività è un'agenzia di viaggi, un esempio di testo alternativo non efficace potrebbe essere: «Due persone di fronte all'oceano». Per la stessa agenzia, un esempio di testo alternativo efficace potrebbe essere: «Due amici in viaggio a Lagos, in Portogallo, che guardano la baia sabbiosa di Praia do Camilo in una giornata di sole».

Accessibilità di presentazioni e video

Quando aggiungi video al negozio online, assicurati di considerare le esigenze dei clienti ipovedenti, non udenti o con problemi di udito, o dei clienti che potrebbero essere soggetti a disturbi vestibolari.

Alcuni di questi clienti si affidano alla funzionalità di sintesi vocale degli screen reader, che leggono ad alta voce i contenuti di una pagina web. L'audio aggiuntivo di video e musica, specialmente se imprevisto, può rendere difficile questa esperienza. Per i clienti non udenti o con problemi di udito, è una buona idea aggiungere i sottotitoli per non udenti ai video, in modo che possano accedere al contenuto.

I clienti con disturbi vestibolari possono provare vertigini con i contenuti in movimento. Per questo motivo, è importante che le presentazioni e i video non vengano riprodotti automaticamente e che il cliente possa controllare la presentazione con i pulsanti di controllo.

Presentazioni

Quando aggiungi una presentazione al negozio online, segui queste linee guida:

  • Le presentazioni non vengono riprodotte automaticamente.
  • Se le presentazioni vengono riprodotte automaticamente, includono i controlli che i clienti possono utilizzare per mettere in pausa, avanzare o interrompere la presentazione.

Video

Quando aggiungi un video al negozio online, segui queste linee guida:

  • I video non vengono riprodotti automaticamente.
  • Se i video vengono riprodotti automaticamente, il loro audio è disattivato.
  • Per i video che includono audio, il video è completamente visibile e non è ostruito da altri elementi della pagina. Ciò consente ai sottotitoli per non udenti di rimanere visibili.
  • Per i video che includono dialoghi, sono disponibili trascrizioni testuali, incluse nella pagina o in un link a una pagina separata.

Queste linee guida si applicano anche ai video presenti in una presentazione.

Supporto per la tastiera

I clienti con disabilità visive o motorie potrebbero usare una tastiera per navigare e completare attività online. Questi clienti si affidano a un indicatore visivo per sapere dove si trova il focus della tastiera su una pagina web. Nell'esempio seguente, il campo Email ha un indicatore visivo del focus:

Una schermata di accesso del cliente su un negozio online che mostra i campi del modulo per Email e Password. Il campo Email è contornato di blu.

Se modifichi il foglio di stile del tema, assicurati di non rimuovere lo stile del focus della tastiera da nessun elemento della pagina. Segui questa linea guida:

  • Tutti gli elementi interattivi della pagina hanno un chiaro indicatore visivo quando hanno il focus della tastiera. Tali elementi includono link, pulsanti e campi del modulo.

Risorse

Per maggiori informazioni sull'accessibilità del web per gli argomenti trattati in questo articolo, consulta le seguenti risorse.

Risorse sul contrasto dei colori

Risorse sul testo

Risorse per il testo alternativo

Risorse per presentazioni e video

Risorse per il supporto della tastiera

In questa sezione