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.

Skalierbarkeit von Formularfeldern

Unten stehend sind zwei Eingabefelder dargestellt. Sie unterscheiden sich lediglich durch die Breitenangabe des Eingabefelds.

Insbesondere im Microsoft Internet Explorer wird bei vergrößerter Schrift (Ansicht / Schriftgrad) nur der Inhalt des Formularelements im oberen Beispiel vergrößert, nicht jedoch das Eingabefeld selbst. Dies hat zur Folge, dass die eingegebenen Texte nicht immer gelesen werden können.

Wenn Sie die Schriftgröße im Browser nun verändern, z.B. im Microsoft Internet Explorer entweder über Ansicht / Schriftgrad oder Strg+Mausrädchen, dann verändert sich die Breite des unteren Eingabefelds.

HTML

<form action="zieladresse.html" method="post">
  <p>
    <label for="feld1">Beispiel: teilweise skalierbar</label>:<br />
    <input type="text" name="feld1" id="feld1" value="Eine Beispieleingabe" />
  </p>
  <p>
    <label for="feld2">Beispiel: skalierbares Eingabefeld</label>:<br />
    <input type="text" name="feld2" id="feld2" value="Eine Beispieleingabe" />
  </p>
</form>

CSS

#feld1 {
  font: bold 0.9em Verdana,Tahoma,sans-serif;
  width: 120pt;
}
#feld2 {
  font: bold 0.9em Verdana,Tahoma,sans-serif;
  width: 12em;
}

Browseransicht

:

:

Darstellung im Internet Explorer bei Schriftgrad "Sehr groß"

Screenshot

Screenshot dieses Beispieles

Darstellung im Internet Explorer bei Schriftgrad "Größer"

Screenshot

Screenshot dieses Beispieles

Darstellung im Internet Explorer bei Schriftgrad "Mittel"

Screenshot

Screenshot dieses Beispieles

Darstellung im Internet Explorer bei Schriftgrad "Kleiner"

Screenshot

Screenshot dieses Beispieles