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.5 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.

Strukturieren Sie Texte durch Überschriften-Ebenen und verwenden Sie Teaser (kurze Einführung in das nachfolgende Thema) bei langen Dokumenten.

Bei Größenangaben sollten Sie relative (em, %) statt absolute Angaben (cm, px) verwenden. So ist es dem Nutzer möglich, die Schriftgrößen seinen Bedürfnissen anzupassen.

Sprungziele in dieser Seite:


Beispiel

Beispielquelltext:

<!-- Angaben von 1 bis 6 sind hier möglich, um verschiedene Überschriftenebenen zu kennzeichnen. -->
<h1>Überschrift erster Ebene</h1>
<!-- Unter-Überschrift -->
<h2>Überschrift zweiter Ebene</h2>
<!-- Absatz -->
<p>Nun folgt ein Absatz. Hier kann noch viel mehr stehen.</p>
<!-- Ungeordnete Liste -->
<ul>
<li>Punkt 1 in einer ungeordneten Liste</li>
<li>Punkt 2 in einer ungeordneten Liste</li>
</ul>
<!-- Geordnete Liste -->
<ol>
<li>Punkt 1 in einer geordneten Liste</li>
<li>Punkt 2 in einer geordneten Liste</li>
</ol>
<!-- Zitat und Quellenangabe -->
<q>Ein Zitat im q-Element</q>
<blockquote>Ein Zitat im blockquote-Element</blockquote>
<cite>www.c2web.de: Eine Quellenangabe im cite-Element muß ein URI[40] sein.</cite>

Screenshot des Beispiels:

Screenshot einer Beispiel-Webseite mit Überschriften, Absätzen, Listen und Zitaten.

Überprüfung der Struktur

Überprüfung der Struktur per WAT[46] -Toolbar:

Über "Struktur" können Sie sich verschiedene Elemente zur Seitenstrukturierung anzeigen lassen, beispielsweise Überschriften, Listenelemente, Felder/Beschriftungen und Akronyme/Abkürzungen.

WAT-Toolbar: Elemente zur Seitenstrukturierung anzeigen

Überprüfung der Struktur per Web Developer:

Über "Hervorheben" können Sie sich Frames, Überschriften, alle Blockelemente, Tabellen und Verweise anzeigen lassen.

Web Developer: Elemente zur Seitenstrukturierung anzeigen

Überprüfung der Skalierbarkeit

Skalierbarkeit mit WAT[46] -Toolbar (Internet Explorer) überprüfen:

Über "Optionen / Textgröße" können Sie verschieden große Basisschriftarten einstellen - und sollten dann auf der zu prüfenden Seite entsprechende Veränderungen erkennen können.

Je nachdem, ob Sie den Text "Optionen" oder den kleinen Pfeil daneben anklicken, bietet sich Ihnen eines der beiden folgenden Bilder:

Schriftgröße ändern mit WAT-Toolbar (als Menü)
oder
Schriftgröße ändern mit WAT-Toolbar (als Popup)

Skalierbarkeit mit Firefox überprüfen (mit und ohne Web Developer):

Mit der Tastenkombination "Strg" + "+" beziehungsweise "Strg" + "-" können Sie in Firefox die Schriftgröße fast beliebig vergrößern beziehungsweise verkleinern. Alternativ läßt sich natürlich auch das Menü "Ansicht / Schriftgrad" verwenden.

0.6.x Glossar zu dieser Seite

14 CSS
Cascading Style Sheet
40 URI
Uniform Resource Identifier (streng übersetzt aus dem Englischen etwa einheitlicher Bezeichner für Ressourcen ): Eine Zeichenfolge, die zur Identifizierung einer abstrakten oder physischen Ressource dient. Im Web wird als identifizierte Ressource oft eine URL unterstellt, aber auch Dateien, Bücher oder Zeitschriften sind gültige Ressourcen und können identifiziert werden - bei Büchern zum Beispiel durch eine ISBN .
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