16. Accessible Forms: Grouping and labelling form fields

Formulare sind eines der wichtigsten Elemente im Web: sie ermöglichen Interaktionen in allen möglichen Formen. Kritisch für ein ausfüllbares Formular ist das <label>-Element: ohne Label gibt es keinen Hinweis, wie ein Formularfeld ausgefüllt werden muss.

Relevante Success Criteria

SC 3.3.2 Labels or Instructions (Level A)
Labels or instructions are provided when content requires user input.

Klare und unmissverständliche Bezeichnungen und Instruktionen (inklusive der erwarteten Datenformate) hilft allen Usern, aber speziell denen mit kognitiven und sprachlichen Beeinträchtigungen sowie Lernschwierigkeiten, Informationen korrekt einzugeben.

Klare und unmissverständliche Bezeichnungen und Instruktionen (inklusive klarer Identifikation der benötigten Felder) kann verhindern, dass User ein Formular falsch oder nicht komplett ausfüllen und somit nochmals durch das Formular navigieren müssen, um die Fehler zu korrigieren.

Form controls mit dem <label>-Element identifizieren

Ein <label> ist kein accName, solange es nicht programmatisch mit der zugehörigen Steuerfläche (?) verbunden ist.

Relevante Success Criteria

SC 1.3.1 Info and Relationships (Level A)
Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
Die Zusammengehörigkeit von Label und Input, die visuell sichtbar ist, muss auch programmatisch gegeben sein.
SC 4.1.2 Name, Role, Value (Level A)
For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be prgrammatically determined; states, properties, and values that can be set by the user can be prgrammatically set; ant notifiacion of changes to thes items is available to user agents, including assistive technologies. 
<!-- This <label> provides an accName for the input, which is an explicit association between the label and its control -->
<!-- das for-Attribut funktioniert NUR mit dem <label>-Element! -->

