Un lettore di schermo consente un utente ipovedente godere di contenuti web con la lettura ad alta voce usando una voce sintetizzata. Progettare un sito Web appositamente per un lettore di schermo, o la costruzione di un sito normale con l'accessibilità in mente, richiede un focus sulla struttura complessiva, markup valido e organizzazione dei contenuti. Anche se elementi visivi possono comunque essere utilizzati in un design destinato per i lettori di schermo per fare appello ai visitatori ipovedenti, il layout generale della pagina sarà dettato principalmente dalle esigenze dello screen reader. Per questo motivo, il design deve centrare esclusivamente intorno a funzionalità HTML e CSS.

Istruzioni

1

Creare una struttura di sito che è organizzato in modo chiaro e lineare e minimale. Un esempio sarebbe che un layout basato su griglia è composta da una barra di intestazione, menu e ricerca nella parte superiore seguita da area di contenuto principale sulla sinistra e una barra laterale sulla destra. Evitare che incorporano elementi visual o illustrativi quali cursori di immagini che non possono essere rappresentati da testo.

2

Creare un menu di navigazione principale che include solo i collegamenti di primo livello. Poiché un utente ipovedenti ha il menu leggi a loro ogni volta, diversi livelli di sub-livello link possono diventare ingombranti. Includere un link prima che il menu che permette loro di passare all'area di contenuto principale e chiamarlo "Salta al contenuto principale" o "Skip Menu." La formulazione è importante, come la sintesi vocale deve essere in grado di leggere e pronunciare correttamente la frase.

3

Elementi di design come proiettili, bordi, pulsanti e menu di navigazione con CSS piuttosto che immagini. Questo permette al lettore di schermo capire i componenti testuali di questi elementi più facili. Ad esempio, anziché utilizzare un pulsante per "Sign Up", invece di utilizzare un link e lo stile con i CSS, se necessario.

4

Aggiungere gli attributi "ALT" alle immagini nel contenuto a rappresentarli, ma tenerlo a breve. Ad esempio, "casa foto" è più appropriata di una frase completa che descrive cosa sta succedendo in foto o in un termine generico come "foto". Non utilizzare gli attributi ALT per elementi di design a meno che non rappresentano un legame. Anche se questo è contrario agli standard XHTML, Salva il lettore di schermo da dover leggere ALT tag su ogni elemento di design che non è una parte rilevante del contenuto.

5

Inserire titoli, intestazioni o titoli sul lato sinistro della pagina. Screen reader leggere la pagina dall'alto verso il basso, da sinistra a destra. Titoli devono essere descrittivi, con la parola chiave, categoria o soggetto all'inizio del titolo. Mantenere il contenuto stesso lineare e utilizzare tag di intestazione valida (H1, H2, ecc.) di strutturare il testo.

6

Creare contenuto che sia concisa e demolita in brevi paragrafi. Utilizzare il linguaggio basic ed evitare slang o parole inventate che lo screen reader non riesce a pronunciare e che l'utente potrebbe non essere in grado di capire. Scrivere parole composte, come due parole, come "home page", "" o "house keeping". Utilizzare elenchi puntati o numerati quando possibile organizzare il contenuto.

7

Per le pagine con un sacco di contenuti, è necessario includere un elenco di tabella di stile contenuto di collegamenti di ancoraggio prima del contenuto. Includere un link di "Parte superiore della pagina" nella parte inferiore delle pagine lunghe. Prendere in considerazione un layout che utilizza secchi o le caselle sotto il contenuto che contengono collegamenti a contenuti pertinenti in elenchi ordinati; Tuttavia, di evitare lo styling il contenuto di queste aree in modo convenzionale che include data e ora, numero di commenti o estratti che tagliato a metà frase. Avere qualcuno leggere ad alta voce il contenuto di ciascuna area per farvi capire come il lettore di schermo interpreterà per accertarsi che sia più semplice e completo possibile.

8

Uso il < label > tag quando progettazione di moduli e posizionare sempre il modulo nella parte superiore sinistra della pagina. Aggiungere descrizioni utilizzando l'attributo title all'interno del tag etichetta piuttosto che inserire testo sopra o sotto un elemento form. Tenere presente che gli indicatori visivi come asterischi o testo campo predefinito sono prive di significato per il lettore di schermo e devono essere rappresentati nell'etichetta invece.

Consigli & Avvertenze

• Utilizzare l'acronimo < > e < ABBR > Tag per informare il lettore di schermo per leggere un acronimo o un'abbreviazione come lettere invece di una parola.
• Non utilizzare frammenti come "Leggi tutto" o "Clicca qui" nei collegamenti. Creare condizioni di collegamento che stanno sulle proprie, come "continua a leggere come Design per gli Screen Reader" o "Iscriviti qui".
• Evitare un markup che causa la pagina aggiornare quando gli utenti eseguono un'azione destinata per la stessa pagina. Soluzioni come AJAX possono aiutare.