Lernbehinderung und Barrierefreiheit

Tags: ,

Stand: 15.01.2004, Autor: pr

3. Barrierefreiheit der grafischen Darstellung einer Webseite

Farb- und Kontrastprobleme

  • Die Auswahl der Farben für Bilder, Text und Hintergrund ist enorm wichtig und es ist ratsam, für einen ausreichenden Kontrast zwischen einzelnen Elementen einer Seite zu sorgen.
  • Farbe sollte nicht als einziges Mittel bei der Unterscheidung zwischen verschiedenen Bereichen des Inhalts benutzt werden (z. B. roter Text für wichtigen Text). Farbe kann allerdings dann effektiv sein, wenn sie in Verbindung mit eindeutiger Beschriftung benutzt wird, um verschiedene Bereiche auf einer Seite, Absätze und Kategorien hervorzuheben
  • Der stärkste Kontrast sollte der zwischen Hintergrund und Text sein. Der Hintergrund sollte eine einzige, flächige Farbe haben. Vermeiden Sie wenn möglich aufdringliche und grelle Strukturen, Muster oder Bilder. Verlassen Sie sich allerdings nicht darauf, dass der Hintergrund das einzige Mittel für den Kontrast ist, da die Browser einiger Benutzer eventuell die gewählte Farbe oder Form nicht darstellen. Bei der Auswahl von Farben sollten Sie dunklen Text vor hellem Hintergrund wählen, z. B. dunkelblau auf creme. Die Benutzung von »Web-sicheren« Farben (216 Farben, die in der Mehrzahl der Browser zur Verfügung stehen) sollte helfen, die Interoperabilität sicherzustellen.
  • Vermeiden Sie Kombinationen von Grün und Rot oder Pink, da diese für farbfehlsichtige Benutzer verwirrend sein können. Rot und Grün sollten nicht übereinander oder nebeneinander benutzt werden, wenn dies zu Verwechslungen führen kann. Benutzer könnten zwar in der Lage sein, Rot von Grün zu unterscheiden (was der tatsächliche Effekt von Protanopie und Deuteranopie ist); sie können aber Fehler machen, indem sie die Falsche auswählen. Grün und Rot jeweils alleine sollten keine Probleme hervorrufen. Rot auf Schwarz und umgekehrt ist ein weiteres Problem für Protanopen.
  • Einige Menschen mit Dyslexie leiden unter Licht- bzw. Blendempfindlichkeit (auch bekannt unter dem Begriff Irlen-Syndrom) was zur Folge hat, dass sie es schwierig finden, starke Kontraste wie zum Beispiel schwarz auf weiß zu lesen. Dies kann zu visuellen Effekten führen wie zum Beispiel den so genannten »rivers of white space«.
    Bildschirmfoto: Ein Text mit dem beschriebenen Effekt
    Abbildung 1: Der »rivers of text«-Effect, Helen Irlen (2002)
  • Stellen Sie sicher, dass eine sequentielle Präsentation genügend Zeit einräumt, damit ihr auch ein langsamer Leser folgen kann, der unter Umständen jedes Wort getrennt decodieren muss.
  • Fahren Sie mit einer Präsentation so lange nicht fort, bis der Benutzer dazu bereit ist; geben Sie dem Benutzer die Kontrolle über den Fortschritt.
  • Ermöglichen Sie es dem Benutzer immer zurück zu gehen und Informationen erneut zu lesen.

Bedenken Sie, dass Farbe eine sehr individuelle Wahl ist; was für die eine Person gut funktioniert, kann unter Umständen für die andere Person nicht funktionieren.

Probleme beim Design der Seiten

»Layouts sollten so entworfen werden, dass sie die kognitive Belastung, die mit räumlicher Visualisierung und Auge-Hand-Koordination in Verbindung steht, reduziert. Designer sollten Ihre Bemühungen darauf konzentrieren Interfaces zu erstellen, die Informationen nach Funktion korrekt gruppieren« (Dodson & Shields, 1978).

»Designer sollten die gesamte Informationsdichte auf weniger als 50 % des Bildschirmbereiches reduzieren« (Horton, 1989). Es ist hilfreich einen ausreichenden Leerraum zur Verfügung zu stellen, um den Leser von einem zum nächsten Punkt zu führen und um genügend Zeit zu geben, damit das Material aufgenommen werden kann.

