Come posso rendere il mio sito Website Builder più accessibile?
Un sito web accessibile garantisce che tutti gli utenti, compresi quelli con disabilità, possano navigare, capire e interagire con i tuoi contenuti. Se usi un Website Builder, puoi migliorare l'accessibilità modificando gli elementi chiave e seguendo le pratiche consigliate, come aggiungere testo alternativo alle immagini e assicurarti che il design e i contenuti del sito siano strutturati in modo chiaro. In questo articolo trovi una checklist di consigli e risorse.
Se hai domande generali sull'accessibilità dei siti web, puoi consultare la nostra guida: Domande frequenti sull'accessibilità dei siti web.
Nota: Noi di one.com facciamo del nostro meglio per fornirti gli strumenti necessari per garantire che tu possa creare e gestire un sito web conforme ai requisiti di accessibilità. Tuttavia, sei tu il responsabile finale della piena conformità. Quindi, ti consigliamo caldamente di familiarizzare con le leggi locali o regionali sull'accessibilità, perché potrebbero esserci dei requisiti per te che non sono trattati in questo articolo.
Elementi visivi
Testi alternativi per immagini, icone e grafici
Il testo alternativo serve come descrizione leggibile di un'immagine e può fungere da sostituto se il visitatore del sito web non riesce a vederla. Il testo alternativo può essere letto da uno screen reader. Puoi trovare istruzioni su dove aggiungere il testo alternativo alle immagini o ad altri elementi visivi in queste guide:
- Immagini (vale anche per SVG e icone): Come faccio ad aggiungere un'immagine al mio sito Website Builder?
- Utilizzo del componente logo in Website Builder
- Immagini dei prodotti (Negozio Online): Gestisci i prodotti nel tuo Negozio Online
- Galleria e cursore immagini: Come utilizzare i componenti Galleria e cursore immagini in Website Builder
- Immagini del Blog: Introduzione al Blog su Website Builder
Non è necessari aggiungere un testo alternativo per le immagini di sfondo, poiché spesso hanno solo scopo decorativo. Il testo alternativo dovrebbe essere aggiunto solo alle immagini che trasmettono contenuti importanti, hanno scopo informativo o richiedono l'interazione del visitatore del sito web.
Per indicare che un'immagine può essere ignorata dagli strumenti di assistenza, puoi andare su SEO nelle impostazioni dell'immagine e spostare l'interruttore Imposta come elemento decorativo su ON.
Per garantire la piena conformità, ti consigliamo di rivedere tutte le immagini del tuo sito web e di assegnare loro un testo alternativo oppure di impostarle come elementi decorativi.
Lingua della pagina
Impostare la lingua per ogni pagina del tuo sito garantisce che gli screen reader possano leggere la pagina correttamente. Consulta questa guida per istruzioni dettagliate: Come si imposta la lingua per una pagina in Website Builder?
Elementi uditivi
Sottotitoli e trascrizioni per audio e video
Non è possibile aggiungere sottotitoli o generare trascrizioni con l'opzione video self-hosted su Website Builder. Tuttavia, ci sono due modi per farlo:
- Carica invece i video tramite YouTube. Questo garantirà che i video possano essere visualizzati con sottotitoli. Puoi trovare maggiori informazioni su questa funzione nella nostra guida: Aggiungi un video di YouTube al tuo sito web.
- Aggiungi le trascrizioni separatamente come file facilmente accessibile sul tuo sito. Puoi usare il documento per questo, di cui puoi leggere di più nella nostra guida: Come posso incorporare un documento nel mio sito Website Builder?
Struttura e design
Intestazioni semantiche
Utilizza la gerarchia semantica dei titoli (H1, H2, H3, paragrafo) nel layout del testo del tuo sito. Questa gerarchia riflette un modo di organizzare i contenuti in modo logico e significativo tramite tag nei siti HTML. Viene utilizzata dalle tecnologie assistive, come gli screen reader, per interpretare i contenuti e trasmetterli nell'ordine corretto al visitatore del sito web.
Nell'editor di Website Builder, ogni titolo è contrassegnato chiaramente (titolo 1, titolo 2, ecc.) quando usi un componente testo. Puoi selezionare un titolo dal pannello laterale quando aggiungi un nuovo componente testo al tuo sito o modificare l’intestazione nel pannello delle proprietà per i componenti testo esistenti.
I modelli di Website Builder includono intestazioni ed etichette chiare e, per impostazione predefinita, seguono la logica descritta sopra.
Rapporto di contrasto per il testo
Per quanto riguarda il testo di un sito web, ecco i requisiti minimi per il rapporto di contrasto:
- Titoli: 3:1
- Paragrafi: 4.5:1
Puoi regolare il rapporto di contrasto del testo in Website Builder così:
Se la funzione tema colori è impostata su ON:
Se usi un tema colori sul tuo sito, dovresti modificare il rapporto di contrasto tramite le impostazioni del tema colori. Questa guida spiega come fare: Usare un tema colori in Website Builder.
Se la funzione tema colori è impostata su OFF:
Se la funzione tema colori è disattivata, dovresti modificare il rapporto di contrasto tramite le impostazioni globali:
- Vai su Impostazioni modello nell'angolo in basso a destra dell'editor di Website Builder.
- Clicca su Modifica stili modello nel menu che appare.
- Ora vedrai una panoramica di tutti gli stili di testo usati sul tuo sito web (testo, link, menu, bottone e tabella). Clicca sull'icona colore testo per ogni elemento per accedere alle impostazioni del colore. Puoi selezionare un colore tramite il selettore colori o inserire un codice esadecimale.
Nota: Website Builder non può fornirti i rapporti esatti del tuo sito, ma puoi utilizzare strumenti esterni per analizzarli e ottenere i valori necessari. Ad esempio, puoi provare , questo strumento di WebAIM. Qui puoi inserire i codici esadecimali per il primo piano e lo sfondo, quindi regolare il colore fino a ottenere il giusto rapporto di contrasto e i corrispondenti codici esadecimali. Puoi quindi copiare e incollare questi codici in Website Builder.
Contrasto non testuale
Gli elementi colorati del tuo sito web che non includono testo, come i colori di sfondo delle sezioni o i colori dei bottoni, possono essere completamente modificati tramite le impostazioni del tema colori o le impostazioni del template globale, come descritto sopra.
Lo stile di ogni elemento può essere ulteriormente modificato tramite le impostazioni del componente. Ad esempio, cliccando su una sezione, intestazione o piè di pagina, vedrai l'opzione per cambiare il colore o lo stile dell'elemento.
Navigazione
Accesso tramite tastiera
Ti consigliamo di mantenere contenuti chiari sul tuo sito web ed evitare elementi complessi, come contenuti attivati dal focus o riquadri hover. Questi ultimi possono essere sostituiti con immagini e link normali.
Tieni presente che i menu a discesa sono accessibili tramite tastiera.
Mettere in pausa, interrompere o nascondere i contenuti
Devi poter controllare o nascondere manualmente tutti gli elementi in movimento o interattivi sul tuo sito web. Ecco un paio di elementi da verificare se li hai sul tuo sito:
- Slider immagini : La funzione di riproduzione automatica di questo componente è abilitata per impostazione predefinita, ma puoi disattivarla e aggiungere controlli manuali. Vai al tuo componente immagine slider, clicca su Impostazioni immagine slider, e poi seleziona Navigazione per accedere a queste impostazioni.
- GIFs: Evita di caricare GIF tramite il componente immagine se non includono controlli.
- Immagini di sfondo e video: Questi elementi al momento non dispongono di una funzione di riproduzione/pausa, ma stiamo lavorando a una soluzione per soddisfare questo requisito. Nel frattempo, consigliamo di evitare immagini di sfondo in movimento o sfondi video.
- Videos: Assicurati di avere i controlli visibili sui video e che l'autoplay sia disattivato. Puoi leggere di più sulle impostazioni video nella nostra guida: Come aggiungere un video al mio sito Website Builder?
Contenuto lampeggiante
Evita contenuti che includono più di tre flash al secondo. Il Website Builder non include contenuti flash standard, ma puoi caricarli se vuoi. Tuttavia, ti suggeriamo di evitarli o, almeno, di permettere al visitatore di controllare e saltare manualmente questi contenuti.
Articoli correlati: