Die nachfolgenden Inhalte können in OPAL nur mit zusätzlichem HTML-Code erstellt werden. In ILIAS ist die Erstellung gar nicht möglich.

Formularfelder

Der folgende Eintrag beschreibt die Umsetzung von barrierefreien Formularfeldern allgemein, im Bezug auf Beschriftungen und Fehlermeldungen.

Allgemeine Kriterien zu Formularfeldern

Folgende Kriterien stammen aus der Checkliste:
  • Für Eingabefelder, die Daten vom Nutzenden erfassen, ist eine semantisch eindeutige, sprachunabhängige Bestimmung ihres Zweckes möglich.
  • Eingaben auf Formularen führen nicht zu unerwarteten Kontext-Änderungen.
  • Dateneingaben können rückgängig gemacht oder vor dem Abschicken überprüft und korrigiert werden. Erfolgreiche Eingaben werden bestätigt.

Eingabefelder von Formularen sollen über Beschriftungen (label) verfügen, die mithilfe des for Attributs mit den Eingabefeldern verknüpft sind. Außerdem sollen zusammenhängende Eingabefelder über <fieldset> oder aussagekräftige Überschriften gruppiert sein. So können Screenreader Formulare unabhängig von der sichtbaren Darstellung korrekt wiedergeben.

Inhaltsänderungen auf der Seite (zum Beispiel das Einblenden zusätzlicher Felder) sollten immer klar nachvollziehbar sein, da diese sonst ablenken oder verwirren können. Zudem sollten sie unterhalb des entsprechenden Elements stattfinden, damit Screenreader dies als nächstes vorlesen können. Wenn Schaltflächen zum Beispiel die Sprache der gesamten Seite ändern oder zusätzliche Inhalte einblenden, sollte davor ein Hinweis zu diesem Verhalten kommen.

Nutzende mit Behinderungen haben in vielen Fällen ein höheres Risiko, Fehleingaben zu machen. Deswegen ist es gerade für Bestellvorgänge und verpflichtende Transaktionen wichtig, Mechanismen zum Rückgängig-Machen, Überprüfen oder Korrigieren von Eingaben anzubieten. Um dies umzusetzen sollten vor dem Abschicken alle Eingaben erneut angezeigt und erst auf erneute Bestätigung abgeschickt werden. Alternativ muss der Vorgang unmittelbar nach dem Abspeichern rückgängig gemacht werden können.

Codebeispiel für ein Formular mit mehreren Eingabefeldern 

                      
                        <fieldset>
                          <legend>Example form</legend>
                          <div>
                            <input type="radio" name="format" id="txt" value="txt" checked>
                            <label for="txt">Radio Button</label>
                          </div>
                          <div>
                            <input type="checkbox" name="newsletter" id="check_1">
                            <label for="check_1">Checkbox</label>
                          </div>
                        </fieldset>
  • Geben Sie klare Beschriftungen an: Jedes Formularfeld sollte ein zugehöriges <label>-Element haben. Diese Beschriftung hilft nicht nur sehenden Benutzern zu verstehen, wofür das Feld gedacht ist, sondern kann auch von Screenreadern gelesen werden, damit auch blinde oder sehbehinderte Benutzer verstehen, was das Feld bezweckt. 
                          
                          <input type="checkbox" id="notification" name="notify" value="delays">
                          <label for="notification">Notify me of delays</label>

    BITV-Anforderungen

    • Fehlermeldungen von Formularfeldern

    Folgende Kriterien stammen aus der Checkliste:
    • Das Formular erzeugt Fehlermeldungen bei Fehleingaben.
    • Fehlerhaft ausgefüllten Felder werden identifiziert und der Fehler in Textform beschrieben.
    • Fehlermeldungen sind verständlich und geben Hinweise, wie Fehler zu korrigieren sind.

    Fehlerhaft ausgefüllte Felder sollten hervorheben und Beschriftungen mit den konkreten Fehlern angezeigt werden. Dies erleichtert Nutzenden das Beheben von Fehlern. Damit Fehlermeldungen auch für Screenreader zugänglich sind, sollten sie über Live-Regionen (aria-live) oder Benachrichtigungen (alertdialog) bereitgestellt werden.

    Die Fehler werden erkannt. Pflichtfelder können über aria-required="true" gekennzeichnet werden. Fehlermeldungen, die kein Label eines Eingabefeldes sind, werden über aria-describedby mit dem entsprechenden Eingabefeld verknüpft.

    Fehlermeldungen geben konkrete Hinweise, wie Fehler zu korrigieren sind. Wenn ein falsches Format für E-Mail-Adressen oder Daten angegeben ist, sollte ein Beispielformat angegeben werden. Fehlermeldungen von Passwörtern und Anmeldefeldern dürfen aus Sicherheitsgründen jedoch keine spezifischen Hinweise enthalten.

    Codebeispiel eines Pflichtfeldes mit Hinweis auf das erwartete Format 

              
          <label for="date">Date (dd-mm-yyyy)</label >
          <input type="text" name="date" id="date" aria-required="true">

    BITV-Anforderungen