Verfasst von: bletra | 7. November 2011

Barrierefreie Formularvalidierung mit JavaScript

Die Validierung von Formularen auf dem Client ist eine Standardaufgabe bei Webapplikationen. Mit Html5 wird es hierfür hilfreiche Attribute geben. Momentan stehen diese jedoch noch nicht in allen Browsern benutzbar zur Verfügung. Daher erfolgt üblicherweise die clientseitige Validierung mit JavaScript, genauer gesagt ECMAScript. Die clientseitige Validierung von Formularen reduziert den Datentransfer und dient somit ausschließlich der Benutzerfreundlichkeit – serverseitige Validierung ist dennoch aufgrund von Sicherheitsanforderungen notwendig. In den Genuss der clientseitigen Validierung sollen auch Benutzer kommen, die Hilfsmittel zur Bedienung benötigen, z.B. blinde Menschen, die einen Screenreader benutzen.
Damit stellt sich die Frage, welche Strategie zu verfolgen ist. Zunächst die Anforderungen:

  1. Bereits bei der Eingabe soll klar sein, was in dem jeweiligen Feld erwartet wird.
  2. Ist JavaScript deaktiviert, erfolgt die Validierung ausschließlich auf dem Server. Das Formular wird dennoch abgeschickt.
  3. Das Formular lässt sich auch mit der Tastatur allein korrekt ausfüllen und abschicken.
  4. Unvollständig, falsch oder nicht ausgefüllte Formularfelder führen dazu, dass das Formular nicht abgeschickt wird (bei aktiviertem JavaScript).
  5. Fehlermeldungen müssen für alle Benutzer wahrnehmbar und leicht verständlich sein und sind leicht zu korrigieren.
  6. Die clientseitige Validierung ist eine gute Unterstützung für die Benutzer, das Formular effizient auszufüllen. Sie wird nicht als nervig wahrgenommen.
  7. Fehlermeldungen sind leicht an die gewählte Sprache anpassbar (Internationalisierung).

Die ersten Forderungen lassen sich einfach umsetzen:

Zu 1.: Pflichtfelder werden typischerweise mit * markiert, ggf. gibt es zusätzliche Angaben in welchem Format die Eingabe (z.B. Telefon oder Datum) zu erfolgen hat. Damit bei der Eingabe in ein Formularelement auch vorgelesen werden kann, welche Information gewünscht ist, gehört zu jedem Eingabeelement (select, textarea, input type text oder password oder radio oder checkbox) ein Label-Element. Dabei wird das for-Attribut des Labels mit dem id-Attribut des Eingabeelements verknüpft, wie folgendes Beispiel zeigt:

<label for="lastName">Nachname:</label><input type="text" name="name" id="lastName" value="" size="10" />

Zu 2.: Die Validierung wird im onsubmit-Attribut des Form-Tags aufgerufen und nicht an ein change-Ereignis o.ä. gebunden. Wird von der Methode ein „false“ zurückgegeben, so wird durch die gezeigte Aufrufmethodik die Default-Action, also das Abschicken des Formulars, nicht ausgeführt.

<form action="script.php" method="post" accept-charset="UTF-8" onsubmit="return formOk();">

Alternativ kann hier auch das Event übergeben werden und seit DOM2 mit preventDefault die Ausführung der Default-Action verhindert werden.

Zu 3: Eingaben und Aktionen der Benutzer sind an entsprechende Formularfelder oder Links gebunden. Diese lassen sich generell mit Tabs fokussieren und durch ein Return wird auch ein click-Ereignis ausgelöst.

Zu 4: Die in zu 2. verwendete JavaScript-Funktion formOk gibt im Fehlerfall „false“ zurück. Damit wird die Default-Action des Formulars nicht ausgeführt, d.h. das Formular wird nicht abgeschickt. Bei deaktiviertem JavaScript wird das Formular an den Server geschickt.

Zu 5-7: Schwieriger ist die Frage, wie die Fehlermeldungen zu kommunizieren sind. Früher wurde hierfür ausschließlich eine alert-Meldung verwendet. Diese fällt dem Benutzer direkt auf und wird auch vom Screenreader direkt vorgelesen. Mehrere alert-Fehlermeldungen werden als nervig empfunden und nachdem die Box weggeklickt wurde, hat man oft auch vergessen, was zu korrigieren ist. Zusätzlich ist also auch eine Markierung (roter Hintergrund, …) der fehlerhaften Eingabeelemente hilfreich. Alert-Boxen werden als „nicht schön“ empfunden und von Designern ungern eingesetzt. Daher werden häufig nur noch entsprechende Fehlertexte und Styleänderungen im HTML direkt vorgenommen. Diese Änderungen werden jedoch von Screenreadern nicht notwendigerweise bemerkt und somit nicht vorgelesen. Folgender Ansatz stellt Designer und Screenreader (getestet mit JAWS und Windows7-System-Reader) gleichermaßen zufrieden und ist daher uneingeschränkt zu empfehlen:
Sie können in Ihrem HTML-Code Fehlermeldungen vorbereiten: Fügen Sie ein a-Tag mit href-Attribut als Fehlermeldung ein und setzen den Focus darauf. Idealerweise fügen Sie für alle fehlerhaften Felder ein a-Tag in eine Liste ein, diese Liste kann ggf. für sehende Menschen versteckt werden. Zusätzlich werden fehlerhafte Felder sichtbar markiert. Folgender Code veranschaulicht die dargestellte Strategie:

HTML-Seite:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>test</title>
<script type="text/javascript" src="demo.js"></script>
<link rel="stylesheet" type="text/css" href="demo.css" />
</head>
<body>
<h1>Demo Formularvalidierung</h1>
<p id="formwarnings">
<a href="#">Fehler in der Eingabe:</a>
<ul>
<li  id="link_name"><a href="#name">Name ist ein Pflichtfeld</a></li>
<li id="link_zip"><a href="#zip">Postleitzahl ist ein Pflichtfeld, fünfstellige Zahl</a></li>
</ul>
</p>
<form action="script.php" accept-charset="utf-8" method="post" onsubmit="return isValid();">
<div>
<label for="name">Name *</label><input id="name" name="name" type="text" />
<label for="zip">Postleitzahl *</label><input id="zip" name="name" type="text" />
<input type="submit" value="abschicken" />
</div>
</form>
</body>
</html>

CSS:

.hideWarning {display:none;}
.showWarning{display:block;}
.warning{border: 1px solid red;}

JavaScript:

"use strict";
function isValid()
{
  var ok = true;
  var pattern = /^[0-9]{5}$/;
  var inputField = document.getElementById("zip");
  if (!pattern.test(inputField.value))
  {
    ok = false;
    showWarning("zip");
    inputField.focus();
  }
  inputField = document.getElementById("name");
  if (inputField.value.length == 0)
  {
    ok = false;
    showWarning("name");
    inputField.focus();
  }
  return ok;
}

function showWarning(id)
{
  document.getElementById(id).className = "warning";
  document.getElementById("link_" + id).className = "showWarning";
  document.getElementById("formwarnings").className = "showWarning";
}

Wie Sie sehen, enthält der JavaScript-Code keine Strings zur Erzeugung von Fehlermeldungen, diese sind im HTML-Code bereits vorbereitet. Damit kann das Script auch in übersetzten HTML-Seiten eingesetzt werden, Internationalisierung ist somit vorbereitet.

Links zum Thema:

Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

Kategorien

%d Bloggern gefällt das: