Come progettare siti web per gli screen reader

August 4

Come progettare siti web per gli screen reader


Un lettore di schermo consente a un utente non vedente di godere di contenuti web attraverso la lettura ad alta voce con sintesi vocale. La progettazione di un sito web specifico per un lettore di schermo, o la costruzione di un sito normale con questa accessibilità in mente, richiede una particolare attenzione alla struttura complessiva, marcatura valida e organizzazione dei contenuti. Anche se gli elementi visivi possono ancora essere utilizzati in un disegno destinato a lettori di schermo al fine di appello per i visitatori vedenti, il layout generale della pagina sarà dettata principalmente dalle esigenze dello schermo reader.For questo motivo, il disegno dovrebbe centrare intorno HTML e la funzionalità CSS esclusivamente.

istruzione

1 Creare una struttura di sito che è minimo e organizzata in modo chiaro e lineare. Un esempio potrebbe essere un layout basato sulla griglia composta da un'intestazione, menu e barra di ricerca nella parte superiore seguita dalla principale zona contenuto sinistra e una barra laterale sulla destra. Evitare incorporando elementi visivi o grafiche come le immagini cursori che non possono essere rappresentate da un testo.

2 Costruire un menu di navigazione principale che include solo i collegamenti di alto livello. Dal momento che un utente non vedente ha il menu di leggere a loro di volta in volta, diversi livelli di collegamenti sub-livello possono diventare ingombrante. Includere un link prima che il menu che permette loro di saltare per l'area di contenuto principale e lo chiamano "Vai al contenuto principale" o "Skip Menu". La formulazione è importante, in quanto la sintesi vocale deve essere in grado di leggere e pronunciare la frase correttamente.

3 Elementi di design, come le pallottole, i confini, pulsanti e menu di navigazione con i CSS piuttosto che le immagini. Questo permette al lettore di schermo per capire i componenti testuali di questi elementi più facile. Ad esempio, invece di utilizzare un pulsante per "Registrazione", utilizzare un collegamento al posto e lo stile con i CSS, se necessario.

4 Aggiungere "ALT" attributi alle immagini nel contenuto di rappresentarli, ma di essere breve. Ad esempio, "casa photo" è più appropriato di una frase completa che descrive ciò che sta accadendo nella foto o un termine generico come "foto". Non utilizzare gli attributi ALT per elementi di design, a meno che essi rappresentano un collegamento. Anche se questo è contrario agli standard XHTML, salva il lettore di schermo da dover leggere ALT marcatura su ogni elemento di design che non è una parte rilevante del contenuto.

5 Mettere titoli, intestazioni o titoli sul lato sinistro della pagina. Gli screen reader leggono la pagina dall'alto verso il basso, da sinistra a destra. Intestazioni devono essere descrittivi, la parola, categoria o soggetto all'inizio del titolo. Mantenere il contenuto stesso lineare e utilizzare tag di intestazione validi (H1, H2, ecc) per strutturare il testo.

6 Creare contenuti che è conciso e suddiviso in brevi paragrafi. Utilizzare lingua di base ed evitare lo slang o parole inventate che il lettore di schermo non può pronunciare e che l'utente potrebbe non essere in grado di capire. Scrivere parole composte come due parole, come "home page", "lavorare fuori", o "house keeping". Utilizzare gli elenchi numerati o puntati, quando possibile, per organizzare i contenuti.

7 Per le pagine con un sacco di contenuti, includere un elenco tavolo-of-contenuti-stile dei collegamenti di ancoraggio prima del contenuto. Includere un link "In cima alla pagina" nella parte inferiore delle pagine. Si consideri un layout che utilizza secchi o scatole sotto il contenuto che contengono link a contenuti rilevanti in liste ordinate; tuttavia, evitare di styling il contenuto di queste aree in modo convenzionale che include data e ora, il numero di commenti o estratti che tagliano a metà frase. Avere qualcuno ha letto il contenuto di ciascuna area ad alta voce a voi per capire come lo screen reader interpretarlo per assicurarsi che sia il più semplice e completo possibile.

8 Utilizzare il tag <label> durante la progettazione di forme, e sempre posizionare il modulo vicino alla parte superiore sinistra della pagina. Aggiungere le descrizioni utilizzando l'attributo titolo all'interno del tag label invece di piazzare il testo sopra o sotto un elemento del modulo. Tenete a mente che gli indicatori visivi, come asterischi o testo predefinito di campo sono privi di significato per il lettore di schermo e hanno bisogno di essere rappresentati in etichetta, invece.

Consigli e avvertenze

  • Utilizzare il <acronym> e <abbr> tag per dire al 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 si distinguono per conto proprio, come ad esempio "Continua a leggere Come progettare per gli screen reader" o "Sign Up Here".
  • Evitare di markup che causa la pagina per aggiornare quando gli utenti eseguono un'azione destinata per la stessa pagina. Soluzioni come AJAX può aiutare.