Accessibilità per i temi

Questa pagina è stata stampata il Apr 18, 2024. Per la versione aggiornata, visita https://help.shopify.com/it/manual/online-store/themes/customizing-themes/accessibility.

Quando personalizzi il tema, scegli design e contenuti che aiutino a mantenere accessibile il tuo negozio online. Un sito web accessibile è progettato in modo da poter essere utilizzato da tutti, incluse le persone con disabilità. Scegliere il tuo negozio online prestando attenzione al fattore dell'accessibilità può aiutarti a fornire un'esperienza inclusiva a tutti i tuoi clienti.

Le seguenti linee guida sono state create tenendo in considerazione le Linee guida per l'accessibilità ai contenuti del web (WCAG). Poiché ci sono molti fattori da considerare quando si crea un sito web accessibile, se si seguono solamente le linee guida seguenti non si ha la garanzia che il negozio online sia completamente accessibile. Per ulteriori informazioni sull'accessibilità web visita il sito web WCAG o verifica le risorse elencate di seguito.

Su questa pagina

Accessibilità del testo

È importante che il testo presente nel tuo negozio online risulti leggibile anche per i clienti ipovedenti o con difficoltà a leggere grandi blocchi di testo.

Contrasto di colori

Quando modifichi i colori del tuo negozio online, assicurati che il testo sia accessibile ai clienti daltonici o ipovedenti. Questi clienti differenziano visivamente un oggetto da un altro grazie a un adeguato contrasto di colori. Puoi utilizzare uno strumento per il rapporto di contrasto online per controllare le differenti sezioni del tuo negozio.

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

Un blocco di testo grigio chiaro su uno sfondo completamente bianco.

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

Un blocco di testo grigio scuro su uno sfondo completamente bianco.

Controlla il contrasto di tutti i campi di testo, compresi corpo del testo, titoli, link e campi del modulo. Attieniti alle seguenti linee guida:

  • Il rapporto di contrasto del colore del corpo del testo e del testo dei pulsanti rispetto allo sfondo deve essere almeno 4,5:1.
  • Il Il rapporto di contrasto del colore dei titoli e di altri testi di grandi dimensioni (font pari o superiore a 24 px) rispetto allo sfondo deve essere almeno 3:1.
  • Il colore del testo sulle immagini, comprese presentazioni, banner e video, ha un rapporto di contrasto sufficiente rispetto allo sfondo. Per testi grandi (dimensione del font uguale o superiore a 24px), il contrasto è di almeno 3:1. Per un testi più piccoli il contrasto è di almeno 4,5:1.
  • Rispetto allo sfondo, il rapporto di contrasto del colore degli elementi non di testo, inclusi i bordi di input e le icone, deve essere almeno 3:1.

Titoli di testo

Quando aggiungi titoli alla tua pagina con il rich text editor, è importante mantenerli in ordine sequenziale (da uno a sei). I titoli vengono utilizzati dalla tecnologia assistiva per comunicare come è organizzato il contenuto della pagina. Saltare i livelli, ad esempio un titolo di livello due seguito da un titolo di livello quattro, può confondere gli utenti. Attieniti alle seguenti linee guida:

  • I titoli sono usati in ordine sequenziale e non saltano livelli.

Dimensione e allineamento del testo

Quando modifichi le impostazioni dei caratteri tipografici del tuo tema, assicurati che il testo sia grande abbastanza per essere letto facilmente dai clienti.

Per essere letto facilmente, il testo deve anche presentare un'adeguata spaziatura tra le parole e le lettere. Nell'esempio seguente, l'allineamento del testo è giustificato e comporta una spaziatura incoerente tra le parole.

Un blocco di testo allineato giustificato. Ogni riga del testo occupa lo spazio da una parte all'altra, forzando la spaziatura tra le parole per adattarla.

Nell'esempio successivo, il testo è allineato a sinistra e questo crea un'adeguata spaziatura tra le parole.

Un blocco di testo allineato a sinistra. È presente una spaziatura adeguata tra le parole.

Quando personalizzi la dimensione e l'allineamento di un testo, attieniti alle seguenti linee guida:

  • La dimensione minima del font per il corpo del testo è l'equivalente di 16 px.
  • L'allineamento del testo non è giustificato. I testi giustificati creano una spaziatura non adeguata tra le parole.

I link testuali devono essere sottolineati o possedere un altro stile visivo distinto rispetto al testo normale. Poiché alcuni clienti hanno difficoltà a visualizzare i colori, per differenziare un link dal resto del testo non è sufficiente modificarne il colore.

I link testuali devono aprirsi nella stessa scheda. I link aperti in una nuova scheda o finestra possono creare confusione, soprattutto sui dispositivi mobili in cui la finestra precedente non è visibile e che non sono inclusivi per i clienti, specialmente per quelli che utilizzano l'ingrandimento dello schermo o sono meno esperti.

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

  • I link testuali sono sottolineati o possiedono un altro elemento di differenziazione visiva che non si limiti al colore, in modo che i clienti possano distinguere i link dal testo normale.
  • I link testuali si aprono nella stessa scheda al clic.

