Barrierefreies Internet
Aus Wiki2.wda-innsbruck.at
Inhaltsverzeichnis
|
Definition
Barrierefreies Internet bedeutet, dass das Internet von allen Menschen genutzt werden kann, unabhängig von der technischen Ausstattung, den jeweiligen Sicherheitseinstellungen oder physischen Behinderungen. (z.B. Sehbehinderung).
Evaluierungs- und Reperaturwekzeuge
Um eine barrierefreie Website zu gestalten bzw. den Zugangsstatus der Website fachgerecht zu beurteilen gibt es eine große Bandbreite an Hilfsmitteln wie z.B. Simulatoren, Validatoren ect.
Validatoren
Um ein HTML-Dokumet zu Überprüfen, ob es den üblichen Regeln (Aufbau und Struktur) entspricht werden sogenannte "Validatoren" Hilfswerkzeuge benutzt. Es gibt viele veschiedene Arten von Validatoren wie z.B. CSS Validatoren oder Validatoren für XHTML.
Simulatoren
Es gibt viele verschiedene Simulatoren für verschiedene Zwecke. (z.B. Farbblindheitssimulatoren oder Kontrastsimulatoren)
VisCheck
VisCheck ist ein Farbblindheitssimulator. Dieser Simulator macht es möglich uns zu zeigen wie eine Person die farbenblind ist, eine Website wahrnimmt.
Um die barrierefreiheit ihrer Website für Farbenblinde zu überprüfen, machen sie am Besten einen Screenshot ihrer Website,
laden sie den Screenshot unter Run Image hoch, um den Unterschied zu sehen.
weitere Infos unter http://www.vischeck.com/vischeck/
Wichtige Regeln zur Erstellung von barrierefreien Websites
Schriftgrößen
Die Schriftgrößen sollten immer in em Maßen bzw. in Prozent angegeben werden.
Somit vermeidet man die Einstellung von festen Schriftgrößen und ermöglicht den verschiedenen Browsern eine barrierefreie Darstellung.
Bilder
Die verwendeten Bilder sollten immer mit einen sinnvollen bzw. beschreibenden Alternativtext (ALT-Attribut)versehen werden.
Die Bilder die für Layout-/Designzwecke verwendet werden sollten keinen Alternativtext beinhalten, denn die wären für blinde User störend.
Textgrafiken
Textgrafiken sollten vermieden werden. Textgrafiken können nicht wie z.B. Überschriften von Suchmaschinen und Screenreadern erkannt werden.
Wenn sie jedoch doch eine Textgrafik verwenden sollte man folgendes beachten:
- im Alt-Attribut den dargestellten Text verwenden
- nur kurze Texte verwenden
Layoutgrafiken
Immer wieder werden sogenannte Layoutgrafiken in Websites eingebaut, um das Positionieren von Elementen zu vereinfachen.
Die Layoutgrafiken stören jedoch den Textfluss gravierend. Um solche Störungen zu vermeiden gibt es einen einfachen Trick.
Man kann die Layoutgrafiken vor den Screenreadern "verstecken", indem man das Alt-Attribut nicht einfach weglässt sondern frei lässt.
z.B."<img src="pixel.gif" alt="" width="1" height="1">"
Logischer Aufbau/Strucktur
Der richtige Aufbau bzw. die richtige Strucktur eines HTML Dokumentes spielt eine sehr wichtige Rolle, wenn es um Barrierefreiheit geht.
Je genauer und übersichtlicher der Aufbau der verschiedene HTML-Elemente ist, desto leichter ist es für eingeschränkte Nutzer sich in der Website zu orientieren.
Überschriften
Anhand von Überschriften kann man deutlich erkennen wie wichtig ein richtiger Aufbau ist.
Werden die vorgesehenen HTML-Elemente für Überschriften (h1-h6) nicht für Übercshriften verwendet, sondern z.B. durch einfache Texthervorhebungen ersetzt,
kann das für Nutzer von Screenreadern zu Verwirrung führen.
Der Screenreader kann zwischen Überschriften Elementen und "normalen Text" unterscheiden, aber nicht zwischen unterschiedlich formatierten Texten.
Die Überschriftenelemente spielen auch eine sehr wichtige Rolle in der Suchmaschienenoptimierung. Sie diehnen als zusätzliche Schüsselwörter, deswegen ist es auch sehr wichtig die Überschriften eindeutig zu benennen.
p-Elemente
Für eine saubere und übersichtliche Strucktur ist es wichtig, dass man für Textabsätze, die dafür vorhergesehenen p-Elemente benützt.
Durch die Verwendung der p-Elemente werden automatisch in allen Browsern Textabstände erzeugt.
Es werden sehr oft div-Elemente für Textabsätze verwendet, dies sollte man aber vermeiden,denn im Gegensatz zu den p-Elementen werden nicht in jedem Browser automatische Abstände erzeugt.
Aufzählungslisten
Das verwenden von Aufzählungslisten ist ein weiteres Kriterium für die richtige Erstellung einer barrierefreien Website.
Die Hervorhebung der Aufzälungslisten erhöhen die Lesbarkeit und ermöglichen eine schneller Informationsaufnahme.
Der Inhalt der Listen wird von Suchmaschinen
erkannt und und höher gewichtet als der Inhalt in einen Fließtext.
Formulare
Kontrollelemente beschriften!
Die Beschriftung der verschiedenen Elemente (Textfelder, Auswahlboxen,...) ist unbedingt notwendig für den User.
Ohne diese Beschriftung ist es für den User unmöglich zu wissen, was er eingeben soll.
Für die Beschriftung der Felder gibt es das Label-Tag um eine eindeutige Beschriftung zu ermöglichen.
Um den User nicht zu Verwirren ist es wichtig das das "for- und id-Attribut" gleich benannt wird.
Hierzu ein kleines Beispiel:
<label for="vorname">Vorname: </label>
<input type="text" id="vorname">
Veraltete Attribute
Inzwischen gibt es schon einige HTML-Befehle die sehr veraltet sind. Diese veralteten Attribute sollte man bei einen
barrierefreien Webdesign vermeiden.Die veralteten Attribute lassen sich durch Css-Befehle ersetzen und sind somit überflüssig.
ein paar Beispiele:
- bgcolor
- align und valign
- border
- hspace und vspace
Auch zu vermeiden sind die b-,i- und u-Elemente. Sie sind ebenfalls veraltet und durch Css ersetztbar.
Auch für Textbrowser und Screenreader sind diese Elemente sinnlos.
font- und basefont-Elemente
Auch die Elemente font und basefont sind schon veraltet und sollten nicht mehr verwendet werden.
Diese Elemente werden in Css durch das font-family Element ersetzt.
Tabellen
Früher verwendete man Tabellen gerne als Layouthilfen. Sie sollten jedoch nur verwendet werden, wenn man tabellarische Inhalte darstellen möchte
(z.B. Statistiken, Endergebnisse, Vergleiche,...). Das Layout einer Website wird nur noch mit Css erstellt und sollte nicht durch ein Tabellenlayout ersetzt werden.
Farben/Kontrast
Die unterschiedliche Farbgebung von Texten bzw. Wörtern zur Hervorhebung von Text spielt auch eine wichtige Rolle.
Um wichtige Textelemente oder einzelne Wörter hervorzuheben sollte man unterschiedliche Farben verwenden.
Dabei sollte man aber die Lesbarkeit (Kontrast Hintergrund und Textfarbe) des Textes beachten.
Solche Hervorhebungen erleichtern den User die Orientierung auf einer Website um einiges.
Diese verschiedenen Farben sollten immer im Css vergeben werden, um so die Übersichtlichkeit des Codes beizubehalten.
Beispiele
- aktiver Menüpunkt
- verschiedene Links
Bei der Farbauswahl sollte man Kontrastreiche Farben verwenden, denn sie sind auch sehr wichtig für Menschen mit Farbsehstörungen.
Um diese Farbsehstörungen zu simulieren gibt es auch verschiedene Werkzeuge (z.B. Vischeck).
Gute Kontraste
- Schwarz auf Weiß
- Weiß auf Rot
- Blau auf Weiß
- Gelb auf Blau
Hardware für physisch und psychisch eingeschränkte User
Sehbehinderung
Punktschrifttastatur mit Braillezeile
Diese Tastatur ermöglicht Sehbehinderten Usern das Lesen und Schreiben auf einen Computer.
weitere Informationen zur Bediehnung und technischen Funktionen
[[1]]
Graphic Window Professional (GWP)
Diese Hardware ermöglicht Seheingeschränkten Nutzern die Erkennung von grafischen Darstellungen.
Die Grafiken werden dabei in tastbare Bilder umgewandelt, und auf das wesentliche reduziert.
weitere Informationen zur Bediehnung und technischen Funktionen
[[2]]
Screenreader
Ist ein technisches Hilfsmittel (eine Software), das Usern mit einer Sehbeeinträchtigung hilft, sich im Internet fortzubewegen.
Der Screenreader liest den Inhalt einer Website den User vor. Ach Informationen wie Bilder od Links kann der Screenreader erkennen,
wenn sie dementsprechend programmiert wurden.
motorische Behinderung
Kopfmaus
Für Menschen mit eingeschränkter Motorik gibt es spezielle technische Hilfmittel, um ihnen den Umgang mit den Computer zu erleichtern.
Eines dieser Hilfsmittel ist die Kopfmaus.
Die Kopfmaus besteht aus 2 Teilen, einen Sensor der am Kopf oder auf der Brille des Benutzers befästigt wird und einen Empfänger (sieht aus wie eine Webcam),
der am Bildschirm des Computers befästigt wird.
Die drahtlose Verbindung zwischen Sensor und Empfänger ermöglicht es den Benutzer die Computermaus mit den Kopf zu steuern.
Integramaus (Maus mit Mundsteurerung)
Die Integramaus wird mit Hilfe des Mundes gesteuert. Die Maus besteht aus einen Mundstück, das auf ein Steuergerät befästigt ist.
Das Bewegen der Maus wird durch ein leichtes lenken des Mundstückes ermöglicht. Das Klicken der Maustasten wird durch saugen und blasen ersetzt.
Hörbehinderung
Light signaler alerts (optische Signale)
Auch für Hörgeschädigte User gibt es Hilfsmittel. Akustische Signale wie z.B. ein Signalton beim empfangen eines Emails, werden
hier durch optische Signale ersetzt. Statt des typischen Piptons beim empfangen, sieht der User z.B. ein Blinken eins kleinen Lämpchen.
