Verstecktes Inhaltsverzeichnis für Bildschirmleser

Question

Ich habe auf einigen Seiten gesehen, dass sie oben auf ihrer Seite einen Navigationsbereich mit internen Links zu anderen Teilen der Seite enthalten, so dass Benutzer mit Bildschirmlesern das tun können schnell zum Inhalt, Menü, Fußzeile usw. springen. Dieses "nav" -Element wird mit CSS aus dem Bildschirm verschoben, so dass normale Benutzer es nicht sehen.

Was ist der beste Weg, dies zu implementieren? Das heißt, was ist für Bildschirmleser am zugänglichsten und am wenigsten aufdringlich? Hier ist, was ich mit gespielt:

<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> 

Der erste hat den Vorteil, dass sie viel sauberer in seiner Markup, aber es ist nicht genau das semantische. Es erscheint auch wie "Gehe zu Abschnitt eins Springe zu Abschnitt zwei Gehe zu Abschnitt drei". Ich weiß, dass das visuelle Erscheinungsbild nicht wichtig ist, da es versteckt ist, aber beeinflusst das, wie es ausgelesen wird? Gibt es angemessene Pausen zwischen den einzelnen?

Die zweite ist ein bisschen mehr in seiner Syntax, aber hoffentlich beschreibender.

Welche davon ist besser, und gibt es einen noch besseren Weg?

Answer 1

Sie können ein Plugin für Firefox namens Fangs herunterladen (in Bezug auf die realen Bildschirmleser Jaws). Es wird Text produzieren, von dem Jaws lesen würde. Es ist sehr praktisch. Ich würde mit einem guten semantischen Layout über nur die Links nacheinander gehen. Ich würde verstecken es auch mit ... so etwas wie

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

} 

Mit display: nonekann nicht in einigen Screenreadern gelesen werden.

In meinen eigenen Websites, ich habe dies in der Regel getan:

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

Answer 2

Beachten Sie, dass Bildschirmlesegeräte gewöhnlich Hyperlinks als solche ankündigen. Das bedeutet, dass Ihr erstes Beispiel nicht als "Sprung zu Abschnitt eins Sprung zu Abschnitt zwei Sprung zu Abschnitt drei" ausgelesen wird, sondern als "Link: Sprung zu Abschnitt eins, Link: Springe zu Abschnitt zwei, Link: Springe zu Abschnitt drei "oder einige solcher.

(Ich persönlich würde immer noch mit der zweiten, semantischer Option gehen, aber das ist nur meine persönliche Präferenz.)

Answer 3

Mit einem guten semantischen Layout, Sie brauchen es nicht. Sie können die Navigationselemente, die Sie bereits verwenden, mit dem Bildschirmleser kompatibel machen. Die zweite Option ist normalerweise, wie Sie das machen. Sie können die Listenelemente so formatieren, dass sie dem entsprechen, was Sie gerade tun.

Answer 4

Sie sollen die Links in einem mit einer ID (oder Klasse) von #nav platzieren. Dies gibt denjenigen, die Bildschirmleser verwenden, einen Hinweis darauf, dass der Inhalt eine Liste von Links ist: "Dies ist eine Liste mit drei Elementen: Ein Link, 'Sprung zu Abschnitt eins, ein Link' zu Abschnitt zwei '..."

Platzieren der "ul" in einem "div" mit einer ID von "#nav" ist funktionsfähig, aber das div tut nichts anderes als das Umwickeln der "ul" für die Identifizierung. Es ist sauberer, die "ul" einfach zu identifizieren und das "div" zu verlassen. Der folgende Code ist der beste (glaube ich). Sauber und auf den Punkt.

<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> 

Um den Text von der Seite mit CSS zu entfernen, die Sie verwenden:

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

Answer 5

Der beste Weg, was Sie zu tun ist, beantragt haben <ul> mit den Ankern in ihnen zu verwenden.

Es gibt jedoch einige Fehler in WebKit, die dazu führen, dass der Fokus nicht auf das Zielelement verschoben wird. Sie müssen also einen Ereignishandler an die Verknüpfungen anhängen, damit sich der Fokus verschiebt. Dies erfordert auch, dass das Ziel ein Tab-Fokus-Sable ist (tabindex="-1" wird dafür funktionieren).

Wenn Sie jedoch eine gute Überschriftstruktur auf der Seite haben, kann der Benutzer des Screenreaders auf der Seite navigieren, ohne dass Sie dieses Navigationsmenü, das Sie erstellen, benötigen. In der Tat könnte dieses Menü für Benutzer mit Tastatur nur nützlich sein, die keinen Bildschirmleser haben. In diesem Fall sollten Sie den Fokus auf den Fokus legen, damit der Keyboard-Benutzer sie sehen kann.