Was ist neu in WCAG 2.1: Etikett im Namen

WCAG 2.1, das 2018 veröffentlicht wurde, führte mehrere neue Erfolgskriterien ein und verbesserte die Zugänglichkeit von Webs. Dieser Artikel konzentriert sich auf "Etikett im Namen" (2.5.3), einen entscheidenden Aspekt bei der Beschriftung von Benutzeroberflächenkomponenten. Wir werden gemeinsame Fallstricke, Lösungen und Best Practices untersuchen.

Erfolgskriterien verstehen

Ein Erfolgskriterium ist eine überprüfbare, technologisch-agnostische Aussage, die die Einhaltung der Zugänglichkeit definiert. "Label im Namen" bewertet, ob die visuelle Beschriftung einer Komponente mit ihrem programmatischen Namen übereinstimmt. Es ist Teil der "operierbaren" Kategorie von WCAG 2.1, die speziell Eingabemodalitäten behandelt. Wichtig ist, dass WCAG 2.1 mit WCAG 2.0 rückwärtskompatibel ist.

Beschriftung im Namen: Visual vs. Programmatic

WCAG 2.5.3 (Stufe A) heißt es: "Für Benutzeroberflächenkomponenten mit Beschriftungen, die Text oder Textbilder enthalten, enthält der Name den Text, der visuell dargestellt wird."

Dies gewährleistet die Konsistenz zwischen dem visuell vorgestellten Etikett und dem programmatischen Namen der Komponente (zugänglicher Name). Diese Konsistenz ist für Benutzer von assistiven Technologien wie Bildschirmlesern und Spracherkennungssoftware von entscheidender Bedeutung. Die visuellen und programmatischen Namen müssen nicht identisch sein, aber sie müssen einen gemeinsamen, assoziierenden Begriff (z. B. "Senden" und "Sendenformular"). Unstimmigkeiten erzeugen Verwirrung und behindern die Zugänglichkeit.

Assistive Technology Implikationen

Betrachten Sie ein HTML -Kontaktformular. Ein Benutzer, der Spracherkennung verwendet, kann auf eine Schaltfläche mit dem visuellen Text "Senden" begegnen, aber einen programmatischen Namen "Senden". Diese Nichtübereinstimmung ist ein Misserfolg. Der Benutzer, der sich auf das visuelle Etikett verlässt, kann die Schaltfläche mit Sprachbefehlen nicht aktivieren. Die Übereinstimmung mit den visuellen und programmatischen Namen (in beiden Fällen "senden") löst dieses Problem auf. Wenn das aria-label keinen Wert hinzufügt, ist es vorzuziehen, es zu entfernen.

Die Benutzer von Bildschirmleser profitieren auch von einer konsistenten Beschriftung. Das Hören von Text ähnlich wie sie sehen, verbessert die Benutzerfreundlichkeit. Umgekehrt können nicht übereinstimmende Etiketten zu einer zufälligen Aktivierung von Steuerungen durch Spracheingabe oder Verwirrung für Benutzer führen, die über Bildschirmleser navigieren. Das Kriterium gilt nicht für Komponenten, denen visuelle Etiketten fehlen.

Code Beispiele: Fehlerzustände und Korrekturen

Der Artikel enthält drei Fehlerszenarien:

1. Eine Trennung zwischen den gesprochenen und visuellen Etiketten.
2. Eine Label -Nichtübereinstimmung aufgrund einer "zugänglichen versteckten" Spannweite, die dem gesprochenen Etikett zusätzlichen Text hinzufügt.
3. Eine Eingabe mit einem aria-labelledby Attribut, das keine Korrelation zwischen gesprochenen und visuellen Etiketten festlegt.

Diese Beispiele heben gemeinsame Fehler hervor. Der Artikel enthält dann korrigierte Code -Snippets für jedes Szenario.

In einer Studie von 2020 wurde ergeben, dass 55% der 4,2 Millionen Formulareingänge nicht ordnungsgemäß beschriftet wurden.

Richtige Paarung für Etiketteneingänge mit Verwendung<label></label> Elemente sind entscheidend, aber der programmatische Name (zugänglicher Name) über aria-label ist gleichermaßen wichtig. Inkonsistenzen zwischen<label></label> Text und aria-label erstellen kognitive Überladung für Benutzer mit kognitiven Behinderungen und Nutzern Spracheingänge.

Etikettenplatzierung und Textspezifität

Der Artikel verdeutlicht, dass Text nicht als visuelles Etikett angesehen wird, wenn sie symbolisch verwendet und nicht wörtlich. Reiche Textredakteure, die häufig Bilder als Text verwenden, veranschaulichen dies.

Für die Konsistenz sollte das visuell stellvertretende Etikett als Labeltext betrachtet werden. Zu den optimalen Platzierungsrichtlinien gehören:

• Links von Texteingaben und Dropdowns.
• Rechte Kontrollkästchen und Optionsfelder.
• Innerhalb von Schaltflächen oder Registerkarten oder unteren Symboltasten.

Kleinere Unterschiede in der Interpunktion und Kapitalisierung sind akzeptabel, wenn nicht symbolisch.

Komponenten ohne visuelle Etiketten sind von diesem Erfolgskriterium ausgeschlossen.

Vorteile der ordnungsgemäßen Kennzeichnung

Durch die konsistente Kennzeichnung können Benutzer von Spracheingängen die Steuerelemente nahtlos aktivieren und die Vermutungen beseitigen. Inklusives Design kommt allen Benutzern zugute und schaffen ein angenehmeres und zugänglicheres Erlebnis.

Schlussfolgerung und Tests

Der Artikel fasst WCAG 2.5.3 zusammen und betont seine Bedeutung trotz scheinbar Einfachheit. Es zeigt die Compliance-Anforderung auf A-Level: Sicherstellen, dass der programmatische Name den visuell vorgestellten Text enthält.

Das Testen kann mithilfe von Browser -Entwickler -Tools (Chrome Devtools, Firefox Developer Tools) oder AUSGAIN -Prüftools wie Wave und AX durchgeführt werden. Wenn Sie dieses Kriterium einhalten, verbessert es jedoch die Zugänglichkeit für alle Benutzer erheblich.

Das obige ist der detaillierte Inhalt vonWas ist neu in WCAG 2.1: Etikett im Namen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!