Rendere accessibile la tua pagina

Una pagina accessibile può essere usata da tutti: da chi usa uno screen reader, da chi vede poco, da chi evita il movimento sullo schermo o semplicemente da chi guarda il telefono sotto il sole. LinkHarbor si occupa di molto in automatico; alcune cose dipendono da te. Questo articolo mostra a cosa fare attenzione.

#Cosa fa LinkHarbor in automatico

• Se un visitatore ha attivato «Riduci movimento» nel suo sistema, i video di sfondo non vengono riprodotti e gli effetti di scorrimento e parallasse e le animazioni al passaggio del mouse vengono disattivati
• Il blocco «Titolo» viene generato come vero titolo, che gli screen reader usano per orientarsi
• Le immagini dei blocchi «Immagine» e «Galleria» ricevono il tuo testo alternativo come descrizione
• Se non hai scelto un colore del testo per i pulsanti, LinkHarbor ne sceglie uno adatto al colore del pulsante

#Testi alternativi per le immagini

Un testo alternativo descrive cosa si vede in un’immagine. Gli screen reader lo leggono ad alta voce e compare quando un’immagine non si carica.

Blocco «Immagine»

Il campo «Testo alternativo» nell’editor del blocco.

Blocco «Galleria»

Un «Testo alternativo» fino a 200 caratteri per ogni immagine.

• Descrivi il contenuto, non il file: «Cappuccino con latte art su un tavolo di legno» invece di «IMG_2041»
• Per le immagini con testo, il testo va nel testo alternativo
• Sii breve – di solito basta una frase

Dove trovare i campi è spiegato in I blocchi gratuiti nel dettaglio e Blocchi di contenuto.

#Struttura con i titoli

Suddividi le pagine più lunghe con il blocco «Titolo» invece che con testo grande. Chi usa uno screen reader salta da un titolo all’altro e così trova rapidamente ciò che cerca – per esempio «Orari di apertura» o «Contatto».

#Titoli dei link chiari

• Ogni link dovrebbe avere senso da solo: «Menu in PDF» invece di «Clicca qui»
• Evita titoli identici per destinazioni diverse
• Le emoji all’inizio di un titolo vengono lette ad alta voce; usale con parsimonia

Maggiori dettagli sui link in Creare e personalizzare i link.

#Contrasto e leggibilità

• Assicurati che ci sia abbastanza contrasto tra testo e sfondo, soprattutto con i colori pastello chiari
• Se il testo si trova su un’immagine o un video di sfondo, usa l’«Opacità sovrapposizione» del tema perché resti leggibile
• Nessun testo importante solo in un’immagine – i visitatori con uno screen reader non possono leggerlo
• Scegli un font facile da leggere e una dimensione non troppo piccola per i blocchi di testo

Colori, sfondo e font li imposti nel tema, vedi Design.

#Usare con cura il CSS personalizzato

Con il CSS personalizzato puoi cambiare quasi tutto – anche cose importanti per l’accessibilità. Non nascondere i contorni del focus, non rimpicciolire troppo il testo e, dopo le modifiche, prova la pagina anche con la tastiera. Vedi CSS personalizzato.

#Prova tu stesso

1. Attiva lo screen reader sul telefono (VoiceOver su iPhone, TalkBack su Android) e ascolta la tua pagina
2. Aumenta la dimensione del testo nelle impostazioni di sistema e controlla che tutto resti leggibile
3. Guarda la pagina con luce intensa e in modalità scura