14.03 Kriterien für zugängliche Seiten im Überblick

14.3.1 Trennung von Content und Layout

Die erste und wichtigste Regel für die Entwickler ist die möglichst vollständige Trennung von Inhalt und Layout:

• Sauberer und reiner HTML-Code für die Inhalte
• Keine unnötigen Layouttabellen
• Formatierung ausschließlich über CSS
• Ein logischer semantischer Aufbau
• Sprungmarken

Die linearisierbare Ausgabe des Inhalts und die Formatierung ausschließlich über CSS ist eine der wichtigsten Bedingungen für praktische Zugänglichkeit.

Nur dann hat Assistive Technologie die Möglichkeit, den Inhalt nach Belieben aufzubereiten, während die visuelle Präsentation völlig unberücksichtigt bleiben kann. Die Auslagerung der Präsentation in Stylesheets gibt dem z.  B. sehbehinderten User überdies die Möglichkeit, eigene Stylesheets in seinem Browser zu definieren und damit die Seiten exakt seinen Bedürfnissen anzupassen. Eine lineare Darstellung der Inhalte und eine adäquate semantische Struktur ist für Screenreader-Nutzer besonders wichtig.

Screenreader erfassen den Inhalt einer Website von oben nach unten – also linear. Verwendet man umfangreiche Layoutabellen, ist diese Linearisierung nicht mehr gegeben.

Unter dem Begriff Semantik im Web kann man sich erst einmal wenig vorstellen. Man denkt wahrscheinlich an den Deutschunterricht, aber auch beim Schreiben von Webinhalten spielt sie eine besondere Rolle. Zum Beispiel bieten Screenreader ihren Nutzern an, von Überschrift zu Überschrift oder von Liste zu Liste zu springen, was einen schnelleren Überblick über das Gesamtdokument verschafft. Beinhaltet ein Webdokument keine Überschriften, ist diese Funktionalität nicht nutzbar.

Die formale Struktur eines Webdokumentes sollte der inhaltlichen Struktur weitgehend entsprechen. Je nach Webprojekt kann die Wahl der entsprechenden Überschriftenhierarchie durchaus eine Herausforderung sein.

Sprungmarken

Lineare Darstellung von Inhalten hat allerdings einen großen Nachteil: Unter Umständen muss man einen sehr weiten Weg zurücklegen, um zu »hinten« liegenden Inhaltsbereichen zu kommen. Auf dem Bildschirm können bei einem Drei-Spalten-Layout dagegen mehrere Bereiche »oben« zumindest anfangen, und das Auge kann gleich dorthin springen, wo es – durch visuelle Hilfen unterstützt – die gerade interessierende Information vermutet. Abhilfe bietet hier das Konzept der Sprungmarken. Es bildet faktisch ein nicht visuelles Gegenstück zum grafischen Layout und ermöglicht es dem Anwender linearer Wiedergabegeräte, wesentliche Inhaltsbereiche bereits am Anfang der Seite zu identifizieren und dann unmittelbar dorthin zu springen, wo er die Informationen vermutet, die ihn interessieren.

Praktisch läuft der Einsatz von Sprungmarken darauf hinaus, an den Anfang jeder Seite noch einmal ein zusätzliches Menü für die seiteninterne Navigation zu stellen. In den meisten Fällen wird es sinnvoll sein, dieses Menü im grafischen Layout auszublenden – für sehende User ist es mitunter höchst irritierend, wenn sie einen Link betätigen, aber es geschieht (scheinbar) nichts, weil das Linkziel ja bereits im Viewport sichtbar ist. In jedem Fall sollte das »Übersprungmenü« nicht zu lang und sehr durchdacht aufgebaut sein, weil es ja unter den Bedingungen der Linearisierung selbst ebenfalls zur Verlängerung und Verkomplizierung des Wahrnehmungspfades beiträgt. Im Allgemeinen dürfte es empfehlenswert sein, als erstes Sprungziel »zum Hauptinhalt« anzubieten – dann haben Stammbesucher, die sich auf einer Site auskennen und die Navigation gezielt handhaben, den kürzesten Weg dorthin, wo sie tatsächlich hin wollen.

Spätestens hier wird deutlich, dass insbesondere Seiten mit komplexeren Inhalten nicht nur ein grafisches Layout benötigen, sondern auch ein Content-Design, das darauf abzielt, den Seiteninhalt in einer Form anzuordnen, die für Anwender linearisierender Clients keine überflüssigen Barrieren enthält.

14.3.2 Anforderungen an das Design und den Inhalt

Die Gestaltung einer Website ist mehr als ein nettes Design, sie unterstützt die Besucher bei der Aufnahme der angebotenen Informationen. Sie zeigt ihm Interaktionsmöglichkeiten und drückt gleichzeitig die Corporate Identity des Seitenbetreibers aus. Sie führt den Betrachter in logischer Folge durch die wichtigsten Inhalte einer Seite und hilft ihm so beim Erfassen des Gesamtkonzepts.

