Accessibilità e prestazioni

Tenora è pensato per essere usato da tutti e per caricarsi velocemente sugli smartphone. Questa pagina spiega cosa fa il tema per te e cosa puoi fare per mantenere il negozio accessibile e veloce.

Cosa fa il tema per l'accessibilità

Tenora è stato testato secondo le Web Content Accessibility Guidelines (WCAG) 2.2, livello AA, con controlli automatici e test da tastiera su ogni modello.

Uso della tastiera

• Ogni link, pulsante, menu, pannello a scomparsa e modulo si può usare solo con la tastiera.
• I pannelli a scomparsa (menu, carrello, filtri, punti di ritiro, paese e lingua) mantengono il focus della tastiera al loro interno finché sono aperti. Il tasto Esc li chiude e il focus torna dove si trovava.
• I punti di Acquista la stanza, il modulo "Ci starà?", lo zoom delle immagini e il selettore cm/in funzionano tutti con la tastiera.
• Quando un cliente rimuove un articolo dal carrello, il focus passa all'articolo successivo o al titolo del carrello.

Focus visibile

Quando un cliente si sposta nella pagina con il tasto Tab, l'elemento con il focus ha un contorno ben visibile. L'ordine del focus segue l'ordine della pagina.

Link per saltare al contenuto

La prima volta che un cliente preme Tab, compare il link Vai al contenuto. Salta l'header e porta al contenuto principale della pagina.

Animazioni ridotte

Alcune persone attivano sul proprio dispositivo l'impostazione "riduci movimento". Per questi clienti, il tema:

• disattiva animazioni e transizioni, come la dissolvenza in entrata delle sezioni
• interrompe la rotazione automatica della barra degli annunci
• disattiva lo scorrimento fluido

Contrasto dei colori

• Tutti i colori di testo e sfondo dei preset Tenora, Terrace e Lantern raggiungono un rapporto di contrasto di almeno 4.5:1 (WCAG AA). Bordi e icone raggiungono almeno 3:1.
• I messaggi di errore e di conferma usano il colore del testo dello schema di colori con un'icona colorata. Restano leggibili con ogni schema di colori.
• Se cambi i colori, mantieni un rapporto di contrasto di almeno 4.5:1 tra testo e sfondo. Puoi verificare una coppia di colori con un qualsiasi strumento online per il controllo del contrasto.

Screen reader

• Le pagine usano titoli e aree di riferimento (landmark) corretti, come header, contenuto principale e footer.
• Prezzi, prezzi unitari, prezzi scontati e stati delle scorte hanno etichette chiare per gli screen reader.
• I risultati di "Ci starà?" e il numero di paesi trovati dalla ricerca dei paesi vengono annunciati.
• Pulsanti e campi dei moduli hanno etichette, anche nelle 30 lingue tradotte.
• Le aree di tocco misurano almeno 24 x 24 pixel.

Direzione del testo e lingua

La lingua della pagina e la direzione del testo dipendono dalla lingua del negozio. Le lingue da destra a sinistra vengono capovolte automaticamente. Consulta Vendere a livello internazionale.

Cosa puoi fare: il testo alternativo

Il testo alternativo (alt text) descrive un'immagine per chi non può vederla. Gli screen reader lo leggono ad alta voce e i motori di ricerca lo usano.

Dove aggiungere il testo alternativo

• Immagini dei prodotti: apri un prodotto nel pannello di controllo Shopify, seleziona un'immagine e seleziona Aggiungi testo alternativo (Add alt text).
• Immagini nelle sezioni e nei file: vai su Contenuti (Content) → File (Files), seleziona l'immagine e modificane il testo alternativo.
• Immagini delle collezioni: apri la collezione nel pannello di controllo Shopify e modifica l'immagine.

Come scrivere un buon testo alternativo

• Descrivi cosa mostra l'immagine e perché è importante. Ad esempio: "Tavolo da pranzo in rovere con sei sedie in lino in una stanza luminosa".
• Sii breve, di solito basta una frase.
• Non iniziare con "Immagine di" o "Foto di".
• Includi i dettagli che aiutano a scegliere, come colore, materiale o misura.
• Non ripetere il titolo del prodotto se l'immagine non aggiunge nulla di nuovo. Descrivi invece la vista, ad esempio "Vista laterale con le sottili gambe in rovere".