Testo alternativo per le immagini

Quando aggiungi immagini al tuo negozio online, è importante renderle accessibili ai clienti non vedenti o ipovedenti. A tale scopo, puoi aggiungere un testo alternativo che descrive accuratamente ogni immagine. I clienti che utilizzano i lettori di schermo fanno affidamento sul testo alternativo che descrive il contenuto delle immagini presenti nel tuo negozio online.

Puoi aggiungere il testo alternativo alle immagini del prodotto dal pannello di controllo Shopify. Puoi aggiungere testo alternativo alle altre immagini del tuo tema dall'editor del tema.

Quando aggiungi un testo alternativo a un'immagine, può essere utile fingere di descriverla a qualcuno che tiene gli occhi chiusi, per aiutarlo a crearsi un'immagine nella mente. Il modo in cui descrivi un'immagine dipende anche dal contesto della tua pagina web. Ad esempio, la descrizione della stessa immagine può essere diversa se la tua azienda è un'agenzia di viaggi o un negozio di attrezzature per esterni. Esamina la seguente immagine:

Due amiche con gli zaini sulle spalle si abbracciano guardando l'oceano

Un'agenzia di viaggi può fare riferimento al paese e alla regione in cui le due amiche si trovano e al nome dell'oceano o del mare che stanno ammirando. Un negozio di attrezzature per esterni può concentrarsi sui marchi e sulle caratteristiche degli zaini delle due amiche.

Se la tua azienda è un'agenzia di viaggi, un esempio di testo alternativo poco efficace potrebbe essere: "Due persone di fronte all'oceano". Per la stessa agenzia, un esempio di buon testo alternativo potrebbe essere: "Due amiche che viaggiano a Lagos, in Portogallo, e ammirano la baia sabbiosa di Praia do Camilo in una giornata di sole."

Accessibilità a presentazioni e video

Quando aggiungi i video al tuo negozio online, assicurati di considerare le necessità dei clienti ipovedenti, con disabilità uditive o disturbi vestibolari.

Alcuni di questi clienti fanno affidamento sulle capacità di sintesi vocale dei lettori di schermo che leggono a voce alta i contenuti di una pagina web. Ulteriori suoni provenienti da video e musica, specialmente quando inaspettati, possono rendere questa esperienza molto difficile. Per i clienti con disabilità uditive, è opportuno aggiungere sottotitoli ai video in modo che possano accedere ai contenuti.

I clienti con disturbi vestibolari possono sperimentare vertigini in presenza di 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 tramite i pulsanti di controllo.

Presentazioni

Per aggiungere una presentazione al tuo negozio online, tieni in considerazione le seguenti linee guida:

  • Le presentazioni non vengono riprodotte automaticamente.
  • Se le presentazioni vengono riprodotte automaticamente, includono i controlli della presentazione che i clienti possono utilizzare per metterla in pausa, mandarla avanti o interromperla.

Video

Quando aggiungi un video al tuo negozio online, tieni in considerazione le seguenti linee guida:

  • I video non vengono riprodotti automaticamente.
  • Se i video vengono riprodotti automaticamente, l'audio è disattivato.
  • Nei video che includono l'audio, le immagini sono completamente visibili e non ostruite da altri elementi della pagina. Questo consente alle didascalie chiuse di rimanere visibili.
  • Per i video che includono dialoghi, sono disponibili le trascrizioni del testo. Queste sono incluse sia nella pagina, sia in un link ad una pagina separata.

Queste linee guida si applicano anche ai video inclusi nelle presentazioni.

Supporto da tastiera

I clienti con disabilità visive o motorie possono usare la tastiera per navigare e completare le attività online. Questi clienti si basano su un indicatore visivo che comunica dove si trova il focus della tastiera su una pagina web. Nell'esempio seguente, l'Email presenta un indicatore visivo del focus:

Una schermata di accesso per i clienti di un negozio online con i campi modulo relativi a email e password. Il campo Email è delineato in blu.

Se modifichi il foglio di stile del tema, assicurati di non rimuovere lo stile del controllo della tastiera da nessun elemento della pagina. Attieniti alle seguenti linee guida:

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

Risorse

Per ulteriori informazioni sull'accessibilità web relativa agli argomenti trattati in questo articolo, consulta le seguenti risorse.

Risorse per il contrasto di colore

  • Colors with Good Contrast, un articolo pubblicato da Web Accessibility Initiative
  • Contrast Ratio, uno strumento online che puoi utilizzare per trovare il giusto rapporto di contrasto tra due colori
  • Color Contrast Analyzer, un'applicazione per il rapporto di contrasto sviluppata da Paciello Group e disponibile per il download

Risorse per il testo

Risorse alternative per il testo

Risorse per presentazioni e video

Risorse per il supporto della tastiera

In questa sezione

Sei pronto per iniziare a vendere con Shopify?

Provalo, è gratis