Im nun folgenden Beispiel geht es in erster Linie darum, die nötigen Anforderungen an die Zugänglichkeit zu vermitteln und ein Beispiel für ein gefälliges Erscheinungsbild anzubieten. In unserem Beispiel bauen wir eine "Drucktastenästhetik" auf und blenden einen Teil der Elemente aus. Dabei sollten Sie bedenken, dass wir hier nur die notwendigen Auszeichnungen darlegen. In einem konkreten Projekt müssen Sie in ihrem Style Sheet unter Umständen Kontextselektoren oder zusätzliche Klassen anwenden, um unerwünschte Vererbungen zu vermeiden.

Die im nebenstehenden Screenshot abgebildete Ausgabe mit der default-Darstellung in einem grafischen Browser entspricht auch derjenigen in Textbrowsern und auch - je nach Konfiguration - dem Gesprochenen in Vorlesegeräten. Dass damit viele nicht zufrieden sind, weil sie andere, vor allem visuelle Erwartungen haben, sollte nicht beunruhigen. Das lässt sich mit CSS umsetzen.

Elemente ausblenden

Nehmen wir an, es bestünde der Wunsch, in der visualisierten Darstellung die trennenden Punkte und den Begriff "Standort:" auszublenden, weil das Trennzeichen nur bedingt notwendig ist und "Standort:" durch die folgende visuelle Darstellung als zusätzlicher Text nicht benötigt wird. Beim Einsatz von CSS ist hier Vorsicht geboten. Die naheliegende Auszeichnung mit:

12. span.unsichtbar {display:none;}

oder mit:

12. span.unsichtbar {visibility:hidden;}

kann nicht verwendet werden, da ein Teil der Screenreader den Punkt bzw. "Standort:" nicht auslesen und der beabsichtigte Effekt damit ins Leere läuft. Um dieses Problem zu umgehen, hat sich folgende Auszeichnung als praktikabel erwiesen:

12. span.unsichtbar {
13. position:absolute;
14. left:-1000px;
15. top:-1000px;
16. width:0;
17. height:0;
18. overflow:hidden;
19. display:inline;
20. }

Durch diese Auszeichnungen wird das Trennzeichen auf Wunsch zuverlässig in allen betroffenen Ausgabegeräten aus dem Sichtfeld entfernt und steht dennoch für nicht-visuelle Anwendungen oder (auf Wunsch) für Ausdrucke zur Verfügung.

Gestaltung der Farbgebung, der Überschrift und der Listen

Als nächstes kommen der Menübereich, die Überschrift und die Grundformatierungen der Listen an die Reihe.

Selbstverständlich sollten Sie skalierbare Schriftgrößen in "%" oder "em" angeben, um den Besuchern Ihrer Seiten eine Vergrößerung zu ermöglichen. Laut Spezifikationen ist auch "px" hierfür vorgesehen, aber der Internet Explorer unterstützt diese Funktion nicht. Beziehen Sie hier in Ihre Konzeption auch den gesamten Menü-Bereich ein, damit unerwünschte und unleserliche Überschneidungen vermieden werden, die beim Skalieren entstehen können. Sorgen Sie auch immer für ausreichende Kontraste von Schrift- und Hintergrundfarben.

In allen nun folgenden Beispielauszeichnungen wurde möglichst die Kurzschreibweise gewählt. Das senkt die Ladezeiten und ist übersichtlicher. Damit Größenangaben Browser- und seitenübergreifend unter Kontrolle bleiben, haben sich folgende allgemeine Basis-Auszeichnungen bewährt:

1. /* Alle Elemente werden hiermit angesprochen: */
2. * {
3. padding:0;
4. margin:0;
5. list-style:none;
6. }
7. body {
8. /* Die Schriftgröße wird gegen Browserbugs abgesichert */
9. font:normal 100.01% arial, sans-serif;
10. color:#000;
11. }

Hier das CSS für den Menübereich. Die Schriftgröße kann dort zentral vergeben werden. Das erspart Ihnen unerwünschte Vererbungseffekte und reduziert den Codierungsaufwand.

21. #menue {
22. width:10em;
23. border: 1px solid #fff;
24. border-right:1px solid #777;
25. border-bottom:1px solid #777;
26. background: #eef;
27. padding:0;
28. font:normal 0.9em arial, sans-serif;
29. }

Die Überschrift wird gestaltet:

29. h2 {
30. font: bold 1em arial, sans-serif;
31. color:#222;
32. background: #ccf;
33. padding:3px 12px;
34. border-top: 1px solid #fff;
35. border-bottom: 1px solid #777;
36. }

Als nächstes werden die Drucktastenoptik und die Einzüge für die Listeneinträge angelegt. Da ja Untermenüs vorhanden sind, empfiehlt es sich, die Einträge der ersten Ebene beispielsweise durch zusätzliche Abstände und dickere Linien (oben) voneinander abzugrenzen. Das erleichtert die Zuordnung der Untermenüs und macht das Ganze übersichtlicher. In den Einträgen der Untermenüs werden diese Zusätze zurückgenommen. Dafür werden dort die Links und der Codeschnipsel für die aufgerufene Seite eingezogen, um sie besser als Unterebene identifizieren zu können. Die aufgerufene Seite wird zusätzlich durch ein Hintergrundbild angezeigt. Das dazugehörige CSS sieht so aus:

