Barrierefreie Websites und ergonomische Softwaregestaltung

Grafische Darstellung in mehreren Einzelteilen: Ein gesunder Volleyballspieler und ein Behinderter spielen gemeinsam mit der Erdkugel als Ball, der beim Betrachten aller Seiten des Angebots von einem zum anderen wandert. Unter dem fliegenden Ball befindet sich der Schriftzug WWW als Hinweis, daß die Erdkugel hier mit dem Internet assoziiert wird.

Volleyballspieler, aufrecht (Teil 1 von 3). Behinderter Volleyballspieler, im Rollstuhl (Teil 2 von 3). Die Erdkugel als *Volleyball*: Eine für alle. (Teil 3 von 3).

3.3 Prüfprozedur nach BITV[9] 2.0

Auf den nachfolgenden Seiten möchten wir Ihnen zeigen, wie Ihre Webseiten barriere-ärmer gestaltet werden können. Wir werden versuchen, die Problematiken anhand zahlreicher Beispiele zu erklären.

Zusätzlich stellen wir Ihnen zwei Werkzeuge vor, die Ihnen helfen werden, die Anforderungen der BITV[9] 2.0 auf Ihren eigenen Seiten zu überprüfen:

  • WAT[46] -Toolbar für Internet Explorer

    Bildschirmfoto der WAT-Toolbar; Eine Bildbeschreibung finden Sie im unmittelbar folgenden Text. Die WAT[46] -Toolbar ist als separate Leiste in den Internet Explorer integriert und bietet folgende Karteireiter: WAT[46] , Test, Fenster, CSS[14] Werkzeuge, Bilder, Farben, Struktur, Tabellen, Frames, Seite, Quelltext, Optionen, Protokoll, Firefox, Opera.

  • Entwickler Tools für Internet Explorer

    Aktuelle Versionen des Microsoft Internet Explorer haben sogenannte "Entwickler Tools" bereits von Haus aus integriert. Die Entwickler Tools lassen sich per Menü oder mit der Funktionstaste "F12" für die jeweils aktuelle Seite starten.

  • Web Developer beziehungsweise Firebug für Mozilla Firefox

    Der Web Developer beziehungsweise Firebug ist auf zwei verschiedene Arten in Mozilla Firefox integriert (bitte klicken Sie auf die beiden Vorschaubilder, um eine größere Version zu sehen):

    • ...als separate Leiste (ähnlich der WAT[46] -Toolbar)

      Bildschirmfoto vom Webdeveloper als extra Leiste; Eine Bildbeschreibung finden Sie im unmittelbar folgenden Text. Der Web Developer in Firefox als separate Leiste: Alle Hauptkategorien jederzeit vollständig vor Augen.

    • ...als Kontextmenü

      Bildschirmfoto vom Webdeveloper als Kontext Menü; Eine Bildbeschreibung finden Sie im unmittelbar folgenden Text. Der Web Developer in Firefox als Kontextmenü: Über die rechte Maustaste ist der Web Developer ständig verfügbar — ohne Platz für eine permanent sichtbare extra Leiste im Browser zu beanspruchen.

    Unabhängig von der Integrationsart bieten Web Developer beziehungsweise Firebug folgende Funktions-Kategorien (a la Karteireiter): Deaktivieren (Disable), Cookies, CSS[14] , Formulare, Grafiken (Images), Information, Verschiedenes (Miscellaneous), Hervorheben (Outline), Größe (Resize), Extras (Tools), Quelltext (View Source), Optionen. Die drei Symbole am rechten Rand zeigen an, in welchem Modus sich der Browser befindet und ob CSS[14] - beziehungsweise Javascript-Fehler auf der aktuell geladenen Seite gefunden wurden.


Beide Werkzeuge werden in den folgenden Artikeln näher erklärt und können von diesem Internetangebot heruntergeladen werden: Download::Werkzeuge.

Gebärdensprache

Unsere gewohnte Lautsprache  —auch in schriftlicher Form—  ist für gehörlose Menschen bestenfalls eine Fremdsprache. Sprechen Sie diese Menschen in ihrer Muttersprache an: Mit Filmen in Gebärdensprache.

Weiterlesen … Gebärdensprache

Leichte Sprache

Unsere gewohnte Sprache  —mit abwechslungsreichem Wortschatz, durchsetzt mit Fach- und Fremdsprachen und vielleicht noch poetisch oder sonst irgendwie „anspruchsvoll“ formuliert—  ist für Menschen mit kognitiven Behinderungen in der Regel nicht zugänglich. Sprechen Sie diese Menschen in „Leichter Sprache“ an.

Weiterlesen … Leichte Sprache

Nicht-Text-Inhalte

Bilder sind für nichtsehende Nutzer kein Gewinn. Es sei denn, Sie übermitteln auch dieser Nutzergruppe entsprechende Informationen: Eine Beschreibung des Bildinhaltes.

Weiterlesen … Nicht-Text-Inhalte

Kontrast und Textgröße

Gerade für ältere Menschen sind neben ausreichender Textgröße starke Kontraste wichtig zur Unterscheidung zwischen Vordergrund und Hintergrund. Farbliche Hervorhebungen von Textstellen sollten zusätzlich aus dem Kontext oder über die Verwendung entsprechender Zusatzauszeichnungen ersichtlich sein. Hierfür stehen Ihnen unter anderem Überschriften, Absätze und Fettschrift zur Verfügung.

