Verbesserung der Semantik von Formular-Titeln und Beschreibungen mit HTML-Attributen
- Einleitung
- Das label-Element
- Das fieldset- und legend-Element
- Das aria-describedby-Attribut
- Das title-Attribut
- Das aria-label-Attribut
- Fazit
Einleitung
Die semantische Auszeichnung von Formularen ist wichtig, um die Benutzerfreundlichkeit zu erhöhen und insbesondere die Zugänglichkeit für Menschen mit Behinderungen zu verbessern. HTML bietet dafür verschiedene Attribute und Elemente, die Formular-Titel und Beschreibungen sinnvoll strukturieren und zugänglich machen.
Das label-Element
Das label-Element ist zentral, um Eingabefelder zugänglich zu machen. Es beschreibt ein Formularfeld und verknüpft die Beschreibung direkt mit dem entsprechenden Eingabefeld. Dies erhöht die Bedienbarkeit für Screenreader und erleichtert das Klicken auf das Eingabefeld. Ein label kann entweder das Eingabefeld umfassen oder über das Attribut for mit der ID des Eingabefeldes verbunden werden.
Das fieldset- und legend-Element
Für die Gruppierung mehrerer zusammengehörender Formularfelder verwendet man das fieldset-Element, das einer optischen und semantischen Gruppierung dient. Der Titel dieser Gruppe wird über das legend-Element gesetzt. Dieses liefert eine passende Überschrift für die Gruppe und wird von Screenreadern erkannt, wodurch die Struktur des Formulars klarer wird.
Das aria-describedby-Attribut
Wenn eine Beschreibung für ein Formularfeld über ein reines Label hinausgehen soll, etwa Hilfetexte oder zusätzliche Erläuterungen, kann das Attribut aria-describedby verwendet werden. Es verweist auf ein weiteres Element, das die ergänzende Beschreibung enthält. Screenreader lesen diesen Text zusätzlich zum Label vor und verbessern so das Verständnis des Formularfeldes.
Das title-Attribut
Das title-Attribut kann ebenfalls ergänzende Informationen bereitstellen, die als Tooltip erscheinen. Allerdings ist es im Hinblick auf die Zugänglichkeit weniger zuverlässig, da nicht alle Nutzer den Tooltip sehen oder ihn von Screenreadern vorgelesen bekommen.
Das aria-label-Attribut
Wenn kein sichtbares Label vorhanden ist, kann das Attribut aria-label ein alternatives Label für Screenreader bereitstellen. Es wird direkt am Eingabefeld angebracht und beschreibt diesen ohne sichtbaren Text. Dies ist nützlich, wenn das Layout keine sichtbaren Label zulässt.
Fazit
Zur Verbesserung der Semantik von Formular-Titeln und Beschreibungen sind also vor allem das label-Element und die Kombination aus fieldset mit legend zentral. Ergänzende Beschreibungen sollten über aria-describedby verlinkt werden. Die Attribute aria-label und title können in speziellen Fällen ergänzend eingesetzt werden. Durch diese semantischen Auszeichnungen wird die Zugänglichkeit und Verständlichkeit von Formularen wesentlich verbessert.