Im Rahmen von barrierefreier Gestaltung ist besonders zu achten auf:

• Sinnvolle Anordnung der Inhalte
• Durchdachte Farbwahl
• Ausreichende Kontraste
• Variable Schriftgrößen
• Skalierbare Layouts
• Keine Schriftgrafiken
• Keine transparenten Hintergründe für Grafiken
• Sinnvolle Alternativ-Texte für Grafiken
• Ausreichend große Navigationselemente
• Vorsicht bei mausgesteuerten Events

14.3.3 Visuelle und inhaltliche Anordnung der Inhalte

Die optische Gliederung der einzelnen Seitenbereiche ist ein zentrales Element, um Inhalte zu präsentieren und den Benutzer strukturiert durch das jeweilige Webangebot zu führen. Je strukturierter und logischer der Aufbau ist, desto besser werden sich die Benutzer auf Ihrer Website zurechtfinden.

Die inhaltliche Struktur ist dabei genauso wichtig wie die gestalterische Struktur. Der inhaltlichen Konzeption fällt eine besondere Bedeutung zu: Eine wichtige Richtlinie bei der Strukturierung der Inhalte ist:

Strukturieren Sie Ihre Inhalte immer so, dass sie den Erwartungen Ihres Nutzers entsprechen.

Das ist nicht immer ganz einfach, denn oftmals muss man umdenken. Ein Anbieter kennt seinen Betrieb und die internen Abläufe, so dass man aus dieser Sicht Dinge anders strukturieren würde, als es für den Nutzer vielleicht sinnvoll erscheint.

Im Lauf der Jahre haben sich im Web einige deutlich erkennbare Konventionen zur optischen Gliederung entwickelt: Im Kopfbereich findet man in der Regel Informationen über den Anbieter; Sinn und Zweck der Seite sowie zentrale Navigationselemente wie Kontakt, Impressum und mögliche Navigationshilfen wie etwa Links zu einer Sitemap oder einer Suchfunktion. An dieser exponierten Position befinden sich diese Informationen direkt im Blickfeld des Betrachters und können bei möglichen Problemen direkt angewählt werden.

Entsprechend der westlichen Leserichtung bewegt sich das Auge von links nach rechts und von oben nach unten über die Seiten, deshalb befindet sich das Logo meistens oben links, im primären optischen Bereich. Dort wird es gefunden – wenn man es sucht.

Der durchschnittliche User erwartet die Navigation auf der linken Seite. Oftmals diskutiert, wird diesem Konzept Langeweile und fehlende Innovation vorgeworfen. Menschen bewegen sich jedoch auch im Netz nach vertrauten Mustern. Sie haben ihre eigenen Erfahrungen und reagieren entsprechend. Gewohnte Positionierungen verkürzen die Zeit, die der User zum Erfassen der Gesamtinhalte benötigt, er kann sich schneller den eigentlichen Inhalten zuwenden.

14.3.4 Die Farbwahl

Die Farbwahl ist gerade im barrierefreien Zusammenhang besonders wichtig, denn auch Menschen mit eingeschränkter Farbwahrnehmung sollen Ihre Website uneingeschränkt nutzen können.

Konvertiert man ein Layout in Graustufen, gewinnt man eine ungefähre Vorstellung davon, was z.  B. farbenblinde Menschen sehen. Allerdings ist die Wahrnehmung sehr individuell und je nach Ausprägungsgrad der Fehlsichtigkeit unterschiedlich. Viele farbenblinde Menschen haben allerdings im Lauf ihres Lebens gelernt, welche Farben hinter dem, was sie tatsächlich sehen, stecken. Sie wissen z.B., dass Rasen grün ist, und können durch Vergleiche auch andere Grüntöne identifizieren.

Abbildung 14.1: Die Beez, in Graustufen konvertiert

Wesentlich verbreiteter als die totale Farbenblindheit ist die so genannte Rot-Grün-Blindheit. Durch eine genetische Besonderheit sind Betroffene nicht in der Lage, die Farben Rot und Grün zu unterscheiden. Mischfarben, die diese Farbanteile enthalten, verschwimmen.

14.3.5 Kontraste

Farben spielen auch bei verschiedenen anderen Arten der Sehbehinderung eine wichtige Rolle, denn nicht nur der Farbwert, sondern auch ein deutlicher Farbkontrast kann bei der Nutzung einer Webseite hilfreich sein.