<label for="[ input_ID ]">[ the input's label ]</label>
<input id="[ input_ID ]" type="text">
<!-- This creates an implicit association between the label and its control -->

<label>
  [ the input's label ]
   <input id="[ input_ID ]" type="text">
</label>
<!-- Create an explicit association between the label and its controls for better AT support -->

<label for="[ input_ID ]">
  [ the input's label ]
   <input id="[ input_ID ]" type="text">
</label>

Das <label>-Element kann nur ein »beschriftbares« Element enthalten - zusätzliche Elemente sind nicht erlaubt.

Nicht alle Formularfelder sind beschriftbar – d.h., nicht alle Formular-Steuerflächen erhalten ihren accName vom <label>-Element. Beschriftbar sind:

  • button
  • input (nicht mit type="hidden")
  • select
  • textarea
  • meter
  • output
  • progress

Accessible name computation:
1. input type="[ text | password | search | tel | email | url | number ]", <select> and <textarea> siehe siehe hier
2. input type="[ button | submit | reset ]" siehe siehe hier

<label> ist das robusteste Element, um einen accName zu vergeben. Wenn irgendwo auf der Seite schon ein <label> vorhanden ist, kann es mit aria-labelledby programmatisch mit dem Eingabefeld verbunden werden.

Wenn das HTML-Markup nicht verändert werden kann, und das Label ein <div> oder <span> ist, kann aria-labelledby oder aria-label verwendet werden.

<span id="input-label">Your name</span>
<input type="text" aria-labelledby="input-label">

<!-- Use aria-label only if the label is not in the markup and if you absolutely can't provide one. -->
<input type="text" aria-label="Your name">

Wenn aria-label verwendet wird, obwohl ein Label im HTML-Markup existiert, dann muss dieses mit dem sichtbaren Label übereinstimmen, sonst
a) liest der Screenreader den accName vor, der nicht mit dem sichtbaren Namen übereinstimmt und
b) kann das Input-Feld nicht mit Voice-Control bedient werden, weil der gesprochene Name nicht mit dem accName übereinstimmt.

Providing visually hidden labels

Grundsätzlich sollte das Label immer sichtbar sein und ein Verstecken vermieden werden. Es können aber Situationen auftauchen, in denen der Zweck des Input-Feldes aus dem Kontext ersichtlich ist. Wenn es die Usability nicht beeinträchtigt, kann ein Verstecken okay sein. Beispiel: Ein Suchfeld mit einem Such-Button. Der Zweck des Input-Feldes kann deutlich aus dem Kontext identifiziert werden. Trotzdem benötigt das Input-Feld zwingend einen accName. Dafür gibt es drei Möglichkeiten:

<!-- .visually-hidden for the label -->
<!-- pro: braucht kein ARIA -->
<!-- pro: if the CSS doesn't work, the label is shown, which is always a usability win -->
<form role="search">
  <div>
    <label for="searchInput" class="visually-hidden">Search</label>
    <input id="searchInput" type="search" inputmode="search">
  </div>
  
  <input type="submit" value="Search">
</form>
<!-- aria-labelledby -->
<!-- go-to-method -->
<form role="search">
  <div>
    <input id="searchInput" type="search" inputmode="search" aria-labelledby="search-submit">
  </div>
  
  <input id="search-submit" type="submit" value="Search">
</form>
<!-- aria-label -->
<!-- contra: aria-label doesn't translate well -->
<form role="search">
  <div>
    <input id="searchInput" type="search" inputmode="search" aria-label="Search">
  </div>
  
  <input type="submit" value="Search">
</form>

Benutze niemals das placeholder-Attribut!

Platzhaltertext anstelle von Labels zu verwenden verursacht ernsthafte Accessibility und Usability Probleme. Argumentationshilfe: Don't use the placeholder attribute by Eric Bailey

Platzhaltertext

  • verschwindet beim Schreiben, das verletzt SC 3.3.2 (siehe oben).
  • hat zu geringen Kontrast. Wenn dieser aber hoch genug ist, sieht es aus, als ob das Feld bereits ausgefüllt ist. Das ist verwirrend.
  • wird nicht automatisch übersetzt - Probleme bei Übersetzung der Seite

Weitere Instruktionen außerhalb des Labels bereitstellen

Bsp: Hinweise, wie das Passwort aussehen muss: Informationen außerhalb des Labels bereitstellen und mit dem Label mittels aria-describedby verbinden. Bedenke: dieser Text ist ein flat string! Listen werden damit vom Screenreader nicht unterstützt!

Verwandte Formularfelder gruppieren

Beispiele: Wähle eine T-Shirt-Farbe!
Wenn ich identische Eingabefelder habe, z.B. für eine Rechnungs- und eine Lieferadresse, dann müssen diese Felder jeweils gruppiert werden und einen accName bekommen, damit der User sie auseinanderhalten kann.
Das <fieldset>-Element erhält seinen accName aus einer Legende (caption) – das erste direkte <legend>-Kind-Element, des <fieldset>-Elements.
Wichtig: gleiches name-Attribut für alle Optionen der Gruppe – Screenreader nennt die Anzahl (wie bei Listenelementen)!

Accessible name computation:
<fieldset> siehe siehe hier

Gruppieren mit ARIA - wenn fieldset nicht möglich ist

role="group" und aria-labelledby – sollte generell vermieden werden.

Weitere Identifizierung des Eingabezwecks

Relevante Success Criteria

SC 1.3.5 Identify input purpose (Level AA)
The purpose of each input field collecting information about the user can be programmatically determined when: ...

Dafür verwenden wir das autocomplete-Attribut. Das ist die zur Zeit einzige Möglichkeit, um Eingabezwecke in HTML bereitzustellen. Was macht das? Solche Felder können automatisch ausgefüllt werden, oder speziell angepasst werden, z.B. mit Icons (Telefon, Geburtstagstorte, ...). Das Attribut erlaubt fixe Werte – siehe Link in Contao.

Formulare besser nutzbar machen mit spezifiziertem Input-Modus

inputmode macht die Eingabe auf Mobilgeräten leichter. Browser präsentieren dann ein passendes virtuelles Keyboard.
Build a better mobile input by Alex Holachek.

Links