Umsetzung

• 

  Gib Formularfeldern einen Namen

  Formularfelder (<input>) haben von sich aus keinen Namen im Accessibility-Tree. Deswegen braucht es einen Text, der programmatisch mit dem Input verknüpft ist. Der empfohlene Weg dafür ist, ein <label> zu nutzen:

  <label for="firstname">First name:</label> 
<input id="firstname" name="firstname" type="text">

  Ein <label> ist allerdings nicht immer möglich. Dann kann es mit aria-label oder aria-labelledby passieren. Das kann bei einem Slider der Fall sein:

  <p>Bitte wähle die <span id=”slider-label">Anzahl der Tage.</span></p>
<div id="mysldr" role="slider" aria-labelledby="slider-label"></div>

  WCAG-Technik(en) in Englisch:

  • H44: Verwenden von Label-Elementen zum Verknüpfen von Textbeschriftungen mit Formularsteuerelementen
  • ARIA16: Verwendung von „aria-labelledby“, um Steuerelementen der Benutzeroberfläche einen Namen zu geben

• 

  Gruppiere zusammengehörende Formularfelder

  Formularfelder wie Checkboxen und Radio-Groups, die zusammengehören und visuell gruppiert sind, müssen auch programmatisch als eine Einheit ermittelbar sein. 

  Dazu müssen sie als <fieldset> oder als <div>, mit der role="group" ausgezeichnet sein.

  Wenn es für das Verständnis der Gruppe wichtig ist, benötigt die Gruppe außerdem eine Beschriftung. Bei einem <fieldset> passiert das über <legend>. Bei einem <div> mit der role="group" braucht es eine Überschrift, die mit einem aria-labelledby verknüpft ist.

  Die einzelnen <input>-Felder benötigen zusätzlich ein verknüpftes <label>.

  WCAG-Technik(en) in Englisch:

  • H71: Beschreibung von Gruppen von Formularen mithilfe von fieldset- und legend-Elementen
  • ARIA17: Verwendung von Gruppierungsrollen zur Identifizierung verwandter Formulare