Vorder- und Hintergrundfarbe sollten innerhalb der Textelemente einen deutlichen Kontrast bilden, allerdings ist es nicht möglich, Farb- und Kontraststellungen auszuwählen, die allen gerecht werden. Schwarzer Text auf weißem Hintergrund erzielt einen größtmöglichen Farbkontrast. Um störende Blendeffekte zu vermeiden, kann eine leichte Tönung des Hintergrundes sinnvoll sein. Manche fehlsichtige Menschen benötigen sehr starke Kontraste, um die einzelnen Elemente einer Seite inhaltlich voneinander trennen zu können. Für sie sind Farbkombinationen wie z.  B. weiße Schrift auf hellem, orangefarbenem Hintergrund nicht kontrastreich genug. Auf andere hingegen wirken starke Kontraste als Überstrahlung – der Inhalt wird schwer lesbar.

14.3.6 Variable Schriftgrößen

Eine weitere, ebenfalls außerordentlich wichtige Regel ist, die Schriftgrößen variabel zu gestalten.

Die gängigen Browser bieten uns glücklicherweise die Möglichkeit, Schriften zu zoomen. Dies funktioniert aber nur dann, wenn wir relative Angaben für die Schriftgrößen machen und keine feste Pixelgröße wählen. Sie haben die Wahl zwischen Prozentangaben und der em-Angabe. Beide Angaben beziehen sich, wenn man sie auf die Eigenschaft font-size anwendet, auf die elementeigene Schrifthöhe.

14.3.7 Skalierbare Layouts

Innerhalb des Webdesigns unterscheidet man zwischen festen und fluiden Layouts.

Fluide Layouts passen sich der Bildschirmgröße an und bieten skalierbarem Text Raum. Die Breitenangaben einzelner Spalten des Designs werden in Prozent oder em angegeben, das bietet die Möglichkeit, den Darstellungsbereich des Bildschirms maximal auszunutzen. Ändert sich die Größe des Browserfensters, passt sich der Inhalt automatisch an.

Das ist generell eine sehr schöne Art, Inhalte zu präsentieren. Ich selbst halte es aber so, eine maximale Breite von ca. 950 bis 980 Pixeln festzulegen, was den Vorteil bietet, dass bei sehr großen Bildschirmauflösungen die Zeilenlänge nicht zu lang wird, was nämlich die Lesbarkeit des Inhalts einschränken würde.

14.3.8 Grafiken

Grafiken können wir auf unserer Seite unterschiedlich einsetzen. Zum einen in unserem Template und zum anderen in dem eigentlichen Inhaltsbereich.

Für die Gestaltung ist besonders wichtig, dass wir z.  B. beim Einbinden eines Logos darauf achten, transparente Hintergründe zu vermeiden. Stellen Sie sich vor, Sie hätten ein Logo mit einem schwarzen Schriftzug auf transparentem Hintergrund eingebunden.

Menschen mit bestimmten Fehlsichtigkeiten surfen z.B im Windows-Invertierungsmodus, wobei in der Regel helle Schrift auf schwarzem Hintergrund verwendet wird (Abbildung 14.2).

Abbildung 14.2: Invertierte Darstellung

Das Beez-Logo hat einen weißen Hintergrund und ist auch bei schwarzem Hintergrund noch erkennbar.

Ihr Logo ist für diese Menschen nicht zugänglich, da der Schriftzug von dem schwarzen Hintergrund überlagert wird.

Generell sollte man auf Schriftgrafiken verzichten, eine textliche Alternative ist in den meisten Fällen möglich, denn Schriftgrafiken sind in der Regel nicht skalierbar und damit vom Nutzer nicht beeinflussbar.

Es gibt Situationen, in denen der Kunde einen besonderen Schriftzug fordert. In diesen Falle kann ich Ihnen dazu raten, die Schriftgrafiken größer anzulegen und mit der relativen Größenangabe em auf die Wunschgröße herunterzuskalieren. So sind sie wenigstens etwas vergrößerbar.

Und denken Sie daran, einen sinnvollen Alternativ-Text zu vergeben.

Grundsätzlich sollten Sie sich immer Gedanken über sinnvolle Alternativ-Texte für Grafiken machen. Denn Menschen, die nichts oder nur eingeschränkt sehen können, bleibt die Information, die diese Grafiken transportiert, verschlossen.

Mithilfe des alt-Attributes des img-Elements haben Sie die Möglichkeit, einen alternativen Text zu formulieren.

Das Formulieren eines solchen Textes ist nicht immer einfach, grundsätzlich sollte er kurz, aussagekräftig und prägnant sein.

Bilder, die keine Information enthalten, erfordern auch keinen alt-Text. Allerdings gibt es zwischen Bildern, die klar erkennbare und eindeutige Information enthalten, und solchen, die nur eine Stimmung transportieren oder ganz ohne bestimmbaren Inhalt nur zur Gestaltung in der Fläche dienen, ein breites Spektrum von Möglichkeiten. Unter diesen Umständen ist es wirklich oft nicht leicht, das von der BITV an die erste Stelle ihres Forderungskataloges gesetzte Gebot zur Angabe von textlichen Alternativen zu erfüllen.

