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

Beispiel

Das nachfolgende Beispiel erzeugt ein Formular, dass in drei Bereiche unterteilt ist: Die Daten des Absenders, die Nachricht sowie die Schaltfläche zum Absenden. Die Eingabefelder werden durch JavaScript-Anweisungen mit Beispieldaten gefüllt, um dem Nutzer die Eingabe zu erleichtern. Erhält ein Eingabefeld den Fokus, werden die Beispieldaten entfernt.

  • Beispielquelltext:

    <form action="..." method="get" enctype="text/plain">
    <fieldset>
    <legend>Absender</legend>
    <label for="name">Name (Pflichtfeld):</label>
    <input type="text" id="name" name="name" value="Ihr Name"
    onblur="if(this.value=='')this.value='Ihr Name';" onfocus="if(this.value=='Ihr Name')this.value='';" />

    <label for="telefon">Telefon:</label>
    <input type="text" id="telefon" name="telefon" value="Ihre Telefonnummer"
    onblur="if(this.value=='')this.value='Ihre Telefonnummer';" onfocus="if(this.value=='Ihre Telefonnummer')this.value='';" />

    <label for="email">E-Mail (Pflichtfeld):</label>
    <input type="text" id="email" name="email" value="Ihre E-Mail"
    onblur="if(this.value=='')this.value='Ihre E-Mail';" onfocus="if(this.value=='Ihre E-Mail')this.value='';" />

    </fieldset>
    <fieldset>
    <legend>Nachricht</legend>
    <label for="betreff">Betreff:</label>
    <input type="text" id="betreff" name="betreff" value="Betreffszeile"
    onfocus="if(this.value=='Betreffszeile')this.value='';" />

    <label for="anliegen">Ihr Anliegen (Pflichtfeld):</label>
    <textarea rows="10" cols="35" id="anliegen" name="anliegen"></textarea>
    </fieldset>
    <p><label for="absenden">Freigabe:</label>
    <input type="submit" id="absenden" name="absenden" value="Formulardaten absenden" /></p>
    </form>

  • Screenshot des Beispiels:

    Screenshot einer Beispiel-Webseite mit Formular.

Überprüfung

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

    Es steht keine entsprechende Funktion zur Verfügung.

  • Überprüfung per Web Developer:

    Über "Formulare » Formulardetails einblenden" können Sie sich alle Formularfelder mit den im Quelltext hinterlegten Informationen anzeigen lassen. Über "Formulare » Formularinformationen anzeigen" wird in einem neuen Fenster eine tabellarische Darstellung verfügbarer Formularinformationen angezeigt. Hier werden dann auch Beschriftungen mit ausgegeben.

    Web Developer: Formulardetails einblenden Web Developer: Formularinformationen anzeigen

0.6.x Glossar zu dieser Seite

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.

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