Gesetzlich verordnet: Barrierefreies Web – Teil 2

von Dirk Metzmacher

Die BITV – die Barrierefreie Informationstechnick Verordnung – für das barrierefreie Internet gibt Richtlinien, die größtenteils vom “guten Webdesigner” seit eh und je beachtet werden.  Auf Feinheiten gilt es trotzdem zu achten.

Frames – Ein altes Übel
Leider haben die Sprachausgabeprogramme große Probleme mit der Wiedergabe von Webseiten mit Frames. Je nach System werden die Inhalte gar nicht oder nur teilweise wiedergegeben. Das <noframes>–Element steht jedem zur Verfügung, aber dort nochmals die gesamte Website ohne Frames zu hinterlegen ist sehr aufwändig. Kein Kunde wird das bezahlen wollen. Man muss aber bedenken, dass die für den sehenden Besucher problemlose Orientierung beim Blinden nicht gegeben ist.

Frames werden oft ohne Sinn benannt. Häufig nur mit „frame_links“ und „frame_rechts” betitelt geben sie keine Auskunft über den wahren Inhalt. Die Benennung der Frames sollte also den Sinn und Zweck der einzelnen Frames wiedergeben. Wer nicht auf Frames verzichten will oder kann, sollte das beherzigen und einen Frame zum Beispiel “Navigation“, den anderen “Inhalt” nennen. Besser ist der komplette Verzicht auf diese Technik.

Frames: Schon immer geliebt und verteufelt

Usability oder die Gebrauchstauglichkeit
Zum Thema Usability sagt die Verordnung: “Navigationsmechanismen sind übersichtlich und schlüssig zu gestalten” und “Das Ziel jedes Hyperlinks muss auf eindeutige Weise identifizierbar sein”. Das bedeutet, dass jeder Link auch ohne Zusammenhang eine eindeutige Aussage zum Ziel haben muss. Manche Brower fassen auf Wunsch die Links einer Seite zusammen. Diese Orientierungshilfe ist dahin, wenn ein Link nicht eindeutig benannt wurde. Mit dem title–Attribut können weitere Informationen zum Ziel übermittelt werden.

Weiterhin sagt die Verordnung, dass, wenn inhaltlich zusammenhängende Dokumente getrennt angeboten werden, Zusammenstellungen dieser Dokumente bereitzustellen sind. Wenn eine HTML-Seite also eine Folge aus einer Serie ist (etwa Seite 2 von 4), sollte die Hierarchie dieser Serie mit Link Relations abgebildet werden. Die Tags dazu sind <link rel=”start”>, <link rel=”previous”>, <link rel=”next”> und <link rel=”last”>. Diese Daten können aber auch Verweise auf ein Glossar, ein Inhaltsverzeichnis, eine Suchfunktion oder auch eine Hilfe–Seite sein.

Die Bestimmung aus der Verordnung:, “Es sind Informationen zur allgemeinen Anordnung und Konzeption eines Internetangebots, z.B. mittels eines Inhaltsverzeichnisses oder einer Sitemap, bereitzustellen” ist klar. Ein Inhaltsverzeichnis oder eine Sitemap sollte bei größeren Projekten eh zum Standard gehören. Genauso eine Suchfunktion mit simpler Volltextsuche und zusätzlich einer Komfortsuche sowie “schlüssig und nachvollziehbare Navigationselemente”.

Usability: Immer ein “Muss”

Kompatibilität zum Screenreader
In der BITV steht dazu: “Das Erscheinenlassen von Pop-Ups oder anderen Fenstern ist zu vermeiden. Die Nutzerin, der Nutzer ist über Wechsel der aktuellen Ansicht zu informieren”. Das unerwünschte Öffnen von Pop–Up–Fenstern ist beim Internetsurfer nicht sonderlich beliebt. Auch Links, die Inhalte im neuen Browserfenster öffnen, sollten vermieden werden. Bei sich automatisch öffnenden Fenstern kommt es zu dem Problem, dass die Ansicht sich unaufgefordert ändert. So wird der Clickstream unterbrochen. Die History des Browsers ist wertlos und es gibt kein “zurück”.

