Knowledgebase:Barrierefreie Webseiten

From Cloudrexx Development Wiki
Jump to: navigation, search

Was sind barrierefreie Websites?

Das sind Seiten, die für alle Internet-Benutzerinnen und -Benutzer zugänglich sind, d.h. gelesen und interpretiert werden können. Mit allen sind auch die Benutzerinnen und Benutzer einbezogen, die nicht in der üblichen Weise die Information am Bildschirm lesen und die Navigation mit der Maus steuern können. Das sind Menschen mit verschiedenartigen Behinderungen (Sehbehinderung, motorische Behinderung, Lernbehinderung) oder auch solche, die über ältere Hardware verfügen, die nicht alle multimedialen Effekte unterstützt. Die Zugänglichkeit von Web-Seiten ist gerade für Menschen mit Behinderung sehr wichtig, denn das enorme Informationsangebot auf dem Web bringt ihnen ein erhöhtes Mass an Selbstständigkeit. (Text von: http://www.zugang-fuer-alle.ch/de/barrierefrei.html)


Grundlagen

1999 veröffentlichte das World Wide Web Consortium (W3C) die Web Content Accessibility Guidelines 1.0 (WCAG1). Die WCAG1 wurden von der Web Accessibility Initiative (WAI) des W3C erarbeitet und werden deshalb auch als WAI-Richtlinien bezeichnet. Die Richtlinien enthalten umfangreiche Empfehlungen (in englischer Sprache) für das Gestalten von Internetseiten und bilden die Basis aller Vorlagen für barrierefreies Internet. Das Befolgen der Richtlinien fördert die Zugänglichkeit der Internetseite und stellt allen Nutzern unabhängig von Zugangsort und Zugangsart äquivalente Inhalte zur Verfügung.


Einige wichtige Regeln für Barrierefreie Webseiten

Bei der Erstellung von behindertengerechten Webseiten, gibt es einige Punkte die besonders wichtig sind.

Sprache: In den Metainformationen eines HTML Dokumentes, muss man die Sprache der Website angeben. Somit wird der Zugriff erleichtert.

Überschriften: Es sollte darauf geachtet werden, das man die vorgegebenen Auszeichnungsmöglichkeiten von HTML verwendet. Für Überschriften sollte man die Standard-Tags < h1 > bis < h6 > verwenden. So wird der Text eindeutig strukturiert.

Textauszeichnungen: Bei Testauszeichungen bzw. Formatierung sollte man die Tags < strong > sowie < em > verwenden, anstelle von < b > oder < i > Tags. Screenreader erkennen die beiden Elemente < strong > und < em > und betonen diese Zeilen anders.

Hyperlinks: Bei der Verwendung von Textlinks, sollten zwischen den Links Sonderzeichen stehen. Somit werden die Links voneinander abgegrenzt. (Beispiel: Home | Über uns | Links | Kontakt) Zudem sollten Texlinks mit dem Attribut "title" benannt werden, wohin das der Link den Besucher der Webseite führt.

Struktur der Webseite: Mit Hilfe der < div > Tags sollte man der Website eine Struktur verleihen, damit ein Verständniss für die Inhalte der Seite entsteht.

Tabellen: Auf Tabellen sollte man grundsätzlich verzichten, vor allem sollten keine Websites mit Tabellen Layout erstellt werden. Gerade Leseprogramme haben oftmals Schwierigkeiten bei Websites mit komplexen bzw. verschachtelten Tabellen. Wenn auf Tabellen nicht verzichtet werden kann, sollte man die Tags wie < thead > oder auch < tfoot > einsetzen. Damit erhält die Tabelle eine logische Struktur. Zudem sollte man das summary Attribut verwenden. Damit wird der Inhalt zusammengefasst. Wie schon erwähnt, sollte man aber auf Tabellen verzichten. Screen-Layouts sollten mit Cascading Stylesheets (CSS) erstellt werden.

Formulare: Auch bei Formularen muss einiges beachtet werden, damit auch Menschen mit einer Behinderung, Zugang dazu haben. Gerade neue HTML 4 Spezifikationen helfen hierbei. Mit < fieldset > kann man Elemente zu Gruppen zusammenfassen. Mit den Tags < label > oder auch < legend > werden die Eingabefelder beim Formular bezeichnet.

Farben: Auch beim Einsatz von Farben muss man auf einiges Rücksicht nehmen. Gerade Menschen mit einer Farbenblindheit, mit Schwarz-Weiss Monitor, können Probleme haben. Deshalb sollte man gerade Die Farbe Rot und Grün nicht verwenden, da solche Nutzer gerade diese Farben nicht unterscheiden können. Zudem sollte beim Einsatz von Farben auf genügend Kontrast bei der Farbe geachtet werden.

Grafiken/Bilder: Bilder bzw. Grafiken sollte man immer mit dem ALT-Tag kennzeichnen. Hierbei sollte darauf geachtet werden, dass im ALT ein aussagekräftiger Text steht. Auf keine Fälle sollte man den Bildnamen im ALT-Tag schreiben, da dieser meistens nicht aussagekräftig ist. Weitere hat man die Möglichkeit das longdesc Attribut zu verwenden. Hiermit kann man auf eine zusätzliche Seite verweisen, wo ein alternativ Text zum Bild steht. Wenn ein Browser das Bild bzw. die Grafik nicht anzeigen kann, zeigt er anstelle des Bildes/Grafik den longdesc Link (Beispiel: < img scr="bild.jpg" alt="Lesen Sie mehr über den Autor dieser Webseite" longdesc="autor.html" >).

Javascript & Flash: Flash Animationen und Javascript sollten man bei behindertengerechten Websites nicht einsetzen, oder aber auch Alternativen anbieten, dass heisst, Websites mit Flash und Websites ohne Animationen und Javacript.

Frames: Auf Frames sollte man immer verzichten. Sie erschweren die Navigation und Zugänglichkeit der Site bei Menschen mit einer Behinderung.

Pop-up Fenster: Pop-up Fenster (Fenster, welche sich automatisch öffnen) sind unbeliebt. Menschen mit einer Behinderung, im speziellem, blinde Menschen, werden durch Pop-ups verwirrt.

Tastatur: Da Menschen mit einer Behinderung, nur selten eine Maus verwenden, sollte man nicht vergessen, Formulare, Buttons usw. zu kennzeichnen, damit man diese mit der Tastatur steuern kann. Dazu kann man das < accesskey > Tag verwenden. Hiermit lassen sich bestimmte Kombinationen auf der Tastatur festlegen.

Wichtige Links

Tools