Sommario nascosto per gli screen reader

Question

Ho visto su un paio di siti che includeranno una sezione di navigazione nella parte superiore della loro pagina, con collegamenti interni ad altre parti della pagina, in modo che gli utenti con screen reader possano saltare rapidamente al contenuto, menu , footer, ecc. Questo " nav " l'elemento viene spostato fuori dallo schermo con CSS in modo che gli utenti normali non lo vedano.

Qual è il modo migliore per implementarlo? Cioè, qual è il più accessibile e meno invadente per gli screen reader? Ecco con cosa ho giocato:

<div id="nav">
    <a href="#one">Jump to section one</a>
    <a href="#two">Jump to section two</a>
    <a href="#three">Jump to section three</a>
</div>

<!-- versus -->

<ul id="nav">
    <li><a href="#one">Jump to section one</a></li>
    <li><a href="#two">Jump to section two</a></li>
    <li><a href="#three">Jump to section three</a></li>
</ul>

Il primo ha il vantaggio di essere molto più pulito nel suo markup, ma non è esattamente semantico. Inoltre, appare come & Quot; Vai alla sezione uno Vai alla sezione due Vai alla sezione tre & Quot ;. So che l'aspetto visivo non è importante, poiché è nascosto, ma influisce sul modo in cui viene letto? Ci sono pause appropriate tra ognuna?

Il secondo è un po 'più dettagliato nella sua sintassi, ma si spera più descrittivo.

Quale di questi è meglio, e c'è un modo ancora migliore?

Answer 1

Puoi scaricare un plugin per Firefox chiamato Fangs (in riferimento al vero screen reader ganasce). Produrrà un testo di cui leggerebbe Jaws. È molto utile. Andrei con un buon layout semantico sui soli collegamenti uno dopo l'altro. Lo nasconderei anche con ... qualcosa del genere

#nav {
    position: absolute;
    left: 0;
    top: -9999px

}

L'uso di display: none potrebbe non essere letto in alcuni screen reader.

Nei miei siti, in genere l'ho fatto:

<div id="section-nav">
    <p>Jump to</p>
    <ul>
       <li><a href="#section1">Section1</a></li>
    </ul>
</div>

Answer 2

Tieni presente che gli screen reader solitamente annunciano i collegamenti ipertestuali in quanto tali. Ciò significa che il tuo primo esempio non verrà letto come & Quot; Salta alla sezione uno salta alla sezione due salta alla sezione tre & Quot; ma piuttosto come " Link: Vai alla sezione 1, link: Vai alla sezione due, link: Vai alla sezione tre " o alcuni di questi.

(Personalmente, continuerei con la seconda opzione semantica, ma questa è solo la mia preferenza personale.)

Answer 3

Dovresti posizionare i collegamenti in un con un id (o classe) di #nav. Questo dà a coloro che usano gli screen reader un avviso che il contenuto è un elenco di collegamenti: & Quot; Questo è un elenco con tre elementi: un collegamento, 'vai alla sezione uno, un collegamento' vai alla sezione due ' ... quot &;

Posizionamento di " ul " in un " div " con un id di " #nav " è funzionale, ma il div non sta facendo altro che avvolgere " ul " per identificazione. È più pulito solo id & Quot; ul & Quot; e lascia il " div " su. Il seguente codice è il migliore (penso). Pulito e al punto.

<ul id="nav">
    <li><a href="#one">Jump to section one</a></li>
    <li><a href="#two">Jump to section two</a></li>
    <li><a href="#three">Jump to section three</a></li>
</ul>

Per rimuovere il testo dalla pagina con CSS, si utilizza:

ul#nav {
    position: absolute;
    left: -9999px
}

Answer 4

Con un buon layout semantico, non ne hai bisogno. Puoi rendere gli elementi di navigazione che stai già utilizzando compatibili con lo screen reader. La seconda opzione è normalmente il modo in cui ciò accade. Puoi modellare le voci dell'elenco in modo che corrispondano a ciò che stai attualmente facendo.

Answer 5

Il modo migliore per fare ciò che hai richiesto è usare <ul> con le ancore al loro interno.

Tuttavia, in WebKit ci sono alcuni bug che impediranno al focus di spostarsi effettivamente sull'elemento target, quindi dovrai anche collegare un gestore di eventi ai collegamenti in modo che il focus cambi. Ciò richiederà anche che l'obiettivo sia un tab focus sable (tabindex="-1" funzionerà per questo).

Tuttavia, se si dispone di una buona struttura di intestazione nella pagina, l'utente dell'utilità per la lettura dello schermo può navigare nella pagina senza bisogno di questo menu di navigazione che si sta creando. In realtà questo menu potrebbe essere più utile per gli utenti della tastiera che non dispongono di uno screen reader. In tal caso, vorrai farlo apparire in primo piano in modo che l'utente tastiera possa vederlo.