Der direkte Zugriff
Für Screenreader sind lange Navigationsleisten besonders schwierig zu handhaben, da alle Navigationspunkte linearisiert, d.h. eins nach dem anderen gelesen werden. Dazu kommt, dass in den meisten Seiten die Navigationsleiste vor dem Inhaltsbereich steht. Das bedeutet auf vielen Webauftritten, dass die Gebrauchstauglichkeit in linearen Ausgabegeräten zu wünschen übrig lässt, denn bevor beispielsweise ein Nutzer einer Sprachausgabe zum Lesen der Inhalte der Seite kommt, werden zahlreiche andere Elemente der Seite vorgelesen.
In der ![[intern]](../../lib/img/intern.gif){kind=small}
BITV-Bedingung 13.6 wird die Gruppierung von Navigationselementen sowie die Bereitstellung einer Möglichkeit zum Überspringen der Navigationselemente gefordert. Diese Bedingung hat natürlich allgemeine Vorteile und sollte dazu führen, dass Navigationsleisten übersichtlich und überschaubar sind. Zu bedenken ist jedoch auch die technische Ebene: die Gruppierung von Navigationselementen sollte nicht nur am Bildschirm sichtbar sein, sondern muss auch auf der strukturellen - sprich: (X)HTML-Ebene gegeben sein.
Zum besseren Verständnis: Screenreader lesen nicht nur Inhalte einer Seite, sie erkennen auch Strukturen im Quelltext. So erkennen die meisten Screenreader Absätze, Überschriften und Listenelemente, wenn Inhalte als solche ausgezeichnet werden. Gleichzeitig bieten Screenreader die Möglichkeit, zwischen solchen (X)HTML-Elementen zu springen.
Für eine Navigation bietet sich als Strukturierungselement eine Liste an, denn bei Navigationsleisten handelt es sich semantisch gesehen um nichts anderes als eine Linkliste! Wichtig ist aber, dass die Navigationsleiste innerhalb eines (X)HTML-Blockelements eingeschlossen wird. Für das Folgende wird eine Aufzählung als Grundelement für die Navigationsleiste verwendet:
<div>
<ul>
<li><a href="eintrag1.html">Eintrag 1</a></li>
<li><a href="eintrag2.html">Eintrag 2</a></li>
<li><a href="eintrag3.html">Eintrag 3</a></li>
</ul>
</div>
Sie mögen sich vielleicht fragen, ob nicht zum Beispiel eine nummerierte Liste sinnvoller wäre. Als Orientierung sowie semantische Information wäre eine Nummerierung in einer Sprachausgabe zwar hilfreich, aber es gibt zwei Probleme, die den Einsatz nummerierter Listen unzweckmäßig machen. Zum einen bietet (X)HTML keine Möglichkeit die Nummerierung einer Liste fortzusetzen, z.B. bei einer unterbrochenen Liste oder bei kontextabhängigen Nummerierungen z.B. bei einer verschachtelten Liste. Zum anderen müssten die Nummerierungen in aller Regel per CSS versteckt werden, weil sie nicht unbedingt in das visuelle Design passen, was dazu führen kann, dass ein Screenreader die (willkürliche) Nummerierung trotzdem ausgibt. So gesehen ist der unsortierten Liste der Vorzug zu geben.
Sie mögen sich vielleicht auch fragen, warum keine Überschriften für die Navigationspunkte verwendet werden. Im Sinne der Barrierefreiheit würde die Gestaltung der Navigation mit Überschriften dazu führen, dass jeder Navigationspunkt ein eigenständiges (X)HTML-Element ist. Der Nutzer eines Screenreaders ist genau da, wo wir vor nicht allzu langer Zeit waren als Layout noch mit Tabellen gestaltet wurde: Der Nutzer muss von Element zu Element springen, um irgendwann an die Inhalte zu kommen. Nochmal: es ist wichtig, dass Navigationsleisten innerhalb eines Strukturelements zusammengefasst werden, um die Möglichkeit des Überspringens zu gewährleisten.
Natürlich ist die Darbietung nur mit einer geeigneten Formatierung sinnvoll, um Design-Anforderungen zu genügen. Hierfür bieten CSS eine Reihe von Möglichkeiten, das Aussehen der Liste anzupassen.
Zunächst erhält das DIV-Element eine ID, damit die Zuweisung von CSS effektiv vorgenommen werden kann:
<div id="hauptnavigation">
<ul>
<li><a href="eintrag1.html">Eintrag 1</a></li>
<li><a href="eintrag2.html">Eintrag 2</a></li>
<li><a href="eintrag3.html">Eintrag 3</a></li>
</ul>
</div>
Dann müssen die einzelnen Listenpunkte umgestaltet werden. Mit den folgenden CSS-Eigenschaften werden Schriftbild und Farbe geändert. Die Schrift ist selbstverständlich nach Bedingung 3.4 skalierbar und für ausreichende Kontraste wurde gesorgt (vgl. ![[extern, englisch]](../../lib/img/en.gif)
Juicy Studio). Darüber hinaus wird der Listenpunkt, der von allen Browsern standardmäßig vor einen Listeneintrag gesetzt wird, per CSS ausgeblendet:
#hauptnavigation {
width: 13em;
background-color: #DFE1F0;
border: 1px solid #A9B0D7;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #2E3192;
font-size: 0.8em;
}
#hauptnavigation ul, #hauptnavigation ul li {
padding: 0;
margin: 0;
list-style: none;
}
#hauptnavigation a {
text-decoration: none;
display: block;
color: #2E3192;
}
* html #hauptnavigation a {
width: 100%;
}
#hauptnavigation ul li {
font-weight: bold;
border-bottom: 4px solid #A9B0D7;
}
* html #hauptnavigation ul li {
height: 1em;
}
#hauptnavigation ul li a {
padding: 6px;
}
Die CSS-Deklarationen haben folgende Bedeutung:
#hauptnavigation#hauptnavigation ul, #hauptnavigation ul li #hauptnavigation a* html #hauptnavigation a#hauptnavigation ul li* html #hauptnavigation ul limin-height wirkt.#hauptnavigation ul li aMit einer als Liste strukturierten Navigationsleiste ist es nun für Screenreader-Nutzer möglich, die Navigation mit einem Tastendruck zu überspringen bzw. schnell zu den einzelnen Punkten zu gelangen.
Eine Navigationsleiste wird sich nicht wie in unserem Beispiel auf drei Einträge beschränken. Neben weiteren Hauptnavigationspunkten kommen oft Unterpunkte hinzu. Die Unterpunkte zu einem bestimmten Hauptnavigationspunkt können entsprechend als verschachtelte Liste zu diesem Navigationspunkt strukturiert werden.
<div id="hauptnavigation">
<ul>
<li><a href="eintrag1.html">Eintrag 1</a></li>
<li class="aktiv">
<a href="eintrag2.html">Eintrag 2</a>
<ul>
<li><a href="eintrag2a.html">Eintrag 2 A</a></li>
<li><a href="eintrag2b.html">Eintrag 2 B</a></li>
</ul>
</li>
<li><a href="eintrag3.html">Eintrag 3</a></li>
</ul>
</div>
Die Unterpunkte der verschachtelten Liste werden auch mit CSS formatiert:
#hauptnavigation ul li ul li {
font-weight: normal;
border-top: 1px solid #A9B0D7;
border-bottom: 0 solid #A9B0D7;
}
#hauptnavigation ul li ul li a {
padding: 6px 14px;
}
Dabei bezwecken die neu hinzu gekommenen CSS-Deklarationen für die Unterpunkte:
#hauptnavigation ul li ul li#hauptnavigation ul li ul li aDie Gestaltung der Unterpunkte wird hier anders als die Hauptpunkte formatiert. Gestalterisch müssen zwei Aspekte berücksichtigt werden:
Zunächst wird die "aktuelle" Rubrik nicht mehr als Link ausgezeichnet. Der Listenpunkt erhält eine eigene Klasse (aktiv). Der "aktive" Listenpunkt erhält weiterhin ein eigenes Blockelement, damit weitere CSS-Eigenschaften zugewiesen werden können.
<div id="hauptnavigation">
<ul>
<li><a href="eintrag1.html">Eintrag 1</a></li>
<li class="aktiv">
<div class="aktiv">Eintrag 2</div>
<ul>
<li><a href="eintrag2a.html">Eintrag 2 A</a></li>
<li><a href="eintrag2b.html">Eintrag 2 B</a></li>
</ul>
</li>
<li><a href="eintrag3.html">Eintrag 3</a></li>
</ul>
</div>
Der aktive Eintrag und die Links der Unterpunkte werden nun mit CSS weiter verfeinert:
#hauptnavigation ul li.aktiv div.aktiv {
color: #EE3338;
background-color: #FFF;
padding: 6px 7px;
}
#hauptnavigation ul li a#hauptnavigation ul li.aktiv div.aktiv#hauptnavigation ul li ul li aDieses Grundgerüst bietet nun eine Struktur, die mit Screenreadern navigierbar ist. Im nächsten Schritt wird die Wahrnehmbarkeit am Bildschirm noch mal genauer untersucht und verbessert.
Lesen Sie, warum ich mich an die Standards halte und warum das Layout mit Cascading Style Sheets statt Tabellen oder Frames gestaltet wurde. Sollten Sie Probleme mit dem Layout haben, so finden Sie in der Liste standardkonformer Browser Links zu entsprechenden Download-Seiten.
Die ![[intern]](../../lib/img/intern_hellblau.gif){kind=small}
Gesamtübersicht dieses Webauftrittes erreichen Sie jederzeit über das AccessKey-Pad mit Alt+6.
Verwenden Sie Tastenkürzel, etwa Alt mit der entsprechenden Zahl, um auf diesem Webauftritt zu navigieren.
![[intern]](../../lib/img/intern_dunkelblau.gif){kind=small}
