Die meisten Eingaben haben etwas gemeinsam - sie sind mit einem Begleitetikett am glücklichsten! Und das Glück hört hier nicht auf. Formulare mit geeigneten Inputs und Etiketten sind für Menschen viel einfacher zu verwenden, und das macht auch die Menschen glücklich.
In diesem Beitrag möchte ich mich auf Situationen konzentrieren, in denen das Fehlen eines semantischen Etiketts und der Input -Kombination es für alle möglichen Menschen viel schwieriger macht, Formulare zu vervollständigen. Da Millionen von Menschenlebensunterlagen auf Formen angewiesen sind, gehen wir in die besten Tipps, die ich kenne , um eine erfüllende und harmonische Beziehung zwischen einem Eingang und einem Etikett zu schaffen.
Inhaltswarnung: In diesem Beitrag sind Themen der Liebe und Beziehungen.
Die Liebesgeschichte beginnt hier! Lassen Sie uns die Grundlagen für das Erstellen von glücklichen Beschriftungen und Eingaben abdecken.
Es gibt zwei Möglichkeiten , ein Etikett und einen Eingang zu kombinieren. Einer erfolgt durch ein Eingabe der Eingabe in eine Etikett (implizit), und das andere wird durch Hinzufügen eines Attributs zur Etikett und einer ID zur Eingabe (explizit) ein Attribut hinzugefügt.
Stellen Sie sich ein implizites Etikett als Eingabe vor und ein explizites Etikett neben einem Eingang und Halten der Hand.
<label> Name: <eingabe type="text" name="name"></eingabe> </label>
Ein explizites Etikett für den Attributwert muss mit dem ID -Wert seiner Eingabe übereinstimmen. Wenn beispielsweise einen Namenswert hat, sollte die ID auch einen Namenswert haben.
<label f> Name: </label> <eingabe type="text" name="name"></eingabe>
Leider wird ein implizites Etikett von allen assistiven Technologien nicht korrekt behandelt, auch wenn für und ID -Attribute verwendet werden. Daher ist es immer die beste Idee, ein explizites Etikett anstelle eines impliziten Etiketts zu verwenden.
<label> Name: <eingabe type="text" name="name"></eingabe> </label> mit einer Eingabe verbunden <label f label-name> Name: </label> <eingabe type="text" name="name"></eingabe>
Jedes separate Eingangselement sollte nur mit einer Etikett gepaart werden. Und ein Etikett sollte nur mit einem Eingang gepaart werden. Ja, Eingänge und Etiketten sind monogam. ♥ ️
Hinweis: Es gibt eine Ausnahme von dieser Regel: Wenn wir mit einer Gruppe von Eingängen arbeiten, sagen Sie mehrere Optionsfelder oder Kontrollkästchen. In diesen Fällen wird ein
Eine Eingabe mit einer Schaltfläche "type =" subieren "oder type =" "benötigt kein Etikett - das Wert -Attribut fungiert stattdessen als zugänglicher Beschriftungstext. Eine Eingabe mit Typ = "Hidden" ist auch ohne Etikett in Ordnung. Aber alle anderen Eingaben, einschließlich
Der Inhalt, der in ein Etikett geht, sollte:
Eine nützliche Sache, die Sie mit dem Inhalt in einem Etikett machen können, ist die Hinzufügen von Formatierungshinweise. Beispielsweise ist die Etikett für
<label f> Startdatum </label> <pan> (dd-mm-yjyy): <eingabe type="Datum" aria-beschriebenby="Date-format" min="2021-03-01" max="2031-01-01"></eingabe></pan>
Auf diese Weise erhalten wir den Vorteil eines klaren Etiketts, das beschreibt, wofür die Eingabe gilt, und einen Bonus -Hinweis auf den Benutzer, dass die Eingabe in einem bestimmten Format eingegeben werden muss.
Die folgenden Tipps gehen über die Grundlagen hinaus, um zu erklären, wie ein Etikett und Eingaben so glücklich sind wie möglich.
Es gibt ein WCAG -Erfolgskriterium, bei dem die visuelle Reihenfolge einer Seite der Reihenfolge folgen sollte, in der Elemente im DOM erscheinen. Das liegt daran, dass:
Ein Benutzer mit Low Vision, der in Kombination mit einem Bildschirmleser einen Bildschirm -Vergrößerung verwendet, kann verwirrt sein, wenn die Leserreihenfolge auf dem Bildschirm herumspringt. Ein Tastaturbenutzer hat möglicherweise Schwierigkeiten zu prognostizieren, wo der Fokus als nächstes liegt, wenn die Quellordnung nicht mit der visuellen Reihenfolge übereinstimmt.
Denken Sie darüber nach. Wenn wir ein Standard -HTML haben, bei dem das Etikett vor der Eingabe kommt:
<label for="orange"> orange </label> <eingabe type="CheckBox" name="orange"></eingabe>
Dadurch wird das Etikett vor die Eingabe in die DOM gestellt. Nehmen wir jetzt an, unser Etikett und unser Formular befinden sich in einem flexiblen Behälter und wir verwenden CSS -Reihenfolge, um Dinge umzukehren, bei denen die Eingabe visuell vor dem Etikett erhältlich ist:
Etikett {Order: 2; }
Eingabe {Order: 1; }Ein Bildschirmleserbenutzer, der zwischen den Elementen navigiert, kann erwarten, dass der Eingang vor dem Etikett den Fokus erhält, da die Eingabe zuerst visuell kommt. Aber was wirklich passiert, ist stattdessen in den Fokus. Hier finden Sie den Unterschied zwischen dem Navigieren mit einem Bildschirmleser und einer Tastatur.
Wir sollten uns dessen bewusst sein. Es ist konventionell, das Etikett auf der rechten Seite des Eingangs für Kontrollkästchen und Optionsfelder zu platzieren. Dies kann erfolgen, indem das Etikett nach der Eingabe in das HTML platziert wird, um sicherzustellen, dass die DOM- und die visuelle Reihenfolge übereinstimmt.
Unabhängig davon, ob eine Eingabe von Grund auf neu geschrieben oder mit einer Bibliothek erzeugt wird, ist es eine gute Idee, Ihre Arbeiten mit einem Bildschirmleser zu überprüfen. Dies soll sicherstellen:
In den letzten Jahren habe ich JavaScript -Bibliotheken wie Downshift verwendet, um komplexe Formularelemente wie Autocomplete oder Comboboxe auf nativen HTML -HTML -, wie Eingaben oder Auswahl zu erstellen. Die meisten Bibliotheken machen diese komplexen Elemente zugänglich, indem sie mit JavaScript Aria -Attribute hinzufügen.
Die Vorteile nativer HTML -Elemente, die mit JavaScript verbessert werden, gehen jedoch vollständig verloren, wenn JavaScript unterbrochen oder deaktiviert ist, was sie unzugänglich macht. Überprüfen Sie dies dies und geben Sie eine servergerenderte Alternative ohne JavaScript als sichere Fallback an.
Schauen Sie sich diese grundlegenden Formulartests an, um festzustellen, wie ein Eingang und seine Begleitetika oder Legende von verschiedenen Bildschirmlesern geschrieben und angekündigt werden sollen.
Das Anschließen eines Etiketts und einer Eingabe ist wichtig, aber genauso wichtig ist es, das Etikett sichtbar zu halten. Wenn Sie auf ein sichtbares Etikett klicken oder tippen, konzentriert sich der Eingabepartner. Dies ist ein einheimisches HTML -Verhalten, das einer großen Anzahl von Menschen zugute kommt.
Stellen Sie sich ein Etikett vor, das stolz seinen Zusammenhang mit einem Input zeigen möchte:
Das heißt, es wird Zeiten geben, in denen ein Design ein verstecktes Etikett fordert. Wenn also ein Etikett versteckt sein muss , ist es wichtig, dies auf zugängliche Weise zu tun. Ein häufiger Fehler ist die Verwendung von Display: Keine oder Sichtbarkeit: versteckt, um ein Etikett zu verbergen. Diese CSS zeigen Eigenschaften an, ein Element vollständig auszublenden - nicht nur visuell, sondern auch von Bildschirmlesern.
Erwägen Sie, den folgenden Code zu verwenden, um Beschriftungen visuell auszublenden:
/* Für nicht nativ fokussierbare Elemente. Für nativ fokussierbare Elemente */
/ * Use .visuell-versteckt: nicht (: fokus): nicht (: aktiv) */
.visuell versteckt {
Grenzbreit: 0! Wichtig;
Clip: Rect (1px, 1px, 1px, 1px)! Wichtig;
Höhe: 1PX! Wichtig;
Überlauf: versteckt! Wichtig;
Polsterung: 0! Wichtig;
Position: absolut! Wichtig;
weißer Raum: Nowrap! Wichtig;
Breite: 1PX! Wichtig;
}Kitty Giraudel erklärt eingehend, wie man Inhalte verantwortungsbewusst verbergt hat.
Um eine gesunde Beziehung zwischen Inputs und Etiketten zu bewahren und aufrechtzuerhalten, gibt es beim Koppeln einige Dinge nicht zu tun. Lassen Sie uns darauf eingehen, was diese sind und wie Sie sie verhindern können.
Es gibt bestimmte Arten von Eingängen, die in einigen älteren Desktop -Browsern nicht unterstützt werden. Beispielsweise wird eine Eingabe type = "Datum" im Internet Explorer (dh) 11 oder sogar in Safari 14 1 (veröffentlicht September 2020) nicht unterstützt. Eine Eingabe wie diese fällt auf type = "text" zurück. Wenn eine Datumseingabe kein klares Etikett hat und automatisch auf einen Texteingang in älteren Browsern zurückfällt, werden die Menschen möglicherweise verwirrt.
Hier ist der Grund, warum ein Platzhalterattribut für eine Eingabe anstelle eines Etiketts nicht verwendet werden sollte:
Platzhalter sind wie der Freund, der auftaucht, wenn alles perfekt ist, aber verschwindet, wenn Sie sie am dringendsten brauchen. Kombinieren Sie stattdessen eine Eingabe mit einem schönen, kontrastischen Etikett. Etiketten sind nicht schuppig und in 100% der Fälle den Eingaben loyal.
Die Nielsen Norman Group verfügt über einen ausführlichen Artikel, in dem erklärt wird, warum Platzhalter in Formgebern schädlich sind.
Wenn kein Etikett vorhanden ist, suchen einige Bildschirmleser nach benachbarten Text und geben dies statt. Dies ist ein Hit-and-Miss-Ansatz, da es möglich ist, dass ein Bildschirmleser keinen Text zum Ankündigen findet.
Das unten stehende Code -Beispiel stammt von einer echten Website. Das Etikett wurde durch ein
<div>
<pan> Kartennummer
<div>
<eingabe type="text" value="" name="cardnumber" maxlength="40">
</eingabe>
</div>
</pan>
</div>Der obige Code sollte neu geschrieben werden, um die Zugänglichkeit zu gewährleisten, indem die Spannweite durch ein Etikett mit für = "CardNumber" darauf ersetzt wird . Dies ist bei weitem die einfachste und robusteste Lösung, die den meisten Menschen zugute kommt.
Während ein Etikett durch eine Spannweite ersetzt werden könnte, die eine ID mit einem Wert hat, der mit dem Aria-markierten Attribut des Eingangs entspricht, können die Leute nicht auf die Span klicken, um die Eingabe auf die gleiche Weise zu fokussieren, wie es ein Etikett zulässt. Es ist immer am besten, die Kraft einheimischer HTML-Elemente zu nutzen, anstatt sie neu zu erfinden. Die Liebesgeschichte zwischen nativen Input- und Etikettelementen muss nicht neu geschrieben werden! Es ist großartig wie IS.
Nur einfacher Text sollte in ein Etikett enthalten sein. Vermeiden Sie es, Dinge wie Überschriften oder interaktive Elemente wie Links einzufügen. Nicht alle Bildschirmleser geben ein Etikett korrekt an, wenn es etwas anderes als einfacher Text enthält. Wenn jemand eine Eingabe fokussieren möchte, indem er auf das Etikett klickt, aber diese Etikette einen Link enthält, kann er versehentlich auf den Link klicken.
Ich finde immer, dass Beispiele im wirklichen Leben mir helfen, etwas richtig zu verstehen. Ich habe das Web gesucht und Beispiele für Etiketten und Eingaben aus einer beliebten Komponentenbibliothek und -webelle gefunden. Im Folgenden erkläre ich, wo die Elemente zu kurz kommen und wie sie verbessert werden können, um eine bessere Paarung zu gewährleisten.
Materialui ist eine React -Komponentenbibliothek, die auf Googles Designsystem basiert. Es enthält eine Texteingangskomponente mit einem schwimmenden Etikettmuster, das für viele Designer und Entwickler zu einer beliebten Anlaufstelle geworden ist:
Das Klicken auf die Eingabe fühlt sich reibungslos an und sieht toll aus. Aber das ist das Problem. Seine Eigenschaften sind meistens hauttiefe.
Zum Zeitpunkt des Schreibens dieses Beitrags umfassen einige Probleme, die ich mit dieser Komponente gefunden habe,:
Adam Silver erklärt auch, warum Float -Etiketten problematisch sind und in eine detaillierte Kritik des Texteingangsdesigns des Materialiens geraten.
Die HuffPost -Website enthält Artikel mit einem Newsletter -Abonnementformular:
Zum Zeitpunkt des Schreibens dieses Blog -Beitrags könnte die E -Mail -Eingabe, die HuffPost verwendet, von einer Reihe von Verbesserungen profitieren:
Eine überraschende Anzahl von Menschen kämpft darum, Informationen in schlecht konstruierte Inputs einzugeben. Diese Liste umfasst Menschen mit kognitiven, motorischen und körperlichen Behinderungen, Autismus -Spektrum -Erkrankungen, Hirnverletzungen und schlechter Sehvermögen. Andere Menschen, die sich kämpfen, sind diejenigen, die in Eile, in einer schlechten Verbindung, auf einem kleinen Gerät, auf einem alten Gerät und unter anderem mit digitalen Formen nicht vertraut sind.
Darüber hinaus gibt es zahlreiche Gründe, warum JavaScript in einem Browser brechen oder ausgeschaltet werden kann, was bedeutet, dass die Eingaben dysfunktional oder vollständig unzugänglich werden. Es gibt auch Personen, die in der Lage sind, eine Webseite anzusehen, aber möglicherweise eine Tastatur zusammen mit einem Bildschirmleser verwenden.
Die Nachricht, die ich vermitteln möchte, ist, dass Happy Etikett und Eingabepaare von entscheidender Bedeutung sind . Es spielt keine Rolle, ob Ihre Form schön ist, wenn sie unbrauchbar ist. Ich kann wetten, dass fast jeder lieber eine hässliche, aber benutzerfreundliche Form ausfüllen würde, anstatt ein hübsches, das Probleme verursacht.
Ich möchte den folgenden Leuten herzlich danken, dass sie mir bei diesem Beitrag geholfen haben: Eric Eggert, Adam Silver, Dion Dajka und Kitty Giraudel. Ihr kombiniertes Wissen zu Barrierefreiheit ist eine Kraft, mit der man rechnen muss!
Das obige ist der detaillierte Inhalt vonHTML -Eingaben und -bezeichnungen: Eine Liebesgeschichte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Ouyi-Handelsplattform-App
Implementierungsmethode für die Python-Online-Wiedergabefunktion
Was beinhaltet die Datenverschlüsselungsspeicherung?
Die Rolle der Validierungsfunktion
Datenwiederherstellung von Solid-State-Laufwerken
Was ist der Unterschied zwischen Webstorm und Idee?
Abfragemethode für Domainnamen der zweiten Ebene
Wie hoch ist das Überweisungslimit von Alipay?
Was soll ich tun, wenn eDonkey Search keine Verbindung zum Server herstellen kann?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
