Der Schlüssel zum Design von HTML5 -Formular -Barrierefreiheit besteht darin, Tags und Attribute korrekt zu verwenden, um die Barrierefreiheit zu verbessern. Zun?chst sollte jede Formsteuerung das und <legend> organisiert werden, um kontextbezogene Beschreibungen bereitzustellen. Wenn Sie diesen Schritten befolgen, stellt alle Benutzer das Formular reibungslos aus.

Formulare sind der zentrale Bestandteil der Webinteraktion, und Barrierefreiheit Design ist der Schlüssel, um sicherzustellen, dass alle Benutzer diese Funktionen reibungslos verwenden k?nnen. HTML5 bietet eine Vielzahl von Funktionen, um die Zug?nglichkeit von Formularen zu verbessern, aber nur indem Sie sie korrekt verwenden, k?nnen Sie Gruppen wie Sehbehinderung, Navigationsnutzern und mehr Tastaturnavigation und mehr helfen.

Verwenden Sie die Beschriftung und für/id richtig

Jede Formregelung (z. B. Eingabe, textarea, ausgew?hlt) sollte über das für das Attribut für das for das Attribut verbundene id des <label></label> zugeordnet werden. Dies hilft dem Bildschirmleser nicht nur, den Zweck der Kontrolle zu erkennen, sondern verbessert auch den Klickbereich und verbessert die Benutzerfreundlichkeit.

Zum Beispiel:

 <Label für = "E -Mail"> E -Mail -Adresse: </label>
<Eingabe type = "E -Mail" id = "E -Mail" name = "E -Mail">

Wenn der Benutzer auf den Text "E -Mail -Adresse" klickt, erh?lt das Eingabefeld automatisch den Fokus. Wenn die Korrespondenz zwischen for und id weggelassen wird, kann der Bildschirmleser den Tag -Inhalt m?glicherweise nicht korrekt vorlesen, was zu Schwierigkeiten beim Verst?ndnis führt.

Notiz:

• Ein Etikett sollte nur eine Kontrolle binden
• Verstecken Sie keine Beschriftungen und geben Sie keinen alternativen Text an (z. B. Platzhalter k?nnen Beschriftungen nicht ersetzen).

Verbessern Sie die mobile Erfahrung und die Erkennung von Hilfstechnologien mit dem richtigen Eingangstyp

HTML5 führt eine Vielzahl von Eingabetypen vor, wie email , tel , date , number usw. Obwohl das Erscheinungsbild in Desktop -Browsern m?glicherweise nicht viel unterschiedlich ist, werden verschiedene Soft -Tastatur -Layouts auf der mobilen Seite ausgel?st, was für die Benutzereingabe bequem ist.

Noch wichtiger ist, dass einige assistierende Technologien basierend auf Typen genauere Eingabeaufforderungen oder Verifizierungsmethoden bereitstellen k?nnen.

Zum Beispiel:

 <Eingabe type = "tel" id = "Telefon" name = "Telefon">

Dadurch wird die numerische Tastatur auf dem Telefon angezeigt, sodass die Eingabe der Telefonnummer einfacher wird.

Zu den g?ngigen Arten der empfohlenen Verwendung geh?ren:

• email : Wird für Postfacheingaben verwendet
• tel : Geeignet für die Telefonnummer
• url : Wird für URL verwendet
• date : Lassen Sie den Benutzer ein Datum ausw?hlen (beachten Sie die Kompatibilit?t)
• search : Wird für das Suchfeld mit klaren Schaltfl?chenstil verwendet

Achten Sie jedoch darauf, dass Sie sich jedoch nicht ganz auf die Standardverifizierung der Browser (wie das erforderliche Muster) verlassen. Es ist am besten, ARIA -Eigenschaften und benutzerdefinierte Fehleranforderungen zu kombinieren, um die Zug?nglichkeit zu verbessern.

Fehlereinweisungen und Statusinformationen müssen klar sein und k?nnen durch die Bildschirm -Lese -Software erkannt werden.

Wenn ein Benutzer einen Fehler beim Senden eines Formulars macht, muss die Fehlermeldung nicht nur angezeigt, sondern auch von einem Bildschirmleser gelesen werden. Es kann erreicht werden durch:

• Verwenden Sie aria-invalid="true" um ungültige Felder zu markieren
• Fügen Sie role="alert" neben der Fehlermeldung oder verwenden Sie aria-live -Bereich
• Binden Sie die Fehlermeldung mit dem entsprechenden Eingabefeld über aria-describedby Bind

Beispiel:

 <Label für = "Benutzername"> Benutzername: </label>
<input type = "text" id = "userername" name = "userername" aria-invalid = "true" aria-beschriebenby = "userername-reor">
<div id = "Benutzername-Error" ROLLE = "ALERT"> Benutzername kann nicht leer sein </div>

Auf diese Weise lesen der Bildschirmleser die Fehlermeldung automatisch vor, wenn sie sich auf das Eingabefeld konzentriert.

Darüber hinaus sollte die Fehlereinweisungen spezifisch und klar sein, z. B. "Bitte geben Sie eine 10-stellige Mobiltelefonnummer ein" hilfreicher als "Formatfehler".

Organisieren Sie komplexe Formstrukturen mit Fieldset und Legend

Für Kontrollgruppen, die mehrere Optionen enthalten (z. B. Optionsfelder, Kontrollk?stchen), sollten sie in <fieldset> verpackt werden und <legend> verwenden, um die Gesamtanweisungen zu erteilen. Dies ist für Bildschirmleser sehr wichtig, da der Legendinhalt jedes Mal, wenn Sie die Optionen wechseln, wiederholt gelesen wird, um dem Benutzer den Kontext zu verstehen.

Zum Beispiel:

 <Fieldset>
  <Legende> Ihre Pr?ferenz -Kontaktinformationen: </legend>
  <Eingabe type = "radio" id = "contact-email" name = "contact" value = "mail">
  <label für = "contact-email"> mail </label>

  <Eingabe type = "radio" id = "contact-phone" name = "contact" value = "telefon">
  <Label für = "Kontakt-Telefon"> Tel </label>
</fieldset>

Wenn Fieldset/Legend nicht verwendet wird, kann der Bildschirmleser jeden Optionsfeld unabh?ngig verarbeiten, wobei der Kontext fehlt und Verwirrung verursacht.

Grunds?tzlich diese Schlüsselpunkte. Es ist eigentlich nicht kompliziert, für HTML5-Formulare gute Arbeit zu leisten, aber viele Details sind leicht zu übersehen. Solange von Anfang an die Zug?nglichkeit berücksichtigt wird, k?nnen alle Benutzer die Formulare reibungslos ausführen.

Das obige ist der detaillierte Inhalt vonZug?nglichkeitsrichtlinien für HTML5 -Formulare. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!