Formulare

Ein Formular ist ein Element, mit dem Nutzende Daten in einem Feld oder einer Gruppe angeben können von Feldern. Formulare können so einfach wie ein einzelnes Feld oder so kompliziert wie ein mehrstufiges Formularelement mit mehreren Feldern pro Seite, Eingabevalidierung und manchmal ein CAPTCHA.

Formulare gehören zu den schwierigsten Elementen, die sich direkt aus einem Perspektive der Barrierefreiheit, denn sie erfordern Kenntnisse über alle Elemente, sowie zusätzliche Regeln speziell für Formulare. Mit einigen Verständnis und Zeit haben, können Sie ein barrierefreies Formular erstellen, das zu Ihnen und Nutzenden.

Formulare ist das letzte komponentenspezifische Modul in diesem Kurs. In diesem Modul lernen Sie, konzentrieren Sie sich auf die formularspezifischen Richtlinien, in den vorherigen Modulen besprochen, Inhaltsstruktur Tastaturfokus und Farbkontrast, gelten auch für die Form Elemente.

Felder

Das Backbone von Formularen sind Felder. Felder sind kleine interaktive Muster, ein Eingabe- oder Optionsfeldelement, mit dem Nutzende Inhalte eingeben oder eine große Auswahl. Es gibt eine Vielzahl von Formularfeldern, auswählen.

Die Standardempfehlung ist, etablierte HTML-Muster zu verwenden, Wir entwickeln mit ARIA etwas Individuelles, da bestimmte Funktionen und Funktionalitäten – wie z. B. Feldstatus, Eigenschaften und Werte – in die HTML-Elemente integriert, während Sie benutzerdefinierte ARIA manuell hinzufügen müssen.

<div role="form" id="sundae-order-form">
  <!-- form content -->
</div>

<form id="sundae-order-form">
  <!-- form content -->
</form>

Neben der Auswahl barrierefreier Formularfeldmuster, in denen sollten Sie auch Attribute für die automatische Vervollständigung von HTML in Ihre Felder ein. Das Hinzufügen von Attributen zur automatischen Vervollständigung ermöglicht eine detailliertere Vervollständigung Definition oder Identifizierung des Zwecks bis hin zu User-Agents und Hilfstechnologien.

Mit Attributen zur automatischen Vervollständigung können Nutzer visuelle Präsentationen personalisieren, z. B. ein Geburtstagskuchensymbol in einem Feld mit der automatischen Vervollständigung für den Geburtstag. Attribut (bday) zugewiesen. Im Allgemeinen sorgen Attribute für die automatische Vervollständigung dafür, schneller und einfacher Formulare ausfüllen. Das ist besonders hilfreich für Menschen, Menschen mit kognitiven Störungen, Lesestörungen und Personen, die ATs wie dem Bildschirm Lesern.

<form id="sundae-order-form">
  <p>Name: <input type="name" autocomplete="name"></p>
  <p>Telephone: <input type="tel" autocomplete="tel"></p>
  <p>Email address: <input type="email" autocomplete="email"></p>
</form>

Schließlich sollten Formularfelder keine kontextbezogenen Änderungen verursachen, wenn sie oder Nutzereingaben, es sei denn, die Nutzenden wurden zuvor mithilfe der Komponente. Beispielsweise sollte ein Formular nicht automatisch gesendet werden. Ein Feld wird hervorgehoben oder wenn ein Nutzer dem Feld Inhalte hinzufügt.

Labels

Labels informieren Nutzende über den Zweck eines Felds. Ist das Feld erforderlich, Außerdem können Sie Informationen zu Feldanforderungen bereitstellen, z. B. Format. Labels müssen jederzeit sichtbar sein und das Formular genau beschreiben an Nutzer übergeben.

Einer der Grundprinzipien für barrierefreie Formen besteht darin, Verbindung zwischen einem Feld und seiner Beschriftung. Dies gilt sowohl für visuelle und programmatisch. Ohne diesen Kontext weiß die nutzende Person möglicherweise nicht, wie sie füllen Sie die Felder im Formular aus.