Weiterlesen … Kontrast und Textgröße

Markup-Sprachen und Style-Sheet-Dateien

Trennen Sie Inhalt (XHTML) und Layout (CSS) und erstellen Sie valide Dokumente. Über CSS[14] können Sie alle erdenklichen Formatzuweisungen vornehmen. Um Informationen zu übermitteln, stehen unter anderem Überschriften, Absätze, Listen, Zitate und Quellenangaben zur Verfügung. Diese sollten Sie entsprechend Ihrer Funktionalität einsetzen.

Weiterlesen … Markup-Sprachen und Style-Sheet-Dateien

Sprache

Screenreader erkennen nicht ohne Weiteres, in welcher Sprache ein Text verfasst ist. Hinterlegen Sie daher die Hauptsprache Ihres Dokumentes im Markup durch die dafür vorgesehenen Attribute. Wechseln Sie die Sprache innerhalb des Textverlaufes, so kennzeichnen Sie dies in analoger Weise.

Weiterlesen … Sprache

Tabellen

Tabellen dienen ausschließlich zur Darstellung tabellarischer Daten. Benutzen Sie Tabellen nicht für die Text- und Bildgestaltung, also zu Layout-Zwecken, denn dadurch geht in vielen Fällen die Struktur des Dokumentes für elektronische Hilfsmittel wie zum Beispiel Screenreader verloren — vom aufgeblähten Quelltext einmal ganz abgesehen.

Weiterlesen … Tabellen

Technologie

Dokumente müssen auch ohne CSS[14] oder beispielsweise JavaScript nutzbar sein. Funktionalitäten, die durch JavaScript oder programmierte Objekte zur Verfügung gestellt werden, müssen auch bei Abschaltung zugänglich sein. Programmierte Elemente müssen direkt zugänglich oder kompatibel mit assistiven Technologien sein (Braillezeile, Screenreader, Bildschirmvergrößerung).

Weiterlesen … Technologie

Tastaturbedienung

Nicht jeder Nutzer kann und will immer die Maus nutzen. Machen Sie deshalb eine Navigation über die Tastatur möglich. Sorgen Sie für eine sinnvolle Tabulatorreihenfolge und stellen Sie Tastaturkurzbefehle bereit, mit denen wichtige Inhalte schnell und direkt erreicht werden können.

Weiterlesen … Tastaturbedienung

Verweise

Nutzer fragen sich oft, wohin denn der gerade vorliegende Verweis führen wird. Beschriften Sie daher Verweise eindeutig: externe Verweise, Verweise auf PDF-Dokumente, Datei-interne Verweise, Verweise auf andere Themen. Gruppieren Sie inhaltlich zusammenhängende Verweise.

Weiterlesen … Verweise

Formulare

Beschriftungen erleichtern dem Nutzer die Orientierung. Beschriften Sie daher auch Formular-Kontrollelemente und Eingabefelder. Beschriftungen gehören in die direkte Umgebung des jeweiligen Feldes.

Weiterlesen … Formulare

Frames

Frames werden von manchen Browsern nicht unterstützt, erschweren dem Nutzer die Navigation, führen mitunter zu einem unerwarteten, kontextabhängigen Verhalten der Webseite und sind durch die Verknüpfung einzelner Dateien innerhalb eines einzigen Frameset-Konstruktes unfreundlich zu Suchmaschinen und anderen Programmen, die die Webseite automatisch auslesen. Eigentlich sind Frames daher zu vermeiden. Empfehlenswert ist statt dessen die Realisierung verschiedener Bereiche einer Webseite über sogenannte Container.

Weiterlesen … Frames

Validität

Damit Webseiten in allen Browsern einheitlich dargestellt werden können, müssen sie fehlerfrei sein.

Weiterlesen … Validität

0.6.x Glossar zu dieser Seite

9 BITV
Barrierefreie Informationstechnikverordnung: Rechtliche Grundlage für Behörden und Einrichtungen der Bundesrepublik Deutschland, die barrierefreie Websites vorschreibt und die Anforderungen dazu vorgibt. Die aktuelle Version 2.0 der Verordnung lehnt sich stark an die WCAG 2.0 an, den Text finden Sie online beim Bundesanzeiger Verlag: . BITV gemäß Bundesgesetzblatt Nummer 48 / 2011 (mit freundlicher Genehmigung des Bundesanzeiger Verlags)
13 Cookies
Wörtlich übersetzt Kekse ; Bezeichnung für kleine Datenmengen, die eine Webseite in Ihrem Webbrowser speichern darf. Meist verwendet zur Sitzungsverwaltung oder Konfiguration eines Angebots.
14 CSS
Cascading Style Sheet
46 WAT
Web Accessibility Toolbar : Ein Software-Werkzeug ( Plugin für den Microsoft Internet Explorer) zum Überprüfen einer Webseite auf Zugänglichkeit. Nachfolger der bekannten AIS -Toolbar.
48 XHTML
Extensible Hypertext Markup Language

C2Web - Projektteam | Verwaltungs-Berufsgenossenschaft
Telefon: (07141) 919 372 | E-Mail: christian.richter@vbg.de