Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

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

Cover: 'Barrierefreies Webdesign — Praxishandbuch für Webgestaltung und grafische Programmoberflächen' von Jan Eric Hellbusch Extern: "Barrierefreies Webdesign — Praxishandbuch für Webgestaltung und grafische Programmoberflächen" bei amazon.de

Dies ist ein Beispiel aus dem Buch 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

Screenshot dieses Beispieles