Come progettare siti web per lettori di schermo

L’accessibilità è fondamentale quando si progetta un sito Web, sia per un’azienda che per un prodotto o anche per uso personale. Non solo aiuta i visitatori ipovedenti, ma anche quelli che utilizzano altri software per rendere i siti web più facili da leggere. Quando prepari il tuo sito web per uno screen reader, crea contenuti facilmente seguibili e assicurati che le immagini siano usate e descritte correttamente.

Veloce

Quando desideri che il tuo sito web abbia la massima accessibilità, evita di utilizzare contenuti Adobe Flash per comunicare informazioni importanti o elementi di navigazione. Sebbene il contenuto Flash tenda ad essere più visivo e dinamico, non funziona bene con gli screen reader. Se scegli di utilizzare Flash, includi la narrazione audio utilizzando gli strumenti di Flash o includi una versione alternativa progettata per una migliore accessibilità.

Contenuto scritto

Non includere troppi contenuti scritti in nessuna pagina e includi i contenuti più importanti all’inizio del paragrafo. Questa è una tecnica chiamata “caricamento frontale” e utilizzarla con brevi paragrafi funziona meglio per gli utenti che ascoltano il contenuto. Assicurati che il contenuto sia cronologico. Potresti anche considerare di utilizzare gli elenchi quando disponibili, poiché gli elenchi forniscono agli screen reader voci di elenco numerate. Ciò li rende particolarmente efficaci per la navigazione, che può essere personalizzata utilizzando CSS.

Titoli e intestazioni

Usa un titolo accurato e descrittivo nell’intestazione di ogni pagina, in modo che la prima cosa che uno screen reader annuncia sia qual è la pagina. Utilizza i tag di intestazione, ad esempio

, per dare contesto alle sezioni della pagina. Non usare regolarmente

tag progettati in modo da sembrare intestazioni, perché uno screen reader non capirà che si tratta di un’intestazione.

Link

Assicurati che tutti i link descrivano a cosa va indirizzato il link. Ad esempio, se hai un link alla tua pagina Informazioni sull’autore nella frase “Per scoprire l’autore, fai clic qui”, non usare “fai clic qui” per descrivere quel link – usa “sull’autore”. È meglio tralasciare completamente “fare clic qui”, poiché non fornisce alcun contesto a uno screen reader.

Immagini

Se il tuo sito web utilizza immagini, includi sempre l’attributo “alt” per definire l’immagine per uno screen reader. Questo testo appare anche al posto dell’immagine se l’immagine non viene caricata; alcuni utenti impostano il browser in modo da non caricare le immagini per motivi di sicurezza o di risparmio di larghezza di banda. Usa descrizioni brevi e succinte che descrivano accuratamente l’immagine.

HTML Code

Mantieni il tuo codice cronologico sulla pagina, con gli elementi più importanti in alto. Gli screen reader iniziano nella parte superiore della pagina e vanno da sinistra a destra, dall’alto in basso. Convalida il codice HTML del tuo sito web per garantire la massima compatibilità con gli screen reader. L’utilizzo di codice non valido e non standard rende la comprensione del contenuto più difficile per gli utenti con lettori di schermo. Convalidare il tuo codice ti aiuta anche come designer a vedere se ti sei perso qualcosa; ad esempio, le immagini senza l’attributo “alt” definito non vengono convalidate.