Come impostare la priorità per gli screen reader di alcune parti di pagine HTML?

Question

Desidero rendere la mia pagina HTML adatta agli screen reader.

Attualmente, la pagina ha 3 parti principali: intestazione, sidebar e contenuti:

Gli screen reader leggono intestazione in un primo momento, poi barra laterale e, infine, i risultati di ricerca .

Sfortunatamente, gli utenti che hanno problemi con la vista aspettano molto tempo mentre il programma leggerà tutto il contenuto della barra laterale (perché la barra laterale contiene molti filtri). Come posso impostare una priorità più grande per i risultati della ricerca? Causa i risultati della ricerca dovrebbero essere letti prima del contenuto della barra laterale.

E sarà grande se qualcuno mi forniscono un tutorial HTML su quello che posso fare per aumentare il livello di accessibilità delle pagine HTML:

• Come posso cambiare alcuni elementi DIV per essere saltate dal lettore di schermo?
• Come posso modificare una sequenza di contenuti della pagina di lettura?
• Come posso rendere leggibile solo il modulo di ricerca ei risultati di ricerca (e alcuni collegamenti)?

Answer 1

Non cercare di nascondere il contenuto degli utenti di screen reader, vorranno avere accesso a tale contenuto. Invece, è possibile aggiungere punti di riferimento alle aree di contenuto. I lettori di schermo saranno quindi in grado di passare direttamente alla parte pertinente della pagina, inclusi i risultati, ma saranno comunque in grado di raggiungere gli altri controlli quando ne avranno bisogno.

Se è possibile utilizzare HTML5, utilizzare i <header>, <aside> o <nav> e poi i <main> elementi per l'intestazione, filtri e di navigazione laterale e risultati di ricerca, rispettivamente.

Se non è possibile utilizzare HTML5, aggiungere role = "banner", role = "complementary", role = "navigation" e role = "main" agli elementi di wrapping di queste regioni.

Come procedura si dovrebbe anche aggiungere voce struttura al documento (screen reader può navigare da questi troppo) e un link di salto (per gli utenti vedenti, tastiera-only)

Answer 2

Una cosa comune da fare è avere un collegamento "salta la navigazione" che è un riferimento di ancoraggio fino a dove inizia il tuo contenuto reale. Ciò consente agli screen reader di saltare in avanti.

<a href="#main" class="skip-navigation">Skip Navigation</a> 

... 

<h1 id="main">Search Results</h1> 

Se si desidera, è possibile lo stile in un modo che sarà ancora ripresa da lettori di schermo, ma invisibile ai normali browser.

.skip-navigation { 
    position: absolute; 
    left: -5000px; 
    top: 0; 
    width: 1px; 
    height: 1px; 
    overflow: hidden; 
} 

Answer 3

problema è stato risolto con "aria-live" propery

Lo screen reader legge il tag "aria-live" dopo ogni modifica del contenuto. Quindi, se l'utente cambia il testo nel modulo di ricerca, lo screen reader leggerà il contenuto del tag "aria-live" con risultati di ricerca caricati con una carica.

testato con ChromeVox