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.

So kombinieren Sie ein Etikett und einen Eingang

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

-Element verwendet, um bestimmte Eingabelemente wie Optionsfelder zu gruppieren, und dient als zug?ngliches Etikett für die gesamte Gruppe.

Nicht alle Eing?nge ben?tigen Etiketten

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 und <select> Elemente, sind mit einem Etikett Begleiter am glücklichsten.</select>

Was geht in ein Etikett

Der Inhalt, der in ein Etikett geht, sollte:

• Beschreiben Sie seinen Begleiteingang. Ein Etikett m?chte jedem zeigen, dass es zu seinem Input -Partner geh?rt.
• Sichtbar sein. Ein Etikett kann angeklickt oder abgebildet werden, um seine Eingabe zu fokussieren. Der zus?tzliche Speicherplatz, den es bietet, um mit der Eingabe zu interagieren, ist von Vorteil, da er den Tippen oder das Klicken auf das Ziel erh?ht. Wir werden uns ein wenig mehr darauf einlassen.
• Nur einfacher Text enthalten. Fügen Sie keine Elemente wie überschriften oder Links hinzu. Auch hier gehen wir in das ?Warum“ dahinter weiter.

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 wie erwartet. Anschlie?end k?nnen wir dem Benutzer einen Hinweis darauf geben, dass das Datum in einem bestimmten Format in Form eines zwischen der Etikett und der Eingabe, die diese Anforderung angibt, in einem bestimmten Format eingegeben werden muss. Der Hinweis gibt nicht nur das Datumsformat an, sondern hat auch einen ID-Wert, der einem ARIA-beschriebenen Attribut für die Eingabe entspricht.

 
<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.

Best Practices für eine gesunde Beziehung

Die folgenden Tipps gehen über die Grundlagen hinaus, um zu erkl?ren, wie ein Etikett und Eingaben so glücklich sind wie m?glich.

Do: Fügen Sie ein Etikett am richtigen Ort hinzu

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.

Do: überprüfen Sie die Eing?nge mit einem Bildschirmleser

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:

• Alle relevanten Attribute existieren - insbesondere die übereinstimmenden Werte der für und ID -Attribute.
• Das DOM entspricht der visuellen Reihenfolge.
• Der Etikett Text klingt klar. Zum Beispiel wird ?DD-MM-Yyyy“ unterschiedlich zu seinem Gro?buchstaben (DD-MM-Yyyy) vorgelesen.

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.

Do: Machen Sie das Etikett sichtbar

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.

Was zu vermeiden ist

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.

Nicht: Erwarten Sie in jedem Browser, dass Ihre Eingabe gleich ist

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 ¹ (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.

Nicht: Ersetzen Sie ein Etikett durch einen Platzhalter

Hier ist der Grund, warum ein Platzhalterattribut für eine Eingabe anstelle eines Etiketts nicht verwendet werden sollte:

• Nicht alle Bildschirmleser geben Platzhalter an.
• Der Wert eines Platzhalters besteht darin, auf kleineren Ger?ten abzuschneiden oder wenn eine Seite im Browser übersetzt wird. Im Gegensatz dazu kann der Textinhalt eines Etiketts problemlos auf eine neue Zeile einwickeln.
• Nur weil ein Entwickler den hellgrauen Platzhaltertext auf seinem gro?en Retina-Bildschirm in einem gut beleuchteten Raum in einer ablenkungsfreien Umgebung sehen kann, hei?t das nicht, dass jeder andere. Ein Platzhalter kann sogar diejenigen mit guter Sicht machen, die ihre Augen hochtreiben und schlie?lich eine Form aufgeben.

• Sobald ein Charakter in einen Eingang eingegeben wurde, wird sein Platzhalter unsichtbar - sowohl visuell als auch auf Screen -Leser. Wenn jemand zurückverfolgt muss, um Informationen zu überprüfen, die er in einem Formular eingegeben hat, müssten er l?schen, was eingegeben wurde, nur um den Platzhalter erneut zu sehen.
• Das Platzhalterattribut wird in IE 9 und unten nicht unterstützt und verschwindet, wenn eine Eingabe auf IE 11 fokussiert ist. Eine weitere zu beachten: Die Platzhalterfarbe kann mit CSS in IE 11 nicht angepasst werden.

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.

Nicht: Ersetzen Sie ein Etikett durch ein anderes Attribut oder ein anderes Element

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 -Element ersetzt, das nicht semantisch mit dem Eingang verbunden ist.

 <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.

Nicht: Stellen Sie interaktive Elemente in Etiketten ein

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.

Beispiele im wirklichen Leben

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.

Komponentenbibliothek: Material

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,:

• Es gibt keine M?glichkeit, das Etikett au?erhalb der Eingabe zu haben, um einen erh?hten interaktiven Bereich für die Fokussierung der Eingabe zu bieten.
• Es gibt eine Option, um einen Hinweis hinzuzufügen, wie wir zuvor gesehen haben. Leider ist der Hinweis nur mit der Eingabe über die N?he und nicht über eine übereinstimmende ID und eine Aria-geschriebene Zeit verbunden. Dies bedeutet, dass nicht alle Bildschirmleser in der Lage sind, die Helper -Nachricht mit der Eingabe zu verknüpfen.
• Das Etikett befindet sich hinter der Eingabe im DOM, wodurch die visuelle Reihenfolge falsch ist.
• Der leere Eingang sieht aus, als w?re er bereits ausgefüllt, zumindest solange er nicht aktiv ist.
• Das Etikett gleitet nach oben, wenn der Eingang geklickt wird, sodass sie für diejenigen, die eine reduzierte Bewegung bevorzugen, ungeeignet sind.

Adam Silver erkl?rt auch, warum Float -Etiketten problematisch sind und in eine detaillierte Kritik des Texteingangsdesigns des Materialiens geraten.

Website: HuffPost

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:

• Das Fehlen eines Etiketts bedeutet ein kleineres Klick oder Tippen Sie auf das Ziel. Anstelle eines Etiketts befindet sich ein ARIA-Label-Attribut für die Eingabe.
• Die Schriftgr??e des Platzhalters und der Eingabewerte ist ein winziger 11px, der schwer zu lesen ist.
• Die gesamte Eingabe verschwindet ohne JavaScript, was bedeutet, dass die Leute keine M?glichkeit haben, sich beim Newsletter anzumelden, wenn JavaScript deaktiviert oder kaputt ist.

Schlie?ende Bemerkungen

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.

Danke

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!

Fu?noten

• ¹ Der DatePicker ist in iOS 14 gut unterstützt und sehr nett. Man würde sich vorstellen, dass eine MacOS -Version am Horizont sein 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!