Centro assistenzaAccessibilità digitale
Una panoramica sull'accessibilità dei blocchi nei siti web Tilda e sulle caratteristiche dei blocchi per migliorarla.
La maggior parte dei blocchi presenti nella libreria di blocchi di Tilda sono già ottimizzati per essere utilizzati da persone con disabilità costanti, temporanee o situazionali. In questo articolo spiegheremo quali sono le possibilità esistenti e le impostazioni da configurare per migliorare l'accessibilità del vostro sito web.
Breve lista di controllo per migliorare l'accessibilità dei siti web
- 1Controllare se i titoli SEO sono impostati per i blocchi di intestazione
- 2Impostate gli alt-text per le immagini e assicuratevi che rivelino il contenuto dell'immagine.
- 3Controllare se i blocchi del menu si trovano nella pagina dell'intestazione e se il piè di pagina si trova nella pagina del piè di pagina.
- 4Nelle impostazioni dei contenuti per i blocchi con moduli online, verificare se ogni campo ha un'intestazione e se è specificato il messaggio di successo dopo l'invio del modulo.
- 5Controllate il contrasto dei caratteri del sito web e assicuratevi che non ci siano testi su uno sfondo di colore simile o immagini che lo rendano meno leggibile.
- 6Controllare se la lingua del progetto è impostata nelle Impostazioni del sito → Altro
- 7Controllare le linee guida sull'accessibilità per gli elementi in Zero Block
Ottimizzazione degli screen reader
Uno screen reader è un software che riproduce vocalmente ciò che viene visualizzato sullo schermo. Spesso i lettori di schermo sono già preinstallati e vengono utilizzati attraverso le impostazioni di accessibilità del sistema operativo. I blocchi di
Tilda sono automaticamente ottimizzati per funzionare con i lettori di schermo o includono le impostazioni necessarie per contrassegnare i contenuti in modo che siano correttamente vocalizzati dal lettore di schermo.
Tilda sono automaticamente ottimizzati per funzionare con i lettori di schermo o includono le impostazioni necessarie per contrassegnare i contenuti in modo che siano correttamente vocalizzati dal lettore di schermo.
Tag Titoli H1-H6
Se il contenuto del sito web ha una struttura chiara, è possibile impostare i tag H1, H2 e H3 per i titoli. Titoli di diverso livello aiuteranno lo screen reader a interpretare meglio la struttura della pagina e a passare da un contenuto all'altro usando la tastiera.
È possibile impostare i tag H1-H3 nelle impostazioni di qualsiasi blocco che abbia un titolo sotto "SEO: Tag titolo". In altri blocchi, ad esempio nei sottotitoli delle schede, è possibile impostare titoli di altri livelli fino a H6.
È possibile impostare i tag H1-H3 nelle impostazioni di qualsiasi blocco che abbia un titolo sotto "SEO: Tag titolo". In altri blocchi, ad esempio nei sottotitoli delle schede, è possibile impostare titoli di altri livelli fino a H6.
Importante. In ogni pagina può essere presente un solo tag H1. È possibile avere un numero qualsiasi di tag di altri livelli, purché venga rispettata la gerarchia (ad esempio, nessun titolo H2 all'interno di H3).
Testo alternativo (Alt) per le immagini
Il testo alternativo per le immagini è leggibile dallo screen reader, quindi vale la pena di impostarlo in modo che le persone ipovedenti possano capire il contenuto dell'immagine. Il testo alternativo viene visualizzato anche in caso di altre limitazioni dell'accessibilità, come una connessione lenta.
Per impostare il testo alternativo per un'immagine, aprire la scheda Contenuto del blocco e fare clic sui tre puntini accanto all'immagine caricata.
Per impostare il testo alternativo per un'immagine, aprire la scheda Contenuto del blocco e fare clic sui tre puntini accanto all'immagine caricata.
Se l'immagine è semplicemente decorativa, ad esempio come sfondo per qualche elemento della pagina, potrebbe non essere necessario un testo alternativo; tenetene conto.
Per aggiungere un tag alt alle immagini nei blocchi della categoria "Galleria", aprire la scheda Contenuto e fare clic su "Testo" accanto all'immagine caricata. Quindi nel campo "Image alt for SEO" specificare la descrizione dell'immagine.
Ecco come specificare il testo alt per un'immagine nella scheda Contenuto di un blocco su Tilda
Per aumentare l'accessibilità, il testo alternativo deve comunicare con precisione il contenuto dell'immagine e rivolgersi ai visitatori che, per un motivo o per l'altro, non possono vedere l'immagine.
Prendiamo questa foto come esempio:
Pessimo esempio di alt text:
"Dog"
"Poodle."
Un buon esempio di alt text:
"Un cucciolo di barboncino è seduto sull'erba nel cortile di una casa in mattoni"
Pessimo esempio di alt text:
"Dog"
"Poodle."
Un buon esempio di alt text:
"Un cucciolo di barboncino è seduto sull'erba nel cortile di una casa in mattoni"
Suggerimenti per la progettazione di piè di pagina e intestazioni
I blocchi nell'intestazione e nel piè di pagina sono contrassegnati automaticamente in modo da consentire allo screen reader di riconoscere che il visitatore si trova in quel momento in un blocco. Ad esempio, nell'intestazione è possibile saltare la lettura di tutte le voci di menu e passare direttamente al contenuto principale della pagina.
I blocchi contenenti l'intestazione e il piè di pagina devono necessariamente trovarsi in pagine separate di intestazione e piè di pagina per una corretta marcatura.
I blocchi contenenti l'intestazione e il piè di pagina devono necessariamente trovarsi in pagine separate di intestazione e piè di pagina per una corretta marcatura.
Per configurarlo correttamente, guardate questo video tutorial o consultate l'articolo Intestazione e piè di pagina nel Centro assistenza.
Consigli per la compilazione di moduli online
La maggior parte dei campi di immissione nei blocchi della categoria "Moduli" sono accessibili allo screen reader. I messaggi di successo o di errore sono vocalizzati dallo screen reader.
Assicurarsi inoltre di specificare i titoli dei campi di input, in modo che sia chiaro per ogni campo cosa si deve digitare esattamente.
Assicurarsi inoltre di specificare i titoli dei campi di input, in modo che sia chiaro per ogni campo cosa si deve digitare esattamente.
Il processo di personalizzazione dei campi del modulo e dei messaggi pop-up di completamento del modulo è descritto nel nostro video tutorial sull'impostazione dei moduli online.
Suggerimenti su contrasto e dimensione dei caratteri
Un contrasto sufficiente dei caratteri aiuta i visitatori a percepire più facilmente il testo del sito web. È importante seguire le linee guida sul contrasto non solo perché potreste avere visitatori ipovedenti, ma perché un contrasto adeguato migliora l'esperienza dell'utente in generale.
Esiste uno standard sul web per determinare il contrasto di sfondo e testo, che si basa sulle WCAG (Web Content Accessibility Guidelines). Secondo questo standard, il contrasto è definito come il numero di volte in cui la luminosità del colore più chiaro e di quello più scuro differiscono e viene scritto come il rapporto di tale luminosità: 3:1, 4.5:1, 10:1. Più basso è il valore, più basso è il contrasto (il rapporto massimo di contrasto è 21:1).
Per rendere il sito web accessibile alle persone ipovedenti, è necessario aumentare il contrasto dei caratteri; alcuni intervalli di valori specifici per gli elementi sono descritti di seguito.
È possibile utilizzare lo strumento Contrasto dello sfondo e colore dei caratteri per ricavare il valore del contrasto e verificarlo rispetto ai valori indicati di seguito. A tale scopo, è sufficiente copiare i valori di sfondo e colore dai blocchi predefiniti o da Zero Block, aggiungerli al servizio specificato di seguito e ottenere il rapporto di contrasto.
Esiste uno standard sul web per determinare il contrasto di sfondo e testo, che si basa sulle WCAG (Web Content Accessibility Guidelines). Secondo questo standard, il contrasto è definito come il numero di volte in cui la luminosità del colore più chiaro e di quello più scuro differiscono e viene scritto come il rapporto di tale luminosità: 3:1, 4.5:1, 10:1. Più basso è il valore, più basso è il contrasto (il rapporto massimo di contrasto è 21:1).
Per rendere il sito web accessibile alle persone ipovedenti, è necessario aumentare il contrasto dei caratteri; alcuni intervalli di valori specifici per gli elementi sono descritti di seguito.
È possibile utilizzare lo strumento Contrasto dello sfondo e colore dei caratteri per ricavare il valore del contrasto e verificarlo rispetto ai valori indicati di seguito. A tale scopo, è sufficiente copiare i valori di sfondo e colore dai blocchi predefiniti o da Zero Block, aggiungerli al servizio specificato di seguito e ottenere il rapporto di contrasto.
Per il testo normale, il valore minimo di contrasto necessario per rendere il testo distinguibile è di 4,5:1. Valori di 7:1 e superiori significano già che il testo ha un contrasto aumentato (nelle categorie standard - AAA).
Per i testi più grandi (come le intestazioni), il valore minimo di contrasto è 3:1. A partire da 4,5:1, il testo è considerato migliorato, cioè adatto all'uso da parte di persone con disabilità visive. A partire da 4,5:1, il testo è considerato migliorato, ossia adatto all'uso da parte di persone con disabilità visive.
Per gli elementi non testuali (pulsanti, controlli di navigazione, ecc.) è necessario e sufficiente mantenere un rapporto di contrasto superiore a 3:1.
Per i testi più grandi (come le intestazioni), il valore minimo di contrasto è 3:1. A partire da 4,5:1, il testo è considerato migliorato, cioè adatto all'uso da parte di persone con disabilità visive. A partire da 4,5:1, il testo è considerato migliorato, ossia adatto all'uso da parte di persone con disabilità visive.
Per gli elementi non testuali (pulsanti, controlli di navigazione, ecc.) è necessario e sufficiente mantenere un rapporto di contrasto superiore a 3:1.
È inoltre possibile utilizzare il servizio online Wave (Web Accessibility Evaluation Tools) per verificare il contrasto e l'accessibilità di una pagina. Il servizio mostra visivamente i possibili problemi di contrasto e accessibilità degli elementi del sito web. Tuttavia, non tutte le raccomandazioni fornite da questo servizio possono essere pertinenti e corrette, in particolare non tutti gli elementi possono richiedere un testo alternativo.
Come specificare la lingua del sito web
Per una migliore accessibilità, assicuratevi di specificare la lingua del sito in Impostazioni sito → Altro. Questo aiuterà i software di terze parti a interagire meglio con il sito.
Navigare tra i blocchi del sito web usando la tastiera
Per alcuni tipi di limitazioni, è più comodo usare la tastiera per navigare tra i contenuti del sito web. I blocchi Tilda sono progettati per aiutare la navigazione da tastiera, in particolare:
- Quando si naviga con la tastiera, è presente un riquadro colorato per capire con quale elemento si sta interagendo.
- I blocchi con menu, sottomenu, moduli, piastrelle, lettori video, schede e cursori sono etichettati automaticamente in modo da poter essere navigati con la tastiera.
Suggerimenti per l'accessibilità Zero Block
Attualmente, il lavoro sull'accessibilità di tutti gli elementi di Zero Block è ancora in corso. Tuttavia, è importante seguire le linee guida generali descritte di seguito.
Mantenere i livelli nel giusto ordine. Per i visitatori che interagiscono con la pagina utilizzando la tastiera, l'ordine corretto dei punti di attenzione è essenziale.
Quando ci si sposta tra gli elementi utilizzando il tasto Tab, gli elementi vengono selezionati nell'ordine in cui appaiono nel layout della pagina. Per assicurarsi che l'ordine sia corretto, posizionare gli elementi nell'ordine giusto. La navigazione avverrà nell'ordine inverso a quello specificato nei livelli, dall'ultimo elemento al primo.
Quando ci si sposta tra gli elementi utilizzando il tasto Tab, gli elementi vengono selezionati nell'ordine in cui appaiono nel layout della pagina. Per assicurarsi che l'ordine sia corretto, posizionare gli elementi nell'ordine giusto. La navigazione avverrà nell'ordine inverso a quello specificato nei livelli, dall'ultimo elemento al primo.
Non lasciate elementi vuoti, soprattutto se hanno un ruolo semantico, come il tag H1. Includere link, tag SEO e testo all'interno degli elementi. Per le immagini che non sono decorative, utilizzare un testo alternativo (alt).
