zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Barrierefreiheit
Seite neu laden Pflichtfelder barrierefrei markieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.06.2006, 16:46
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 18.01.2005
Beiträge: 162
Xavier befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.06.2006, 20:08
Benutzerbild von Geronimo
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.06.2004
Beiträge: 2.641
Geronimo sorgt für eine eindrucksvolle AtmosphäreGeronimo sorgt für eine eindrucksvolle Atmosphäre
Standard

Ich würde das Formular mit einem kurzen Einführungstext versehen, indem auch die unbedingt benötigten Informationen aufgezählt werden.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.06.2006, 22:08
Benutzerbild von Dieter
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 12.09.2003
Beiträge: 3.635
Dieter sorgt für eine eindrucksvolle AtmosphäreDieter sorgt für eine eindrucksvolle Atmosphäre
Standard

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)!
__________________
Informationen aus Koblenz-Metternich
-----------------------------------
"Wissen heißt, Fragen zu erwerben."
Mit Zitat antworten
  #4 (permalink)  
Alt 16.06.2006, 22:10
Benutzerbild von Geronimo
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.06.2004
Beiträge: 2.641
Geronimo sorgt für eine eindrucksvolle AtmosphäreGeronimo sorgt für eine eindrucksvolle Atmosphäre
Standard

Sollte sich der Hinweis nicht vor dem entsprechenden Formularfeld befinden? Ansonsten muss der Benutzer ja ständig zurückspringen.
Mit Zitat antworten
  #5 (permalink)  
Alt 16.06.2006, 22:14
Benutzerbild von Dieter
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 12.09.2003
Beiträge: 3.635
Dieter sorgt für eine eindrucksvolle AtmosphäreDieter sorgt für eine eindrucksvolle Atmosphäre
Standard

Ich machs als Textzusatz bei <label>:
Code:
<label for"name">Name: (Pflichtangabe)</label>
__________________
Informationen aus Koblenz-Metternich
-----------------------------------
"Wissen heißt, Fragen zu erwerben."
Mit Zitat antworten
  #6 (permalink)  
Alt 17.06.2006, 06:07
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 12.01.2006
Beiträge: 152
Achereto befindet sich auf einem aufstrebenden Ast
Standard

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.
Angehängte Grafiken
Dateityp: jpg formular.jpg (38,5 KB, 41x aufgerufen)
__________________
Freiheit.
Mit Zitat antworten
  #7 (permalink)  
Alt 17.06.2006, 11:13
Benutzerbild von Pudding
Benutzer
neuer user
 
Registriert seit: 29.05.2006
Ort: Berlin
Beiträge: 33
Pudding befindet sich auf einem aufstrebenden Ast
Standard

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
__________________
Seit die Mathematiker über die Relativitätstheorie hergefallen sind, verstehe ich sie selbst nicht mehr. Albert Einstein
Mit Zitat antworten
  #8 (permalink)  
Alt 18.06.2006, 12:41
Benutzerbild von Dieter
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 12.09.2003
Beiträge: 3.635
Dieter sorgt für eine eindrucksvolle AtmosphäreDieter sorgt für eine eindrucksvolle Atmosphäre
Standard

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"!
__________________
Informationen aus Koblenz-Metternich
-----------------------------------
"Wissen heißt, Fragen zu erwerben."
Mit Zitat antworten
  #9 (permalink)  
Alt 18.06.2006, 18:30
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 07.02.2006
Beiträge: 359
ONeill befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 18.06.2006, 18:53
Benutzerbild von i-fekt
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 01.06.2005
Beiträge: 422
i-fekt befindet sich auf einem aufstrebenden Ast
Standard

Reicht natürlich vollkommen, genauso wie es Sterne tun.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Formulare: leere Pflichtfelder FuryDE CSS 7 03.01.2013 15:00
Markieren von Inhalten verhindern marius Javascript & Ajax 3 29.08.2009 16:17
Dieses Forum als gelesen markieren Loïs Bégué Fragen, Konstruktive Kritik, Lob / Bekanntmachungen 3 06.07.2007 15:49
Ist eine Tabelle barrierefrei? maggie Barrierefreiheit 21 10.02.2007 16:43
Ist diese Seite barrierefrei? jobo Barrierefreiheit 5 15.07.2005 08:08


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:52 Uhr.