47. ul li {
48. margin:7px 0 0;
49. border-top: 2px solid #99f;
50. border-bottom: 1px solid #fff;
51. }
52. /* Kontextselektor für die Listeneinträge der zweiten Ebene: */
53. li li {
54. border:0;
55. margin:0;
56. display:inline;
57. }
58. a {
59. display:block;
60. color: #000;
61. padding: 1px 5px 3px 10px;
62. border: 1px solid #eef;
63. border-top: 1px solid #fff;
64. border-bottom: 1px solid #aaf;
65. border-left:0;
66. background:#eef;
67. }
68. strong {
69. display:block;
70. color: #fff;
71. padding: 2px 5px 3px 10px;
72. background: #006;
73. border-right: 1px solid #fff;
74. border-top: 1px solid #808000;
75. border-bottom: 1px solid #ddf;
76. border-left: 2px solid #bbb;
77. }
78. strong dfn {
79. color:#eef;
80. }

Der folgende Kontextselektor erzeugt die Abstände und Einzüge der Listeneinträge der zweiten Ebene. Für die nächsttiefere Ebene muss der linke Einzug immer um je 10 Pixel erhöht werden, also:

90. li li a, li li a:hover, li li strong {
91. padding-left:20px;
92. }

Nun noch einige brauchbare Auszeichnungen wie Effekte für das Überfahren mit der Maus und das Navigieren mit der Tabulatorentaste. Für das Tabbing gibt es ebenfalls eine eigene Formatierung, die allerdings nicht in allen Browsern ausgeführt wird. Abschließend kann man noch die Ordnungszahlen eigens gestalten. Hier ist erwähnenswert, dass das dfn-Element standardmäßig mit kursivem Schriftschnitt ausgegeben wird und dadurch eventuell eine zusätzliche Anpassung notwendig ist. Im CSS sieht das so aus:

101. a:visited {
102. color:#444;
103. background: url(butvis.gif) right top no-repeat;
104. }

Eine besondere Beachtung bei der CSS-Auszeichnung verdient die Behandlung der Linien (border). Sie stellen gerade für sehbehinderte Menschen eine nützliche Orientierungshilfe dar. Hierbei gilt es zu bedenken, dass sehbehinderte Menschen häufig mit lokalen Einstellungen surfen, beispielsweise weil sie mit hellen Schriften auf dunklen Hintergründen besser zurecht kommen.

Bei der Aktivierung lokaler Einstellungen werden alle Schrift-, Hintergrund- und Linienfarben, die Sie in Ihrem Design festgelegt haben, außer Kraft gesetzt und mit den eigenen Farben des Benutzers überschrieben. Sie können sich selbst einen Eindruck verschaffen, indem Sie beispielsweise im Internet Explorer mittels Extras > Internetoptionen > Alt+E > Farbangaben auf Webseiten ignorieren aktivieren.

Sollten Ihre Versuche scheitern, mit Extras > Internetoptionen > Alt+F > Windows-Farben deaktivieren und Farben wählen auch die Hintergrundfarben beispielsweise auf Schwarz einzustellen, sei darauf hingewiesen, dass hier offensichtlich ein bug im Internet Explorer vorliegt, der die Einstellungen nur für die Schriftfarben übernimmt. Sie müssen deshalb in den Start > Einstellungen > Systemsteuerung > Anzeige > Darstellung > Schema > "Kontrast Schwarz" wählen.

Wir werden in der Folge zeigen, mit welchen Auszeichnungen Sie dennoch die betreffenden Nutzer unterstützen können, unabhängig davon, ob lokale Einstellungen verwendet werden oder nicht.

105. a:hover {
106. padding:2px 10 px;
107. border-top: 1px solid #bbb;
108. /* bei lokalen Einstellungen bleibt ein Hover-Effekt erhalten */
109. border-right: 7px solid #fff;
110. border-bottom: 1px solid #ddf;
111. border-left: 1px solid #99f;
112. background: #fff;
113. }

Beim Antabben werden stärkere Kontraste eingesetzt, die zugleich eine Unterscheidung von der aktuell angezeigten Seite im Menü ermöglichen. Stärkere Linien sichern - wie beim hover-Effekt - die Unterstützung bei lokalen Einstellungen.

114. a:focus, a:active {
115. color:#ff0;
116. font-weight:bold;
117. border-top: 1px solid #ff0;
118. border-right: 7px solid #ff0;
119. border-bottom: 1px solid #000;
120. border-left: 1px solid #000;
121. background: #33a;
122. }

zuletzt werden noch die Ordnungszahlen formatiert, um das Menü fertigzustellen:

122. dfn {
123. font: bold 0.7em tahoma, sans-serif;
124. color:#00c;
125. margin-right:3px;
126. }
127. strong dfn {
128. color: #fff;
129. }
130. #menue a:focus dfn, #menue a:active dfn {
131. color: #ff0;
132. }

Geht das nur so?

Der Eine oder die Andere möge befürchten, dass die hier vorgestellte Navigation Einschränkungen beim Design nach sich zieht. Doch gerade die Trennung von Struktur und Gestaltung halten hier mindestens ebenso viele Möglichkeiten offen wie bei dem bisherigen Weg der Umsetzung. Das bleibt letztlich Ihrer Kreativität überlassen. Zur Veranschaulichung einige Beispielseiten, die das in diesem Tutorium vorgestellte Navigationsmenü einsetzen:

• Pro Retina Deutschland e.V..
• Integrationsfachdienst Hamburg.
• Österreichisches Jüdisches Museum.
• Pestizid Reduktionsprogramm.
• Schwäbischer Heimatbund.
• papoo.
• Schwangau.
• Wertewerk.
• Dr. Brückmann.

Entscheidend ist natürlich im Zweifelsfall, ob die Voraussetzungen für Barrierefreiheit durch die Geräteunabhängigkeit erfüllt sind. Im nächsten Teil sehen Sie das Ergebnis unserer Testreihen für visuelle und textbasierte Browser und für die gängigsten Screenreader.

Wir würden gerne Ihre Meinung wissen: Teilen Sie uns Ihre Erfahrungen mit und diskutieren Sie diesen Artikel mit anderen Experten.