Mehrere Beschreibungen für ein Formular angeben
- Beschreibung mit dem <legend>-Element
- Erweiterte Beschreibungen mit <p>- oder <div>-Elementen
- Barrierefreie Beschreibungen mit ARIA-Attributen
- Beispiel für mehrere Beschreibungen mit aria-describedby
- Fazit
In HTML ist es grundsätzlich möglich, ein Formular mit mehreren Beschreibungen zu versehen, indem verschiedene Elemente verwendet werden, die zusätzliche Informationen liefern. Allerdings gibt es keine direkte Möglichkeit, mehrere description-Attribute oder ähnliche Attribute für ein einziges Formularelement anzugeben. Stattdessen nutzt man semantische HTML-Elemente und Accessibility-Attribute, um unterschiedliche Beschreibungen zu strukturieren und anzubieten.
Beschreibung mit dem <legend>-Element
Bei Formularen, die in einem <fieldset> zusammengefasst sind, empfiehlt sich die Verwendung eines <legend>-Elements. Dieses Element liefert eine kurze und prägnante Beschreibung oder Überschrift für die Gruppe von Formularfeldern. Dies ist insbesondere für die Barrierefreiheit wichtig, da Screenreader die Gruppenstruktur erkennen und dem Benutzer vorlesen.
Erweiterte Beschreibungen mit <p>- oder <div>-Elementen
Neben der kurzen Beschreibung mittels <legend> oder <form>-Attributen können weitere erklärende Texte direkt im Formular mit normalen Textcontainer-Elementen wie <p> oder <div> eingefügt werden. Diese Texte können Hinweise zur Benutzung, Beispiele oder sonstige Erklärungen enthalten. Sie können an beliebiger Stelle innerhalb oder außerhalb des Formulars stehen und sind sichtbar für alle Nutzer.
Barrierefreie Beschreibungen mit ARIA-Attributen
Für Nutzer von Screenreadern ist es wichtig, dass Beschreibungen richtig zugeordnet werden. Das Attribut aria-describedby ermöglicht es, ein oder mehrere Elemente mit erklärendem Text anzugeben, die dann von Screenreadern vorgelesen werden. Das heißt, man kann mehrere IDs hinter aria-describedby als durch Leerzeichen getrennte Liste angeben, um mehrere Beschreibungen einzubinden.
Beispielsweise könnte ein <form> oder ein spezifisches Eingabefeld mehrere erklärende Texte referenzieren, indem diese Texte entsprechende id-Attribute erhalten und im aria-describedby-Attribut genannt werden.
Beispiel für mehrere Beschreibungen mit aria-describedby
<form id="kontakt-form" aria-describedby="form-summary form-instructions"> <p id="form-summary">Bitte füllen Sie das Formular vollständig aus.</p> <p id="form-instructions">Ihre Daten werden vertraulich behandelt.</p> <!-- Formularfelder hier --></form>
In diesem Beispiel enthält das Formular zwei separate Beschreibungen mit den IDs form-summary und form-instructions, die beide im aria-describedby-Attribut zusammengefasst werden. Screenreader nutzen diese Informationen, um dem Nutzer die Beschreibungen vorzulesen. So können mehrere Texte als zusätzliche Erklärungen innerhalb eines Formulars vermittelt werden.
Fazit
Zusammenfassend lässt sich sagen, dass es nicht möglich ist, mehrere Beschreibungen durch mehrere Attribute wie description direkt anzugeben. Stattdessen kombiniert man semantische HTML-Elemente wie <legend>, sichtbare erläuternde Texte und ARIA-Attribute wie aria-describedby, um mehrere verschiedene Beschreibungen für ein Formular bereitzustellen. Damit wird sowohl die Benutzerfreundlichkeit als auch die Barrierefreiheit verbessert.