Um z.  B. Grafiken mit vielen Informationen – ich denke da etwa an eine grafische Auswertung der letzen Bundestagswahlen – zu beschreiben, bietet sich das longdesc-Attribut an.

Das Attribut enthält einen Verweis auf eine externe Quelle, die den beschreibenden Text enthält.

<img src="wahlergebnisse.jpg" width="271" height="265" alt="Übersicht der Wahlergebnisse der Bundestagswahl" longdesc="wahlergebnisse.html">

Leider hat longdesc Schwächen in der Implementierung – es wird nicht von allen Screenreadern ausgewertet.

14.3.9 Ausreichend große Navigationselemente

Menschen, denen es aus unterschiedlichen Gründen nicht möglich ist, eine Maus zu führen, sind auf alternative Techniken angewiesen. Viele von ihnen nutzen entweder die Tastatur oder alternative technische Hilfsmittel. Das klassische Beispiel für motorische Behinderungen ist sicherlich Steven Hawking⁵. Der Physiker leitet an amyothropher Lateralsklerose und steuert seinen Rollstuhl mit dem Mund. Die angebotenen Hilfsmittel sind in vielen Bereichen technische Wunderwerke, die Dinge ermöglichen, die wir für unmöglich halten würden.

Jahrelang gab es die Richtlinie, auf mausgesteuerte Events zu verzichten, da diese von motorisch eingeschränkten Menschen und Screenreader-Nutzern nicht bedienbar sind, die Hilfsmittel sind aber mittlerweile in der Lage, adäquat damit umzugehen⁶.

Reinen Tastaturnutzern bleiben mausgesteuerte Events jedoch nach wie vor verborgen.

In jedem Fall sollte man darauf achten, ausreichend große Schaltflächen anzubieten. Links, die nur einen kleinen sensitiven Bereich aufweisen, sind schwer zu treffen, Und das nicht nur für Menschen mit Behinderung.

14.3.10 Formulare

Interaktivität wird im Netz immer wichtiger, um Kommunikationsprozesse zwischen dem Anwender und dem Seitenbetreiber zu vereinfachen. Der Besucher gibt persönliche Daten ein, und ein Programm im Hintergrund verarbeitet diese weiter.

HTML-Formulare sind beim aktuellen Stand der Technik immer noch das bevorzugte Mittel zur Realisierung dieser Interaktion.

Unter dem Aspekt der Accessibility ist das auch sehr zu begrüßen, weil HTML zumindest grundlegende Möglichkeiten bereitstellt, Interaktion plattformübergreifend und geräteneutral zu ermöglichen. Solange diese Funktionalität auch für Anwender von alternativen Technologien erreichbar ist, ist nichts dagegen einzuwenden.

Die zugängliche Gestaltung von HTML-Formularen ist in erster Linie ein Problem der Linearisierung und der Gruppierung des Inhalts.

Die Elemente fieldset und label

Webdesigner neigen dazu, Formulare in Layouttabellen darzustellen. Tatsächlich erscheint die Gestaltung der Formulare damit deutlich einfacher. Leider verleitet das aber auf der anderen Seite zu Konstruktionen, bei denen die inhaltliche Verbindung zwischen der Beschriftung und dem Formularelement verloren gehen kann.

Um einen logischen Bezug zwischen den Formularelementen und der Beschriftung zu ermöglichen, ist in (X)HTML das label-Element vorgesehen.

<label for="Vorname" title="Vorname">Vorname:</label>
<input id="Vorname" type="text" size="20" name="Vorname" value="" />

Das Eingabefeld erhält mithilfe des Universalattributes ID einen eindeutigen Namen, auf den dann das Attribut for des label-Elements verweist.

Hat man innerhalb eines Formulars ähnlich lautende Eingabefelder, z.  B. getrennte Angaben für Ehefrau und Ehemann, ist die Gruppierung mit fieldset ein hilfreiches Instrument, diese Bereiche eindeutig voneinander zu trennen.

<fieldset>
  <legend>Angaben Ehefrau</legend>
  <label for="Vornamefrau">Vorname</label>
  <input id="Vornamefrau" 
         type="text" size="20"
         name="Vorname"
         value=""   />
   ...
</fieldset><fieldset>
<legend>Angaben Ehemann</legend>
  <label for="Vornamemann">Vorname</label>
  <input id="Vornamemann"
         type="text" 
         size="20"
         name="Vorname"
         value="" />
</fieldset>

...  

Für Nutzer des Screenreaders Jaws bietet der Einsatz von Legend eine zusätzliche Navigationshilfe, denn er kann von fieldset zu fieldset springen, um damit eine schnellere Übersicht über die Formularelemente zu gewinnen. Der Webformator kann das z.  B. nicht.