»Wenn eine Seite geladen wird, dann konzentrieren sich die Benutzer auf den Mittelpunkt des Fensters wo sie den Textkörper lesen bevor sie sich die Mühe machen, Überschriftenleisten oder Navigationselemente anzusehen« (Morkes & Nielsen, 1997). Dies impliziert, dass die visuelle Darstellung von Navigationsmechanismen deutlich vom Textkörper hervorstehen sollte. Dies kann erreicht werden, indem man eine Kombination von gruppiertem Layout, Farbe, Größe und Unterstreichung von Hyperlinks benutzt.

»Schüler und Studenten benutzten Elemente (Icons) als ersten Hinweis, um Kursinhalte zu identifizieren, haben aber begleitende Textlinks benutzt, um sich diese Inhalt zu verdeutlichen« (Blankfield, et al, 2002).

Benutzen Sie Grafiken, Bilder und Fotos um Text aufzulockern, aber beachten Sie, dass Grafiken immer eine Relevanz zum Material haben und nicht vom Inhalt ablenken sollten. Denken Sie daran, dass Grafiken und Tabellen eine lange Downloadzeit haben können.

Warum ist das Drucken wichtig?

Webseiten sollten Idealerweise selber drucker-freundlich sein oder aber drucker-freundliche Dokumente anbieten. Benutzer mit Dyslexie können eine langsame Lesegeschwindigkeit haben und daher eine längere Zeit als normal benötigen, um große Mengen an Text zu lesen. Indem Sie druckbare Alternativen einer Webseite anbieten können Benutzer diese Offline in ihrer eigenen Geschwindigkeit lesen. Schüler und Studenten finden es häufig leichter, von einer gedruckten Seite zu lernen, was an dem kinästhetischen Lerneffekt, eine Seite in der Hand zu halten, liegt. Tatsächlich zeigen zahlreiche Forschungsstudien dass Text, der auf dem Bildschirm Korrektur gelesen wurde, dazu tendiert, abzuschweifen, unfokussiert, schwatzhaftiger und weniger prägnant zu sein. (Tate, 2000).

Da Monitore selbst Licht emittieren, Papier jedoch nur reflektiert, kann wegen des geringeren Kontrastes für einige Benutzer mit Licht- bzw. Blendempfindlichkeit leichter sein, vom Papier zu lesen. Dies ermöglicht es ihnen außerdem, eine Kopie für späteres Nachschlagen zu behalten und fördert das Aufzeichnen von Anmerkungen und auch von grafischen Notizen. Diese Lernstrategie wurde von vielen der Schüler und Studenten aus der Edge Hill-Studie übernommen (Blankfield, Davey und Sackville, 2002).

Web-Entwickler können ein Cascading Style Sheet (CSS) benutzen, um den Code für die Darstellung einer Seite vom eigentlichen Inhalt zu trennen. Dies bedeutet, dass ein separates CSS für die Bildschirmdarstellung und ein weiteres CSS für die Druckausgabe erstellt werden kann, ohne das damit der Inhalt und Aufwand dupliziert wird. Ein Web-Entwickler könnte stattdessen auch eine separate druck-freundliche Version jeder Seite zur Verfügung stellen, obwohl dies oft mehr Arbeit macht.

Bedenken Sie die Spaltenbreite

  • Die Breite der zu lesenden Zeilen kann einen großen Einfluss auf die Lesbarkeit haben, sowohl in Bezug auf das Verständnis als auch auf den Komfort des Benutzers.
  • Benutzen Sie ein flexibles Design, so dass Spaltenbreiten durch das Anpassen der Browserfenstergröße des Benutzers in der Größe verändert werden können. (Dies wird erreicht, indem man relative Einheiten wie Prozent für die Breite von Spalten benutzt.)
  • Horizontales Scrollen sollte strikt vermieden werden.

Visuelle Barrierefreiheit von Text

Zeichensätze sollten:

  • Einfach zu lesen sein,
  • klar definierte Buchstabenformen haben,
  • ausreichende Abstände zwischen Buchstabenkombinationen haben.

Bedenken Sie, dass Zeichensätze mit ungewöhnlich geformten Lettern, Schreibschriften und neuartige Zeichensätze schwer zu lesen sein können.

Die folgenden vier Zeichensätze wurden für das Lesen vom Bildschirm entworfen oder sind vom Bildschirm einfacher als andere zu lesen:

Bildschirmfoto von Beispieltext in den Zeichensätzen Verdana, Georgia, Tahoma und Trebuchet MS
  • Benutzen sie Serifenlose Schriften wie Arial (Helvetica) oder Comic Sans. Andere Vorschläge beinhalten Verdana, Georgia, Tahoma und Trebuchet MS.
  • Benutzen Sie für gedruckte Dokumente mindestens Textgröße 12pt oder 14pt.

