XHTMLforum - Pflichtfelder barrierefrei markieren

XHTMLforum (http://xhtmlforum.de/index.php)

- Barrierefreiheit (http://xhtmlforum.de/forumdisplay.php?f=78)

- - Pflichtfelder barrierefrei markieren (http://xhtmlforum.de/showthread.php?t=40372)

Pflichtfelder barrierefrei markieren

Hallo zusammen!

Ich bin gerade am Überlegen, wie ich bei einem Formular Pflichtfelder optimal (=barrierefrei/-arm) markieren kann.

Sehr gut gefällt mir persönlich - auch wenn das nicht barrierefrei ist - wenn nicht ausgefüllte Pflichtfelder nach Abschicken des Formulars einen z.B. roten Hintergrund haben. Dass das alleine nicht ausreicht ist mir klar.

Häufig sieht man hinter Pflichtfeldern ein *), das weiter unten näher erläutert wird:
*) Pflichtfeld

Das würde ich aber auch nicht als barrierefrei bezeichnen.
Jedesmal hinter oder vor einem Pflichtfeld 'Pflichtfeld' zu schreiben scheint mir die sinnvollste, wenn auch nicht schönste Lösung zu sein. Dazu natürlich die Hintergrundfarbe ;)

Was würdet ihr empfehlen?
Wie macht ihr das?
Habt ihr gute Beispiele?

Gruß, X

Ich würde das Formular mit einem kurzen Einführungstext versehen, indem auch die unbedingt benötigten Informationen aufgezählt werden.

Zitat:

Zitat von Xavier

Jedesmal hinter oder vor einem Pflichtfeld 'Pflichtfeld' zu schreiben scheint mir die sinnvollste... Lösung zu sein

Kann ich nur bestätigen!

Da ich bei meiner Seite sehr viele Nachrichten übers Kontaktformular erhalte, gebe ich jede Hilfestellung so offensichtlich wie möglich (für alle)!

Sollte sich der Hinweis nicht vor dem entsprechenden Formularfeld befinden? Ansonsten muss der Benutzer ja ständig zurückspringen.

Ich machs als Textzusatz bei <label>:

Code:

<label for"name">Name: (Pflichtangabe)</label>

Ich hab das über <fieldset> gelöst:

Code:

<fieldset>

    <legend>Pflichtangaben</legend>

    <!-- -->

</fieldset>

<fieldset>

    <legend>Freiwillige Angaben</legend>

    <!-- -->

</fieldset>

Konkret sieht das ganze mit diesem Code

Code:

<fieldset>

    <legend>Pflichtangaben</legend>

    <dl>

        <dt><label for="Nickname">Nickname: </label></dt>

            <dd><input name="Nickname" id="Nickname" maxlength="16" type="text"></dd>

        <dt><label for="Email">E-Mail: </label></dt>

            <dd><input name="Email" id="Email" maxlength="25" type="text"></dd>

        <dt><label for="Passwort">Passwort: </label></dt>

            <dd><input name="Passwort" id="Passwort" type="password"></dd>

        <dt><label for="cPasswort">Passwort bestätigen: </label></dt>

            <dd><input name="cPasswort" id="cPasswort" type="password"></dd>

    </dl>

</fieldset>

<fieldset>

    <legend>Optionale Angaben</legend>

    <dl>

        <dt><label for="IRC"><abbr title="Internet Relay Chat">IRC</abbr>-Channel</label></dt>

            <dd><input name="IRC" id="IRC" maxlength="35" type="text"></dd>

        <dt><label for="ICQ"><abbr title="I seek you - Chatprogramm">ICQ</abbr>-Nummer</label></dt>

            <dd><input name="ICQ" id="ICQ" maxlength="9" type="text"></dd>

        <dt><label for="MSN">MSN:</label></dt>

            <dd><input name="MSN" id="MSN" maxlength="35" type="text"></dd>

        <dt><label for="AIM"><abbr title="AOL Instant Messenger">AIM</abbr>:</label></dt>

            <dd><input name="AIM" id="AIM" maxlength="35" type="text"></dd>

        <dt><label for="YIM"><abbr title="Yahoo Instant Messenger">YIM</abbr></label></dt>

            <dd><input name="YIM" id="YIM" maxlength="35" type="text"></dd>

        <dt><label for="Homepage">Webseite</label></dt>

            <dd>http://<input name="Homepage" id="Homepage" maxlength="50" type="text"></dd>

    </dl>

</fieldset>

aus, wie im Anhang zu sehen.

Eine weitere Möglichkeit wäre auch folgendes:

Code:

<label for"name" class="important">Name: <span>(Pflichtangabe)</span></label>

Dann kann man via CSS den Hintergrund rot unterlegen und (Pflichtangabe) für die grafischen Browser einfach verschwinden lassen. mit:

Code:

.important:before { content: "*)"; }

muss man auch nicht auf die Sterne verzichten. Fände ich ideal für schlanke Formulare, wie z.B. einem Kontaktformular, bei dem einige unrelevante Felder existieren. Oder halt wie im vorherigen Beispiel ein kleines Registrierungsformular.

cheers
Pudding im Kühlschrank

Ich fürchte, dass vor allem unerfahrene Nutzer ein Sternchen vor den Feldern leicht übersehen und das Formular falsch ausfüllen werden. Und sehr viele Nutzer brechen ein Formular bereits nach der ersten Fehlermeldung ab.

Auch deshalb mein Hinweis mit der Auszeichung direkt "am Label"!

Hallo,

ich habe ein Kontaktformular mit nur 3 Feldern, welche allerdings alle Pflichtfelder sind. Reicht es da, vorher einen Hinweis zu geben, dass alle Felder pflicht sind, oder soll man hinter jedes Feld eine entsprechende Markierung setzen?

Reicht natürlich vollkommen, genauso wie es Sterne tun.