CSS/Tutorials/zugängliche Eingabefelder

Aus SELFHTML-Wiki
< CSS‎ | Tutorials
Wechseln zu: Navigation, Suche

Aus Gründen der Zugänglichkeit ist es notwendig, dass für jeden Nutzer eines Formulars erkennbar ist, welche Information in ein Texteingabefeld eingegeben werden soll.

zugängliche Beschriftungen[Bearbeiten]

Beschriftungen werden mithilfe von label-Elementen realisiert. Untersuchungen zeigen, dass für eine sehr gute Zugänglichkeit die Beschriftung des Eingabefeldes in unmittelbarer Nähe desselben zu finden sein muss. Der optimale Platz ist - in Abhängigkeit von der Schreibrichtung - links- bzw. rechtsbündig oberhalb des Eingabefeldes, weil in diesem Fall selbst bei sehr schmalen Bildschirmen und großen Zoomfaktoren das Eingabefeld und seine Beschriftung gemeinsam zu sehen sind. Für Nichtsehende erfolgt die Zuordnung der Beschriftung zu ihrem Eingabefeld über eine ID des input-Elements, welche mit einem entsprechenden for-Attribut des labels referenziert wird.

zugängliches label-input-Paar in zwei Sprachen

Platzhalter[Bearbeiten]

Mit HTML5 wurde ein placeholder-Attribut für input-Elemente eingeführt, welches allerdings für Beispielangaben gedacht ist und nicht für Beschriftungen. Hier etwa könnte es klarmachen, dass keine getrennten Eingabefelder für Name und Vorname verwendet werden.

zugängliches label-input-Paar mit Platzhalter in zwei Sprachen

Beschriftung direkt im Eingabefeld[Bearbeiten]

Es könnte gewünscht sein, dass die Beschriftung des Eingabefeldes noch näher an das Eingabefeld heranrückt, das ist nur noch möglich, indem es sich im Eingabefeld selbst befindet.

Beispiel ansehen …
Beachten Sie: Verwenden Sie für einen solchen Anwendungsfall nicht das placeholder-Attribut, denn zum einen fehlt Nichtsehenden dann die Beschriftung und zum anderen verschwindet der Platzhalter sobald Sie mit der Eingabe beginnen.


Damit das label-Element beliebig positioniert werden kann, gruppieren wir die label-input-Paare mithilfe eines div- oder span-Elements.

Beispiel ansehen …
.fancy-input {
  margin: 1em 0 1em 0;
  position: relative;
}
.fancy-input label {
  position: absolute;
  top: .5em;
  left: .5em;
  color: #666;
}
.fancy-input input {
  padding: .5em;
}
<div class="fancy-input">
  <label for="name">Name</label>
  <input id="name">
</div>
<div class="fancy-input">
  <label for="ort">Wohnort</label>
  <input id="ort">
</div>


Es ist zu sehen, dass diese Variante nicht zielführend ist, denn man kann nicht lesen, was in das Eingabefeld eingegeben wurde. Es ist wünschenswert, dass die Beschriftung „aus dem Weg geht“ sobald mit der Eingabe begonnen wird. Um zu erkennen, ob schon etwas in das Feld eingegeben wurde, wird JavaScript benötigt. Das Formular ist also bei deaktiviertem JavaScript nicht bedienbar. Deshalb setzen wir mit CSS die Beschriftung an die Stelle, wo sie bei der Eingabe nicht stört.

Beispiel ansehen …
.fancy-input label {
  position: absolute;
  color: #666;
  background: #fff;
  padding: 0 .5em;
  font-size: .8em;
  top: -.6em;
  left: .5em;
}


Mithilfe von JavaScript setzen oder entfernen wir jetzt nach Bedarf am label-Element eine Klasse like-placeholder. Zunächst wird für jedes der entsprechenden Elemente die Klasse gesetzt, aber nur, falls kein Text im Eingabefeld steht. Damit rutschen die Beschriftungen in die Mitte der input-Elemente. Falls JavaScript nicht aktiviert ist, passiert dies nicht und das Formular bleibt bedienbar. Außerdem werden für jedes Element zwei Eventhandler registriert: Einer lauscht, ob das Element den Fokus bekommen hat, der andere ob dem Element der Fokus wieder entzogen wurde. Bekommt das Element den Fokus, wird die Beschriftung „aus dem Weg geräumt“, wird ihm der Fokus entzogen und enthält es keine Eingabe, rutscht die Beschriftung wieder in die Mitte des Eingabefeldes. Eine Transition sorgt für einen weichen Übergang.

Beispiel ansehen …
.fancy-input label {
  position: absolute;
  background: #fff;
  padding: 0 .5em;
  font-size: .8em;
  top: -.6em;
  left: .5em;
  transition: all .3s ease;
}
.fancy-input label.like-placeholder {
  color: #666;
  font-size: 1em;
  top: .5em;
  left: .5em;
}
var fancyInputElements = document.querySelectorAll('.fancy-input input');

for (var i = 0; i < fancyInputElements.length; i++) {
  scaleLabel(fancyInputElements[i], true);
    
  fancyInputElements[i].addEventListener('focus', function () { scaleLabel(this, false) });
  fancyInputElements[i].addEventListener('blur', function () { scaleLabel(this, true) });
}

function scaleLabel(element, isLikePlaceholder) {
  if (isLikePlaceholder) {
    if (element.value === '') {
      element.parentNode.querySelector('label').classList.add('like-placeholder');
    }
  }
  else {
    element.parentNode.querySelector('label').classList.remove('like-placeholder');
  }
}

Quellen[Bearbeiten]