Beispiele aus dem Buch (Abschnitt 2.7: Strukturen und Validierung)

 "Barrierefreies Webdesign — Praxishandbuch für Webgestaltung und grafische Programmoberflächen" bei amazon.de
"Barrierefreies Webdesign — Praxishandbuch für Webgestaltung und grafische Programmoberflächen" bei amazon.deDies ist ein Beispiel aus dem Buch  Barrierefreies Webdesign (2004), das Ende 2004 im dpunkt.Verlag erschienen ist.
Barrierefreies Webdesign (2004), das Ende 2004 im dpunkt.Verlag erschienen ist.
Führungslinien in Formularen
Beim Einsatz von Vergrößerungssystemen kann ein Formular unverständlich wirken, wenn zwei Spalten genutzt werden: eine linke Spalte für einen Beschreibungstext und eine rechte Spalte für ein Eingabefeld. Beim Verschieben des Vergrößerungsausschnittes vom Text zum Eingabefeld besteht viel Leerraum, der keine Orientierung gibt. Deshalb ist die Gestaltung solcher Formulare mit Führungslinien sinnvoll.
HTML
<form action="zieladresse.html" method="post">
  <table width="100%">
    <tr>
      <td class="links"><label for="feld1">Name</label>:</td>
      <td class="rechts"><input type="text" id="feld1" /></td>
    </tr>
    <tr>
      <td class="links"><label for="feld2">Vorname</label>:</td>
      <td class="rechts"><input type="text" id="feld2" /></td>
    </tr>
  </table>
</form>
CSS
td.links {
  width:50%;
  border-bottom:1px solid #036;
}
td.rechts {
  width:50%;
}
td.rechts input {
  font: bold 1em Verdana,Tahoma,sans-serif;
}
Browseransicht
Screenshot


 Anordnung von Bezeichnungen für Eingabefelder
Anordnung von Bezeichnungen für Eingabefelder  Pflichtfelder in Formularen kennzeichnen
Pflichtfelder in Formularen kennzeichnen