Accessibilità per i temi

Quando personalizzi il tema, cerca di scegliere 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à. L'accessibilità è essenziale per consentire al tuo negozio online di offrire un'esperienza inclusiva ai 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 sia completamente accessibile. Per ulteriori informazioni sull'accessibilità web visita il sito WCAG o verifica le risorse elencate di seguito

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 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 carattere 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 (1 - 6). I titoli vengono utilizzati dalle tecnologie assistive per comunicare come è organizzato il contenuto della pagina. Saltare i livelli, ad esempio un titolo di livello 2 seguito da un titolo di livello 4, 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.

Quando aggiungi link al tuo testo, assicurati che possano essere individuati da tutti i tuoi clienti. Poiché alcuni clienti hanno difficoltà a visualizzare i colori, non è sufficiente solo modificare il colore per differenziare un link da un semplice testo. Nell'esempio sotto, il testo Scopri la nostra storia è sottolineato in modo che non sia solo il colore a indicare che si tratta di un link:

Un messaggio di benvenuto che riporta

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

  • I link testuali sono sottolineati o possiedono un altro elemento di differenziazione visiva rispetto al testo normale.

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 di prodotto dal pannello di controllo Shopify. Puoi aggiungere testo alternativo alle altre immagini del tuo tema dall'editor di temi.

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.

Presentazioni

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

  • Le presentazioni non vengono riprodotte automaticamente.
  • Le presentazioni riprodotte automaticamente includono un'impostazione che i clienti possono utilizzare per metterle in pausa o interromperle.

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

Sei pronto per iniziare a vendere con Shopify?

Provalo, è gratis