Cosa fa automaticamente il tema

• Nella galleria del prodotto, le immagini senza testo alternativo usano il titolo del prodotto.
• Alcune immagini sono decorative, come le immagini dei materiali nelle schede di Materiali e cura e l'immagine del campione accanto al suo titolo. Il tema le nasconde agli screen reader, perché il testo accanto le descrive già.
• Se l'immagine del logo non ha un testo alternativo, il logo usa il nome del negozio.

Cosa fa il tema per la velocità

• Le pagine vengono generate sul server. Il tema usa poco JavaScript e ogni sezione carica il proprio script solo quando la sezione è presente nella pagina. Ad esempio, lo script di "Ci starà?" si carica solo sui prodotti con dimensioni.
• Gli stili specifici di una pagina, come quelli della pagina prodotto e dei filtri, si caricano solo nelle pagine che li usano.
• Le immagini sono disponibili in più dimensioni, così ogni dispositivo scarica quella di cui ha bisogno. Le immagini sotto la prima schermata si caricano solo quando il cliente scorre fino a loro.
• La prima immagine grande della pagina (ad esempio il banner con immagine) si carica per prima, così la pagina sembra pronta prima.
• I video di YouTube e Vimeo si caricano solo quando il cliente li avvia.
• I prodotti correlati si caricano quando il cliente scorre fino a loro.
• I font provengono dalla libreria di font di Shopify e il testo viene mostrato subito mentre il font si carica.

Cosa puoi fare: mantenere veloce il negozio

Usa le dimensioni giuste per le immagini

Shopify ridimensiona le immagini per ogni dispositivo, ma un buon originale aiuta. Usa queste dimensioni:

Dove	Dimensione consigliata
Banner con immagine	.jpg da 2400 x 1350px
Banner con immagine, immagine per dispositivi mobili (facoltativa)	.jpg da 1080 x 1350px
Immagine con testo	.jpg da 1500 x 1875px
Acquista la stanza	Formato 3:2, ad esempio .jpg da 2400 x 1600px
Promozione nel mega menu	Formato 4:3
Immagine di copertina del video	Formato 16:9
Immagini dei prodotti	Almeno 2000px sul lato più lungo, tutte con lo stesso formato
Elenco di loghi	.png trasparente o .svg
Favicon	.png da 32 x 32px

Suggerimenti

• Usa .jpg per le foto e .png o .svg per i loghi.
• Comprimi le foto prima di caricarle. Punta a meno di 500 KB per foto.
• Imposta un punto focale sulle immagini importanti. Nell'editor del tema, seleziona l'immagine e scegli il punto focale. Tenora lo usa quando ritaglia l'immagine.

Installa meno app

Molte app aggiungono script e stili propri a ogni pagina, anche quando non li vedi. Questo può rallentare il negozio.

• Tenora include già dimensioni, "Ci starà?", materiali, campioni, dettagli di consegna e Acquista la stanza. Non ti serve un'app per queste funzioni.
• Rimuovi le app che non usi. Dopo aver disinstallato un'app, controlla che non abbia lasciato codice nel tema. In caso contrario, contatta lo sviluppatore dell'app.
• Prima di installare un'app, controlla la velocità del negozio. Ricontrollala dopo l'installazione.

Usa i video con attenzione

• Aggiungi un'Immagine di copertina alla sezione Video. L'immagine di copertina viene mostrata finché il cliente non avvia il video, e solo allora si carica il player.
• Mantieni brevi i video ospitati su Shopify e usa file di dimensioni ragionevoli.
• Non usare un video come primo elemento della home page se un'immagine può fare lo stesso lavoro. Le immagini si caricano più velocemente.

Mantieni la home page essenziale

Ogni sezione aggiunge contenuti da scaricare. Usa le sezioni più utili per i clienti e rimuovi quelle che non ti servono.

Controlla la velocità

Nel pannello di controllo Shopify, vai su Negozio online (Online Store) → Temi (Themes) e consulta il report sulla velocità del negozio. Ricontrollalo dopo modifiche importanti, come nuove app o nuove sezioni nella home page.