Es ist allerdings allgemein bekannt, dass die Comic Sans nicht als professioneller Zeichensatz angesehen wird, noch ist er Cross-Platform kompatibel – aber Fachleute im Bereich der Unterstützung von Dyslexie haben herausgefunden, dass Schüler und Studenten dies als einen sehr lesbaren Zeichensatz empfinden.

Weitere Informationen über die Lesbarkeit von Zeichensätzen: http://mcu.org.uk/articles/accessibletext.html.

Vermeiden Sie Unterstreichungen außer bei Hyperlinks

Unterstreichen Sie keine großen Textblöcke, da dies das Lesen erschwert. Eine Unterstreichung markiert üblicherweise verlinkten Text und es kann für Benutzer verwirrend sein, wenn sich dort kein Link befindet.

Auf der anderen Seite sollten Sie Hyperlinks im Fließtext immer unterstreichen, da Benutzer es erwarten in der Lage zu sein, verlinkten Text oder Bilder zu erkennen.

Benutzen Sie keinen blinkenden oder sich bewegenden Text

Stellen Sie sicher, dass Ihre Seite keine blinkenden Text-Tags oder scrollenden Text (Ticker) benutzt, da dies sehr schwer zu lesen ist und den Benutzer vom wichtigen Inhalt ablenken kann. Sich bewegender Text schafft Probleme für Menschen mit visuellen Problemen. Er bereitet auch Schwierigkeiten für manche Vorleseprogramme.

Vermeiden Sie die Benutzung von Text in Großbuchstaben

Text in Großbuchstaben ist schwieriger zu lesen als normal geschriebener Text. Ein oder zwei Worte, die in Großbuchstaben gesetzt werden, sollten nicht allzu große Schwierigkeiten machen. Da sie größer sind können Großbuchstaben einfacher zu erkennen sein als klein geschriebene Buchstaben; sie könnten also für Beschriftungen geeignet sein. Schreiben Sie aber keine kompletten Sätze in Großbuchstaben, da dies visuell ablenkend und lästig für den Leser sein kann. Es erscheint als würden Sie SCHREIEN!

Halten Sie sich an linksbündigen Text im Flattersatz

Text im Blocksatz führt zu ungleichen Wortzwischenräumen, was bei manchen Menschen mit Dyslexie zu den so genannten ‘rivers of white space’ führen kann (siehe dazu Abbildung 1).

  • Begrenzen Sie Zeilen in Textverarbeitungsdokumenten auf 60-70 Zeichen und bedenken Sie bei Webseiten die durchschnittliche Spalten- oder Tabellenbreite. Zeilen, die zu lang oder zu kurz sind können aufgrund der erhöhten physischen Bewegung die Augen stark ermüden.
  • Benutzen Sie ausreichende Abstände zwischen Absätzen, um den Text aufzuteilen.
  • Benutzen Sie Überschriften und breite Seitenränder.
  • Benutzen Sie Kästen zur Betonung oder um wichtigen Text zu markieren.
  • Vermeiden Sie dichte Textblöcke, indem Sie kurze Absätze benutzen.
  • Benutzen Sie, wenn es passend ist, Listenzeichen oder Zahlen statt durchgängigem Text.
  • Trennen Sie keine Wörter, die normalerweise nicht getrennt werden, um Zeilenenden aufzufüllen, z. B. "aufpas-sen".
  • Der Zwischenraum zwischen den Zeilen ist wichtig. Die Forschung empfiehlt einen einen 1,5 bis 2-fachen Zeilenabstand zu Beginn eines Absatzes.

(nach X04Frendly, BDA, 2000)

Kontrolle des Benutzers über die Darstellung

Es ist wichtig zu überprüfen, ob sich Benutzer-Style Sheets über das visuelle Design einer Seite hinwegsetzen können.

Einige dyslektische Schüler und Studenten haben ihren PC in einigen Grundeinstellungen individuell angepasst, üblicherweise in den folgenden:

  • Änderung der Hintergrundfarben,
  • Änderung der Textfarben,
  • Vergrößerung von Text (innerhalb eines Browsers und im Betriebssystem).

(Entnommen aus: Edge Hill Study, Blankfield et al., 2002)

Das folgende Beispiel zwingt des Hintergrund einer Webseite zu einem blassen Cremeton und den Standardtext zu schwarz.

  1. body {
  2. background : #ffffcc !important;
  3. color : #000000 !important;
  4. }

Weitere Informationen finden Sie unter: http://www.techdis.ac.uk/seven/wizards/.