Sollte ich Arial-Label oder ein Label-Element, das visuell versteckt ist, verwenden

Question

Ich erstelle ein Suchformular, das zwei Elemente ein Eingabefeld und eine Schaltfläche hat. Dem Eingabefeld ist keine Beschriftung zugeordnet.

Um das Feld zugänglicher zu machen, kann ich hinzufügen <label for="searchfield">Search</label> und visuell ausblenden, so wird es z. für Screenreader zugänglich sein.

Ich könnte auch hinzufügen aria-label="search" zu dem Eingabefeld und lassen Sie das Eingabefeld ohne eine Bezeichnung.

Ich habe mit "Voice Over" auf einem Mac getestet und ich bekomme das gleiche Ergebnis/Ausgabe. Meine Frage ist, sind diese Ansätze gleichwertig? Oder ist eine Herangehensweise besser als die andere?

Hier ist ein pen.

Answer 1

In Abwesenheit Kenntnis von der Stelle von (?, Wie andere Formularfelder markiert sind) oder das Publikum (was ist ihr Qualifikationsniveau oder Tech-Profil?), Ich diese Fragen mit ein paar Parameter nähern:

1. die Regeln der ARIA
2. Progressive Enhancement (die first rule kann hier gelten)

aber sagen, dass ich eine Seite ohne ARIA kodieren oft und ohne CSS (wie blockiert werden kann, gestückelt, etc.) und stellen Sie sicher, dass es zugänglich ist.

Das bedeutet ich Code <label>. Dann verstecke ich es visuell. Wenn das CSS bricht, ist alles noch gut. Wenn der Bildschirmleser des Benutzers ARIA nicht unterstützt, ist alles noch in Ordnung. Abgesehen davon, wenn Sie glauben, dass alle Bildschirmleser Ihrer Benutzer ARIA unterstützen, empfehle ich Ihnen, eine technische Bewertung der Benutzer vorzunehmen (lokale Blindverbände sind ein guter Anfang, wenn keine echten Benutzer vorhanden sind). Viele Leute führen immer noch ältere Versionen von Browsern und SRs.

Für sehende Benutzer stelle ich sicher, dass ich mich auf kontextbezogene Hinweise stütze, wie ein klares Suchsymbol (oder das Wort) in der Schaltfläche (als Unor-Referenzen). Oder vielleicht eine placeholder mit entsprechendem Kontrast (obwohl Sie die <label> als visuellen Platzhalter mit einigen CSS-Tricks verwenden könnten, um es im Fokus zu verstecken).

Wenn Ihre Absenden-Schaltfläche SVG verwendet, würde ich ARIA in die inovative Unterstützung um SVG alternative Textmethoden falten.

FWIW, ich bin auch kein Fan des title Attributs, teils wegen inkonsistenter Namensberechnung und teils weil ich denke es sieht meh aus.

Also, Ihre Fragen zu beantworten:

Meine Frage ist, sind diese Ansätze gleichwertig?

Nein, aber der Abstand zwischen ihnen schrumpft.

Oder ist eine Herangehensweise besser als die andere?

Das hängt vom Kontext ab, den wir nicht haben.

Answer 2

Ich glaube, dass aria-label="search" der richtige Ansatz ist, da es saubere Markup erzeugt (das heißt keinen unnötiger label-Tag) und keine Notwendigkeit für CSS Sichtbarkeit des Etiketts zu setzen - wie in this example.

Ich glaube, ein label mit CSS verstecken ist ein etwas "hacky" Weg, um das Problem zu nähern, während ARIA der Standard für zugänglich Markup ist, so sollte es die offensichtliche Wahl für Situationen wie diese sein.

Auf der anderen Seite würde es sich lohnen sicherzustellen, dass alle Browser, die Sie unterstützen möchten, ARIA korrekt verwenden können, und wenn nicht, lohnt es sich, die label-Methode zu verwenden, um die Kompatibilität zwischen allen Browsern zu gewährleisten. Obwohl ich denke, dass die Unterstützung in diesen Tagen ziemlich gut ist, sollte dies kein allgemeines Szenario sein.

Answer 3

Die Verwendung von aria-label ist besser als CSS, um ein label Element zu verbergen.

(Verwandte Technik: Using aria-label to provide an invisible label where a visible label cannot be used)

Aber beachten Sie, dass you don’t have to provide a label für eine Suchmaske, die nur aus dem Suchfeld besteht und die Absenden-Button. Unter der Annahme, dass Sie eine Schaltfläche verwenden, die etwa mit "Suchen" beschriftet ist, wird bereits deutlich, welchen Zweck das Textfeld hat.

(Verwandte Technik: Using an adjacent button to label the purpose of a field)

In diesem Fall, während es keine Etikett, soll es noch einen Namen bekommen muss. Eine Möglichkeit, einen Namen anzugeben, besteht darin, das title-Attribut für das Element input zu verwenden. Die Technik Using the title attribute to identify form controls when the label element cannot be used zeigt dies (ein Suchformular ohne Label, mit title Attribut auf input) in example 3.