Formulare/Benutzereingaben zugänglich gestalten
Gerade bei Benutzereingaben in Formularen ist es wichtig, dass diese nach den Grundsätzen der usability (Benutzerfreundlichkeit) und accessibility Barrierefreiheit für alle verständlich und zugänglich sind.
Jeder Nutzer eines Formulars sollte gleich erkennen, welche Informationen eingegeben werden sollen.
Wenn schreibende Interaktion über Formulare stattfindet, sollte
- der Zweck jedes Formularelements deutlich sein
- Pflichtfelder klar gekennzeichnet sein
- eine Eingabe schon vor dem Absenden überprüft werden
- valide Eingaben können mit der Pseudoklasse :valid per CSS gekennzeichnet werden
- eine Vorschau, bzw. Kontrollausgabe angezeigt werden
- Ein Anwender ist über die Folgen einer Formularabsendung richtig zu informieren.
- Bei Formularmailern sollte ihm eine archivierbare Version ausgehändigt werden können.
- Bei Formulareingaben, welche Daten dauerhaft nicht wieder editierbar speichern, sollte immer eine Vorschau verfügbar sein.
Inhaltsverzeichnis
Beschriftungen
Damit der Benutzer überhaupt weiß, was er eingeben soll, sind Beschriftungen sinnvoll. Weitergehende Erklärungen, die nichts mit dem Ausfüllen des Formulars zu tun haben, stören die Übersichtlichkeit und sollten daher an anderer Stelle platziert und durch einen Link erreichbar sein.
Mit dem label-Element (engl. für Etikett) wird Eingabefeldern, Radio-Buttons und Checkboxen bzw. einigen anderen Elementen eine Beschriftung hinzugefügt. Sie wird dem Eingabeelement zugeordnet, indem sie es entweder als Elternelement umschließt oder durch die Verknüpfung des for-Attributs mit der id des Eingabeelements.
Es kann neben den Universalattributen folgende Attribute besitzen:
-
for: der Wert ist dieiddes Eingabe-Feldes, das beschriftet wird -
form: liefert eine Beschriftung für das form-Element, zu dem das Label gehört
Drei Arten, label logisch einem Eingabe-Element (hier input) zuzuordnen:
- Wird das betreffende
input-Element als Kindelement deslabeldefiniert, so ist eine ausdrückliche Zuordnung zwischeninputundlabelmittelsfor-Attribut nicht mehr zusätzlich nötig. Die Zuordnung erfolgt dabei implizit über die Struktur des Quelltextes. Dies führt jedoch bei Screenreadern zu Schwierigkeiten. - Sie kann aber erfolgen (zweiter Beispielabschnitt), was das Fehlerpotenzial durch zukünftige Umstrukturierungen verringert.
forist speziell dann von Bedeutung, wenn die Beschreibung nicht Elternelement desinputist. - (dritter Beispielabschnitt), was speziell dann geschehen kann, wenn das
labelnicht direkt neben deminput-Element vorkommen soll.
label-Element, damit
- Nichtsehende wissen, was in das Eingabefeld eingegeben werden soll
- die anklickbare Fläche (vor allem bei bei Checkboxen und Radio-Buttons) vergrößert wird, da auch auf das Label geklickt werden kann.
label-Elemente mit form-Attribut
Mithilfe des form-Attributs kannst du eine Beschriftung für das Formular erzeugen.
Dieses Formular hat eine ID. Das folgende label-Element verweist mit seinem form-Attribut (person) auf genau dieses Formular. Damit ist eine Beschriftung für das Formular gegeben.
Position
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.
Um valide Daten zu erhalten, ist es empfehlenswert nicht nur bereits eingegebene Daten auf ihre Gültigkeit zu überprüfen, sondern dem Benutzer schon vor der Eingabe Hinweise und Hilfen zur richtigen Eingabe zu geben.
Tool-Tipps
Häufig sieht man kleine Info-Icons, die beim Klick einen Tooltip öffnen. Allerdings hat diese Methode gravierende Nachteile, denn Tooltips werden von Screenreadern nicht vorgelesen, da sie mit dem Formularfeld nicht verknüpft sind. Hauptartikel: Infobox/Tooltips mit title#Tooltipp, Touch und Zugänglichkeit
Um einer Formularbeschriftung weitere, optionale Informationen mitzugeben, kannst du es mit einem details-Element erweitern. Dies ist erlaubt, da das label-Element keinen labellable content erlaubt, andere Kindelemenente wie details jedoch schon.[1]
<label class="input-container">
<span>Vorname</span>
<details>
<summary>Wie Sie Ihren Vornamen finden</summary>
<h1>Fragen Sie Ihre Mama</h1>
<p>Wenn Sie nicht mehr wisen, wie Sie heißen, fragen Sie am besten Ihre Mutter. Die weiß alles!</p>
<h2>Fragen Sie <strong>nicht</strong> Ihren Partner.</h2>
<p>Die Wahrscheinlichkeit ist sehr gering, dass Ihr amtlicher Vorname Schätzchen, wilde Maus oder Papabär lautet.</p>
<h1>Räumen Sie endlich mal wieder auf und finden Sie Ihren Personalausweis</h1>
<p>Auf Ihrem Personalausweis schauen Sie nun nach dem recht klein geschriebenen Wort "Vorname". Das Wort darüber ist Ihr Vorname.</p>
<h2>Pro-Tipp für die Vornamen-Suche auf dem Ausweis</h2>
<p>Wenn Sie Ihren Nachnamen noch kennen, dann schauen Sie in der Nähe des Nachnamens nach Ihrem Vornamen. Auf Ausweisen sind die beiden nie weit voneinander entfernt!</p>
</details>
<input id="first-name">
</label>
placeholder - scheinbar genial
Mit HTML5 wurde ein placeholder-Attribut für input-Elemente eingeführt, welches allerdings für Beispielangaben gedacht ist und nicht für Beschriftungen. So könnte etwa klarmachen, dass keine getrennten Eingabefelder für Name und Vorname verwendet werden.[2][3]
Scheinbar hat ein placeholder-Attribut einige Vorteile:
- Es befindet sich im Eingabefeld und
- ist so gleich zuzuordnen
- spart Platz, den man auf kleinen Bildschirmen evtl. nicht hat.
Allerdings hat sich herausgestellt, dass
- der Text des Attributs in den Default-Sytlesheets aller Browser einen zu geringen Kontrast hat.
- der Hinweis mit der ersten Texteingabe verschwindet und Nutzer keine Hilfe mehr haben.
- Stell sicher, dass die Farbe des Platzhaltertextes die WCAG SC 1.4.3-Anforderung eines Kontrastverhältnisses von 4,5:1 erfüllt.
- Stell Anweisungen als Text im label oder neben dem Formular bereit.
- Verknüpfe Anweisungen mit dem entsprechenden Formularfeld unter Verwendung von aria-describedby
- Wenn es keine andere Möglichkeit gibt, als einen Platzhalter als Ersatz für eine sichtbare Beschriftung zu verwenden, verwenden Sie eine der Methoden für schwebende Beschriftungen
Sie sollten placeholder-Attribute nur dann verwenden, wenn sie wirklich notwendig sind. Jeder Nutzer wird wissen, dass er in ein mit „E-Mail-Adresse“ beschriftetes Eingabefeld seine E-Mail-Adresse eintragen soll. Außerdem sollten sich placeholder-Attribute deutlich von den Eingaben unterscheiden, was häufig dazu führt, dass die placeholder-Attribute mit einem zu geringen Kontrast formatiert werden. Abhilfe könnte die Verwendung von „z. B.“ schaffen.
Beschriftung direkt im Eingabefeld
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.
Damit das label-Element beliebig positioniert werden kann, gruppieren wir die label-input-Paare mithilfe eines div- oder span-Elements.
.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.
.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.
.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');
}
}
Mehrteilige Formulare
Das Suchformular aus dem ersten Kapitel enthält nur drei Elemente: Ein label-, ein input- und ein button-Element. Diese drei Elemente können gut in einer Zeile angeordnet werden. Aus Sicht der Dokumentstruktur ist das form-Element aber kein Textbaustein. Es gruppiert lediglich Eingabeelemente als zu einem gemeinsamen Datensatz gehörend. Daher ist es wichtig, sich über sinnvolle Elemente zur Textstrukturierung und Gliederung größerer Formulare Gedanken zu machen.
Gerade komplexere Formulare wirken alleine durch ihre Länge unübersichtlich. Das Formular sollte in logische Abschnitte gegliedert sein. So sind in einem WebShop Versand und Zahlungsinformationen oft getrennt.[4]
Dabei sollte
- auf jeder Seite Hilfeinstruktionen zu finden sein
- erkennbar sein, welche Abschnitte optional sind und übersprungen werden können
- erkennbar sein, in welchem Abschnitt man sich gerade befindet
Gruppierung mit fieldset
Mit dem fieldset-Element können Elemente innerhalb von Formularen gruppiert werden. Das legend-Element dient dann als Titel und Beschriftung.
Das Formular erhält eine Beschreibung in einem label-Element, das über das form-Attribut mit der id des Formulars verknüpft ist.
Es ist mit fieldset-Elementen in zwei Blöcke gegliedert, die jede eine Erklärung in einem legend-Element haben.
border: none auch anders festlegen.
Fortschrittsanzeige mit progress
Das progress-Element veranschaulicht einen Fortschritt einer Aktion etwa bei Bearbeitung eines Fragebogens in einer an Browser und Betriebssystem angepassten Darstellung. Progress bedeutet Fortschritt oder Verlauf.
Das progress-Element erwartet folgende Attribute:
-
max, gibt an, wieviele Schritte maximal möglich sind -
value, Anzahl der abgearbeiteten Schritte
Dabei gelten folgende Regeln:
- ein fehlendes
max-Attribut wird mit dem Wert 1 initialisiert - der Wert des
value-Attributs sollte kleiner als der desmax-Attributes sein
function aktualisiere_progressbar() {
var anteil = 0;
for (var k = 0; k < document.forms[0].elements.length; k++) { if (document.forms[0].elements[k].value != '') anteil++; }
document.getElementById('fortschritt').value = anteil;
}
Dieses Beispiel zeigt eine dynamische Anpassung des Fortschritts mit JavaScript.
progress-Elementes schreiben.
Das W3C empfiehlt als Standardabmessungen 10em Breite und 1em Höhe. In den meisten Browserstylesheets ist das auch so umgesetzt.
mehrteilige Formulare
ToDo (weitere ToDos)
multistep-Formular; siehe SELF-Forum
- Damit der Benutzer weiß, wie viele Schritte er bereits geschafft hat, kannst du mit dem progress-Element eine Fortschrittsanzeige einblenden.
- Zusätzlich können die Seitenüberschrift, aber auch der title der Seite, der sich auf der Registerkarte des Browsers wiederfindet, geändert werden.
Alternativ könnte man in einer inline angeordneten Liste das jeweils akutelle Element optisch hervorheben:
<ol class="timeline">
<li class="timeline-past">
<span class="visuallyhidden">Fertig: </span>
<a href="billing.html">Rechnungsadresse</a>
</li>
<li class="timeline-current">
<span class="visuallyhidden">Jetzt: </span>
<span>Versandadresse</span>
</li>
<li><span>Bestellung überprüfen</span></li>
<li><span>Zahlung</span></li>
<li><span>Kauf abschließen</span></li>
</ol>
<form action="order.php">
<fieldset>
<legend>Ware</legend>
<ul>
<li>
<label for="article-1">Plüsch-Teddybär</label>
<input id="article-1" name="article-1" type="number" value="0">
</li>
<li>
<label for="article-2">Sofakissen "Sonnenblume"</label>
<input id="article-2" name="article-2" type="number" value="0">
</li>
</ul>
</fieldset>
<fieldset>
<legend>Bezahlung</legend>
<p>
<label for="payment">Art der Bezahlung</label>
<select id="payment" name="payment">
<option value="ae">American Express Card</option>
<option value="master">MasterCard</option>
<option value="visa">VISA</option>
<option value="prepayment">Vorkasse</option>
</select>
</p>
<p>
<input id="email-receipt" name="email-receipt" type="checkbox">
<label for="email-receipt">Quittung per E-Mail</label>
<label for="email">an folgende Adresse</label>
<input id="email" name="email" type="email">
</p>
</fieldset>
<fieldset>
<legend>Versand</legend>
<dl>
<dt>Lieferanschrift</dt>
<dd>
<ul>
<li>
<label for="recipient-name">Name</label>
<input id="recipient-name" name="recipient-name">
</li>
<li>
<label for="recipient-address">Anschrift</label>
<input id="recipient-address" name="recipient-address">
</li>
<li>
<label for="recipient-zip">PLZ</label>
<input id="recipient-zip" name="recipient-zip">
<label for="recipient-city">Ort</label>
<input id="recipient-city" name="recipient-city">
</li>
</ul>
</dd>
<dt>Rechnungsanschrift</dt>
<dd>
<ul>
<li>
<label for="buyer-name">Name</label>
<input id="buyer-name" name="buyer-name">
</li>
<li>
<label for="buyer-address">Anschrift</label>
<input id="buyer-address" name="buyer-address">
</li>
<li>
<label for="buyer-zip">PLZ</label>
<input id="buyer-zip" name="buyer-zip">
<label for="buyer-city">Ort</label>
<input id="buyer-city" name="buyer-city">
</li>
</ul>
</dd>
</dl>
</fieldset>
<fieldset>
<legend>Zusatz</legend>
<p>
<label for="message">Ihre Nachricht an uns</label>
<textarea id="message"></textarea>
</p>
</fieldset>
<p><button>jetzt Kostenpflichtig bestellen</button></p>
</form>
Dieses Beispiel verwendet verschiedene Eingabemöglichkeiten wie mehrzeiliges Textfeld, Auswahlliste und Checkboxen neben reinen Textzeilen. Die verschiedenen Bereiche werden mit fieldset-Elementen voneinander abgegrenzt. Die Beschriftung eines fieldsets erfolgt mit einem legend-Element.
Fortschrittsanzeige bei umfangreicheren Formularen
Über dieses Modell kannst du auch komplexere Aufgabenstellungen lösen, denn dir stehen alle Möglichkeiten der CSS-Selektoren zur Verfügung. Beispielsweise kannst du mittels Nachfahrenselektoren Elemente formatieren, die unterhalb des mit der Klasse markierten Elements liegen. So können durch die Änderung der Klasse gleich mehrere enthaltene, im DOM-Baum unterhalb liegende Elemente formatiert werden, ohne diese einzeln anzusprechen.
<form>
...
<p><button>Daten versenden</button></p>
<p class="notice">...</p>
</form>
form {
background: white;
border: thin solid #f00;
border-radius: .5em;
box-shadow: 0 0 10px #f00 inset;
padding: .5em 1em;
}
form button {
color: red;
text-decoration: line-through;
}
form.percentage-100 button {
color: inherit;
text-decoration: inherit;
}
.percentage-20 {
border-color: #f60;
box-shadow: 0 0 .6em #f60 inset;
}
.percentage-100 {
border-color: #0f0;
box-shadow: 0 0 .6em #0f0 inset;
}
.notice {
border-color: #f00;
border-radius: .5em;
box-shadow: 0 0 1.2em #f00 inset;
padding: 1em 2em;
}
.percentage-20 .notice {
border-color: #f60;
box-shadow: 0 0 1.2em #f60 inset;
padding: 1em 2em;
}
.percentage-100 .notice {
border-color: #0f0;
box-shadow: 0 0 1.2em #0f0 inset;
padding: 1em 2em;
}
Das Beispiel zeigt verschiedene Klassen, die verschiedene Prozentstufen repräsentieren (hier nur eine Auswahl aus .percentage-10 bis .percentage-100). Die Darstellungsregeln für das Formular und den .notice-Textabsatz gehen von einer Prozentstufe null aus, die grundsätzlich angewendet werden. Wenn nun JavaScript bei der Prüfung feststellt, dass mehr als 0% der Angaben gemacht wurden, weist es dynamisch dem form-Element die passende Klasse zu, was sich unmittelbar auf die Farbgebung sowohl des Formulars selbst, als auch dem darin enthaltenen .notice-Textabsatzes, auswirkt, da diese Klassen Teile der bisher gültigen Darstellungsregeln modifizieren.
Zusätzlich zeigt ein progress-Element den Fortschritt beim Ausfüllen als Balken an.
Tastaturbedienung
Focus und Tabs
Alle Bedienelemente (z. B. Links und Formularelemente) sollten durch die TAB-Taste ( ↹ ) erreichbar sein. Dabei kannst du mit dem tabindex-Universalattribut eine Reihenfolge festlegen. Allerdings solltest du nur vorsichtig mit dieser Möglichkeit umgehen, da eine Abweichung von der auf der Seite vorgegebenen Struktur nur zur Verwirrung des Benutzers führen würde.
Hauptartikel: CSS/Tutorials/Selektoren/Pseudoklasse
Tastatur-Shortcuts
Von Tastatatur-Shortcuts ist generell abzuraten, weil es keine Kombinationen gibt, die auf allen Systemen funktionieren und nicht mit Shortcuts von anderen Programmen (z. B. Screenreader) oder den diversen Betriebssystemen kollidieren. Solltest du sich entgegen dieser Empfehlung für die Verwendung von Tastatur-Shortcuts entscheiden, beachte unbedingt die Konventionen und vor allem die unterschiedlichen Implementierungen und Konflikte! – Niemand wird nur auf Ihrer Website existierende Shortcuts lernen wollen.[5]
Tastatur-Shortcuts können entgegen der generellen Empfehlung zur Vermeidung in konkreten Projekten aber eine große Hilfe sein. So helfen sie eingebenden Personen beispielsweise bei der massenhaften Erfassung von strukturierten Daten und sind dann – nicht nur für Menschen mit Behinderung – eine Arbeitserleichterung; hier kann es Sinn machen, auch schwer merkbare Tastatur-Shortcuts zu lernen, die auf dem eingesetzten System funktionieren.
Captchas
Captchas sind ein Beispiel dafür, wie Barrierefreiheit per Design an eine Grenze stößt. Barrierefreiheit bedeutet, dass eine Seite für einen Bot genauso erreichbar ist wie für einen menschlichen Benutzer. Da dies aber, besonders bei der Einrichtung von Mail-Accounts, zu Missbrauch verleitet, setzen größere Portale hier Captchas ein. Captchas beruhen normalerweise auf einem Bild, dessen Textgehalt es zu entziffern gilt. Hierbei wird die Regel, dass jeder Bildinhalt ein Textäquivalent enthalten solle, bewusst missachtet. Damit Zugänglichkeit dennoch für menschliche Benutzer gewährleistet ist, braucht es Alternativen zu Bildcaptchas. Hierbei werden meistens Audio-Captchas eingesetzt.
- Setze Captchas nur dann ein, wenn der Service und das Missbrauchspotential dies verlangen.
- Setze nur Captchas ein, die bezüglich Barrierefreiheit eine gute Note erhielten.
Siehe auch
Referenz:
Weblinks
- ↑ The label Element (WHATWG)
- ↑ Placeholders in Form Fields Are Harmful Katie Sherwin, Sep. 10, 2018
- ↑ smashingmagazine: Don’t Use The Placeholder Attribute (20.06.2018)
- ↑ W3C: Web Accessibility Tutorials Multi-page Forms
- ↑ webaim.org: Keyboard Accessibility
- SELFHTML-Forum: Ausrichtung von Formularelementen
- CodePen: label like placeholder A Pen By Gunnar Bittersmann