Die folgende Regel ist leicht zu verstehen: Man soll “bei allen Formular-Kontrollelementen mit zugeordneten Beschriftungen Sorge tragen, dass die Beschriftungen korrekt positioniert sind und “genau ihren Kontrollelementen zugeordnet werden können”.

“Nebeneinanderliegende Hyperlinks sind durch von Leerzeichen umgebene, druckbare Zeichen zu trennen”. Screenreader haben die unangenehme Eigenschaft, bei langen Wortfolgen ohne Punkt und Komma in der Satzmelodie abzufallen, was nicht gerade zum Hörgenuss führt. Druckbar heißt, dass Zeichen aus dem verwendeten Zeichensatz genutzt werden müssen, also keine Leerzeichen wie “nbsp;” oder gar Spacer-GIFs. Hier hat sich das Pipe–Zeichen ( | ), umgeben von jeweils einem Leerzeichen durchgesetzt.

Es muss einfach passen

Orientierung
Das Frames eindeutig zu benennen sind, wurde weiter oben schon erwähnt. Weiterhin verlangt die Verordnung, dass inhaltlich verwandte oder zusammenhängende Hyperlinks zu gruppieren sind. Die Gruppen sind eindeutig zu benennen und müssen einen Mechanismus enthalten, der das Umgehen der Gruppe ermöglicht”. So sollen alternative Ausgabemedien die Möglichkeit bekommen, den Surfer bei der Navigation in nicht–grafischen Umgebungen zu unterstützen.

Bei der Sprachausgabe fehlt der visuelle Kontext, was bedeutet, dass eben nicht so einfach von Textblock zu Textblock gesprungen werden kann. Nicht jeder will alles lesen müssen, deshalb ist es sinnvoll, Blöcke mit einem Verweis innerhalb der Seite überspringbar zu machen. Dies geschieht über lokale Anker wie <a href=”#inhalt>, die auf eine Stelle der gleichen Seite mit einer ID (etwa <div id=”zweitespalte”>) verweist. Dies sind genau die ID’s, die man auch zum Wiedererkennen von Blöcken einsetzt, um per CSS Stile zuweisen zu können. Zwei Fliegen mit einer Klappe, sozusagen.

Wo finde ich was?

Auch wenn die Verordnung die Gleichstellung von Behinderten zum Ziel hat: Sie bringt Vorteile – für jeden Menschen.

Erstveröffentlichung 26.05.2005

Weitere Beiträge:

• 5 Ideen wie Sie wiederkehrende Arbeitsschritte & Marketingprozesse gewinnbringend im Internet automatisieren! Ein Gastbeitrag von Robert Nabenhauer.
• Wachstum durch Facebook-Gewinnspiele: Wie Sie über Facebook virale Gewinnspiele & eine schnell wachsende Fangemeinde aufbauen
• Wie Sie aufmerksamkeitsstarke Prelaunch-, Launch- und Relaunch-Szenarien aufbauen und dabei Viralität, Spannung & Kaufkraft erzeugen
• Wie Sie waschechte Iphone-Apps mit PhoneGAP entwickeln, um am lukrativen App-Markt mitzumischen
• Wie Sie Ihr Shop-Sortiment so präsentieren, dass der Kunde in Zukunft mehr findet und eher kauft! Ein Gastbeitrag von Nicolas Schmidt-Voigt.
• 11 faszinierende BuddyPress-Plugins, um kostenlos aus WordPress ein soziales Netzwerk zu zaubern
• Die Vorboten einer neuen Internet-Industrie! Ein exklusiver Rückblick & Blick hinter die Kulissen der Clickbank-Exchange 2011 in New York.