XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Barrierefreiheit (http://xhtmlforum.de/forumdisplay.php?f=78)
-   -   Pflichtfelder barrierefrei markieren (http://xhtmlforum.de/showthread.php?t=40372)

Xavier 16.06.2006 16:46

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

Geronimo 16.06.2006 20:08

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

Dieter 16.06.2006 22:08

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)!

Geronimo 16.06.2006 22:10

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

Dieter 16.06.2006 22:14

Ich machs als Textzusatz bei <label>:
Code:

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

Achereto 17.06.2006 06:07

Liste der Anhänge anzeigen (Anzahl: 1)
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.

Pudding 17.06.2006 11:13

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

Dieter 18.06.2006 12:41

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"!

ONeill 18.06.2006 18:30

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?

i-fekt 18.06.2006 18:53

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


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:44 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2021, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020