<form id="sundae-order-form">
  <p><label>Name (required): <input type="name" autocomplete="name" required></label></p>
  <p><label>Telephone (required): <input type="tel" autocomplete="tel" required></label></p>
  <p><label>Email address: <input type="email" autocomplete="email"></label></p>
</form>

Darüber hinaus müssen zugehörige Formularfelder wie die Postanschrift programmatisch und visuell gruppiert. Eine Methode besteht darin, um ähnliche Elemente zu gruppieren.

Textzeilen

Feldbeschreibungen ähneln Labels insofern, als sie für um mehr Kontext zum Fachgebiet und zu den Anforderungen zu geben. Feldbeschreibungen sind nicht für Barrierefreiheit erforderlich, wenn die Labels oder die Anleitung für das Formular beschreibend sind ausreichend.

Es gibt jedoch Situationen, in denen zusätzliche Informationen nützlich sind. um Fehler im Formular zu vermeiden, z. B. die Weitergabe von Informationen zur Mindestlänge ein Passwortfeld eingeben oder dem Nutzer mitteilen, welches Kalenderformat er verwenden soll (z. B. im Format MM-TT-JJJJ).

Es gibt viele verschiedene Methoden, um Feldbeschreibungen zu erstellen. Eine der besten Methoden ist das Hinzufügen eines aria-beschrieben von <label>-Element hinzu. Das Display lesen Leser sowohl die Beschreibung als auch das Label.

Wenn Sie den Parameter ARIA-Label für zu Ihrem Element hinzufügen, überschreibt der Attributwert den Text in Ihren <label> Testen Sie den endgültigen Code wie immer mit allen ATs, die Sie unterstützen möchten.

Fehler

Beim Erstellen barrierefreier Formulare gibt es viele Möglichkeiten, zu verhindern, Fehler im Formular zu machen. Zu Beginn dieses Moduls haben wir die Auszeichnung Felder, das Erstellen von identifizierenden Labels und das Hinzufügen detaillierter Beschreibungen möglich. Aber egal wie klar Ihr Formular für Sie ist, macht dann einen Fehler.

Wenn ein Formularfehler auftritt, besteht der erste Schritt darin, den Fehler zu melden. Das Feld, in dem der Fehler aufgetreten ist, muss klar identifiziert werden und der Fehler muss für den Nutzer in Textform beschrieben werden.

Es gibt verschiedene Methoden zum Anzeigen von Fehlern Nachrichten wie:

• Ein modales Pop-up-Fenster in der Nähe der Stelle, an der der Fehler aufgetreten ist
• Eine Sammlung von Fehlern, die in einer größeren Meldung oben auf der Seite gruppiert sind

Achten Sie auf den Tastaturfokus. und Optionen für Live-Regionen von ARIA wenn Sie Fehler ankündigen.

Mach dem Nutzer nach Möglichkeit einen detaillierten Vorschlag, wie er das Problem beheben kann. Fehler. Es gibt zwei Attribute, um Nutzer über Fehler zu informieren.

• Sie können das HTML-Attribut required verwenden. Der Browser zeigt dann eine allgemeine Fehlermeldung auf Basis der gespeicherten Validierungsparameter an.
• Sie können auch das Attribut aria-required verwenden, um eine benutzerdefinierte Fehlermeldung an ATs weiterzugeben. Nur ATs erhalten die Nachricht, es sei denn, Sie fügen zusätzlichen Code hinzu, um die Nachricht für alle Nutzer sichtbar zu machen.

Wenn ein Nutzer der Meinung ist, dass alle Fehler behoben sind, geben Sie ihm die Möglichkeit, die Anfrage noch einmal einzureichen das Formular ausfüllen und Feedback zu den Ergebnissen geben. Fehler teilt dem Nutzer mit, dass er weitere Aktualisierungen vornehmen muss, während eine Erfolgsmeldung bestätigt, dass alle Fehler behoben und das Formular erfolgreich gesendet wurde.

Wissen testen

Testen Sie Ihr Wissen über barrierefreie Formulare