Verstecktes Inhaltsverzeichnis für Screenreader

Question

Ich habe auf ein paar Seiten gesehen, dass sie einen Navigationsbereich auf der Oberseite ihrer Seite, mit internen Links zu anderen Teilen der Seite enthalten werden, so dass die Benutzer mit Screenreadern schnell auf den Inhalt, Menü springen , footer usw. Dieses "nav" Element off-Screen mit CSS so normale Benutzer nicht sehen, es bewegt wird.

Was ist der beste Weg, dies zu implementieren? Das heißt, was ist das zugänglichste und am wenigsten aufdringlich für Screen-Reader 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>

Die erste hat den Vorteil, dass sie viel sauberer in seiner Markup, aber es ist nicht genau die semantisch. Auch scheint es, wie „Gehe zu Abschnitt ein Wechseln zu Abschnitt zwei Wechseln zu Abschnitt drei“. Ich weiß, dass das visuelle Erscheinungsbild ist nicht wichtig, da es versteckt, aber nicht darauf auswirken, wie es ausgelesen wird? Gibt es geeignete Pausen zwischen jedem?

Der zweite ist ein bisschen ausführlicher in seiner Syntax, aber hoffentlich mehr beschreibend.

Welche von ihnen ist besser, und gibt es eine noch bessere Möglichkeit?

Answer 1

Sie kann ein Plugin herunterladen für Firefox namens Fangs (in Bezug auf die realen Bildschirmleser Der weiße Hai). Es wird Text davon produziert Jaws lesen würde. Es ist sehr praktisch. Ich würde gehen mit einem guten semantischen Layout über nur die Links, eines nach dem anderen. Ich würde verstecken es auch mit ... so etwas wie

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

}

display: none Mit können 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 Screen-Reader in der Regel Hyperlinks als solche bekannt. Was bedeutet, dass Ihr erstes Beispiel nicht so, sondern als „Link„zu Abschnitt einen Sprung zum Abschnitt zwei Sprung zum Abschnitt drei Jump“ausgelesen wird: Geh zu Abschnitt ein, Link: Sprung zum Abschnitt zwei, Link: Geh zu Abschnitt drei“oder so.

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

Answer 3

Sie sollten die Links in einem mit einer ID (oder Klasse) von #nav platzieren. Dies gibt diejenigen mit Screenreadern eines Heads-up, dass der Inhalt eine Liste von Links ist: „ Dies ist eine Liste mit drei Elementen: Ein Link,‚Sprung zum Abschnitt ein, ein Link ‚Sprung zum Abschnitt zwei‘ ... "

die „ul“ in einem „div“ mit der ID „#nav“ Platzierung ist funktional, aber die div ist nichts anderes tun, als die „ul“ zur Identifizierung wickeln. Es ist sauberer nur id die „ul“ und „div“ auslassen. Der folgende Code ist die 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 4

Mit einem guten semantischen Layout, Sie brauchen es nicht. Sie können die Navigationselemente machen Sie bereits kompatibel mit dem Screenreader. Die zweite Option ist in der Regel, wie Sie das passiert. Sie können die Listenelemente Stil passen, was Sie gerade tun.

Answer 5

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

Es gibt jedoch einige Fehler in WebKit, die den Fokus nicht tatsächlich zu verschieben, um das Zielelement verursacht, so müssen Sie auch einen Event-Handler auf die Links, so dass der Fokus befestigen. Dies wird auch das Ziel erfordert Tab Fokus Zobel zu sein (tabindex="-1" wird für diese Arbeit).

Wenn Sie jedoch auf der Seite gut Überschrift Struktur haben, dann können der Bildschirmleser Benutzer die Seite navigieren, ohne dieses Navigationsmenü zu benötigen Sie erstellen. In der Tat könnte dieses Menü nützlicher sein für Benutzer Tastatur nur die kein Bildschirmleser haben. In diesem Fall wollen Sie es auf Fokus erscheinen, so dass die Tastatur-ony Benutzer sie sehen können.