2.2.1 Navigation in Textform, nicht in Grafikform

Hintergrund

Eine Navigation in Textform – im Gegensatz zur Verwendung von Grafiken – macht ausgabe­unabhängig. Inhalte können mittels verschiedener CSS Styles unterschiedlich präsentiert werden, z.b. auch auf mobilen Geräten. Sie ermöglicht individuelle Benutzereinstellungen wie Schriftvergrößerung, Kontraständerung (z.B. weiße Schrift auf schwarzem Grund) für blendempfindliche Menschen und Überschreiben der Seiten Stylesheets durch lokales CSS, das eine individuell zugängliche Darstellung ermöglichen.

Navigation in Textform wird bei Vergrößerung, besonders bei Verwendung von Zoomsoftware (Vergrößerung ab 200% oder weit höher) nicht pixelig. Sie erlaubt blinden Usern die Darstellung in Form von kontextunabhängigen, alphabetischen Linklisten, die für sie schneller überschaubar sind. Textnavigation verringert die Ladezeit und sind außerdem leichter und schneller wartbar, erweiterbar und generell flexibler in der Handhabung durch RedakteurInnen.

Bei allen moderen Webshops geht der Trend in Richtung Textnavigation.

Maßnahmen

  • Verwenden Sie Text für Navigation, nicht Grafiken.
  • Wenn Sie grafische Menüs einsetzen, versehen Sie die Menüpunkte mit alternativen Texten (ALT-Attribut).
  • Lagern Sie ev. zugehörige Icons und grafische Elemente (z.B. Karteireiter) ins CSS aus (Background Images).
  • Wichtige Information (z.B. Navigationstext) darf nicht über CSS Hintergrundbilder eingebunden werden. Bei weggeschaltenen Bildern geht die Information gänzlich verloren. Im Kontrastmodus des Betriebssystems oder beim Ausblenden von Farben werden Hintergrundbilder automatisch ausgeschaltet, eine über Hintergrundbilder eingebundene Navigation wird dadurch unbenutzbar.
  • Ermöglichen Sie das Mitwachsen grafischer Hintergrundelemente oder Hintergrundfarbflächen bei Schriftvergrößerung.
  • Achten Sie auf die Positionierung von Icons und Hintergrundflächen im CSS bei Schriftvergrößerung.
  • Verwenden Sie CSS Effekte für Mouseover, bei Tastaturfokus, bei aktiven Menüpunkten (a:hover, a:focus, a:active)
  • Idealerweise ist der gerade aktive Menüpunkt nicht verlinkt, wenn es sich um die geöffnete Seite handelt.
  • Verwenden Sie kurze, prägnante Menübeschriftungen und ermöglichen Sie Zeilenumbruch oder mitwachsende Navigationselemente (z.B. durch schriftgrößenabhängige Breite) bei Schriftvergrößerung1.
  • Achten Sie darauf, dass es bei Schriftvergrößerung zu keiner Überlappung von wesentlichen Inhalten oder zum Zerfallen des Layouts kommt. Dies ist insbesondere bei nicht-elastischen Layouts (siehe Glossar) für ältere Browser (IE6) wichtig, die noch keine Zoomfunktion haben.
  • Achten Sie auf gut lesbare Schrift (dies ist eine generelle Empfehlung, die aber gerade bei komplexer Navigation besonders wichtig ist:
    • Achten Sie auf ausreichende Schriftgröße.
    • Geben Sie die Schriftart nicht in px, sondern einer relativen Einheit (wie em oder %) an2.
    • Verwenden Sie sans-serif Schriften, die am Bildschirm besser lesbar sind und Schriften, die sich auch für kleine Darstellung eignen (z.B. eher Verdana als Arial, weil diese eine größere Laufweite hat und auch bei Schriftgrößen unter 10px noch gut lesbar ist).
    • Der Abstand zwischen Navigationspunkten sollte deutlich größer sein als der Zeilenabstand bei Navigationspunkten mit Zeilenumbruch. Ausreichendes Padding von Navigationspunkten sorgt für größere Klickflächen.

Wer profitiert davon

  • alle NutzerInnen
  • Blinde NutzerInnen
  • NutzerInnen mit Seheinschränkungen

Beispiele

Amazon Karteireiternavigation Frankreich

amazon.fr: Auf der französischen Amazon Seite war die Karteireiternavigation auch Mitte 2008 noch in Gebrauch.

Quelle Text vergrössern geht nicht

quelle.at: Quelle bietet zwar eine Navigation in Textform. Die Schrift ist jedoch in px definiert und daher im IE nicht vergrößerbar. Dies ist in neueren IE Versionen mit Zoomfunktion nicht mehr so problematisch; die browserunabhängige Möglichkeit der Schriftvergrößerung bleibt aber weiterhin eine Grundforderung für Barrierefreiheit. In den durchgeführten Benutzertests versuchte eine Testperson – ohne Erfolg – die Schrift über das Browsermenü des IE7 größer zu stellen.

amazon Karteireiter Navigation

amazon.de: Amazon ersetzte 2008 die kleinteilige grafische Karteireiter Navigation oben durch eine seitliche Textnavigation. Dadurch ist eine größere Flexibilität bei der Anzahl und Länge der Menüpunkte gegeben. Die vertikale Navigation ist übersichtlicher. Grafische Elemente (z.B. Pfeile, Menürundungen) werden als Hintergrundbilder im CSS eingebunden.