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.

Pflichtfelder in Formularen kennzeichnen

Um Pflichtfelder in Formularen zu kennzeichnen, muss nicht auf die Farbgestaltung verzichtet werden. Allerdings darf die Farbe nicht das einzige Unterscheidungsmerkmal sein. Für Formulare bietet sich das Sternchen als zusätzliches Zeichen an.

Weil in manchen Sprachausgaben das Sternchen als Satzzeichen erkannt wird und Satzzeichen nicht unbedingt vorgelesen werden, bietet sich auch an, anstatt die Plichtfelder mit Sternchen zu kennzeichnen beispielsweise die optionalen Felder als solche auszuweisen.

HTML

<form action="zieladresse.html" method="post">
  <p class="pflicht">
    <label for="id1">* Ihr Name:</label>
    <input type="text" name="benutzer" size="28" value="Ihr Name" onfocus="if(this.value=='Ihr Name') this.value='';" id="id1" />
  </p>
  <p class="optional">
    <label for="id2">Ihr Alter: (optional)</label>
    <input type="text" name="alter" size="2" id="id2" />
  </p>
</form>

CSS

.pflicht {
  color:white;
  background:red;
  font-weight:bold;
  width: 30em;
}
.optional {
  color:blue;
  background:white;
  width: 30em;
}
.pflicht label, .optional label {
  margin: 10px;
  float:left;
}
.pflicht input, .optional input {
  margin: 10px;
  font: bold 1em Verdana,Tahoma,sans-serif;
}

Browseransicht