Spickzettel: barrierefreie Formulare

Inhaltsverzeichnis überspringen

Hier findest Du Checklisten, Beispiel-Quellcode sowie eine Zusammenstellung aller wichtiger WCAG-Erfolgskriterien, die Dir bei der Entwicklung eines barrierefreien Formulars helfen können. Eine detailliertere Beschreibung findest Du auf in meiner Notiz zum Thema "barrierefreie Formulare".

WCAG-Erfolgskriterien

Bemerkung: Diese Liste wurde u. a. mit Hilfe der Webseite This is WCAG zusammengestellt. Sie ist nicht zwingend vollständig.. Derjenige, dem eine essentielle Richtlinie fehlt, kann sich sehr gern bei mir melden.

Beispiel-Quellcode 

<div>
  <h2>Formularfehler</h2>
  <p>
    Folgende Fehler traten beim Ausfüllen des Formular auf:
  </p>
  <ul aria-label="Formularfehler">
    <li><a href="#input-field">"Name": Die Eingabe muss mindestens 10 Zeichen lang sein.</a></li>
  </ul>
</div>

...

<form>
  <div aria-hidden="true">*Pflichtfeld</div>
  <label for="input-field" id="input-field-label">Name<span aria-hidden="true">*</span></label>
  <input id="input-field" type="text" aria-labelledby="input-field-label input-field-error" aria-describedby="input-field-description" required/>
  <div id="input-field-error">Fehler: Die Eingabe muss mindestens 10 Zeichen lang sein.</div>
  <div id="input-field-description">Mind. 10 Zeichen</div>
  <fieldset>
    <legend>Auswahlmöglichkeiten</legend>
    <label><input type="checkbox" name="options"/>Option 1</label>
    <label><input type="checkbox" name="options"/>Option 2</label>
    <label><input type="checkbox" name="options"/>Option 3</label>
  </fieldset>
  <input type="submit" value="Absenden" />
</form>

Checklisten

HTML-Aufbau

Pflichtfelder

Fehlerfall-Kommunikation

Gestaltung

Farbwahl

Schaltflächen