Was ist aria-label und wie sollte ich es verwenden?

Question

Ich habe vor ein paar Stunden über das aria-label-Attribut gelesen, das:

Definiert einen Zeichenfolgenwert, der das aktuelle Element kennzeichnet.

Aber meiner Meinung nach sollte das title-Attribut das tun. Ich habe weiter im Mozilla Developer Network nach einigen Beispielen und Erklärungen gesucht, aber das einzige, was ich gefunden habe, war

X

Das mir kein Label zur Verfügung stellt (also gehe ich davon aus, dass ich die Idee missverstanden habe). Ich habe es hier in jsfiddle ausprobiert.

Also meine Frage ist: Warum brauche ich aria-label und wie sollte ich es verwenden?

Answer 1

Es handelt sich um ein Attribut, das dazu dient, assistive Technologie (z. B. Bildschirmlesegeräte) zu ermöglichen, einem ansonsten anonymen HTML-Element ein Etikett zuzuweisen.

Deshalb gibt es das -Element:

Ihr Name

Das fordert den Benutzer explizit auf, seinen Namen in das input-Feld mit id="fmUserName" einzugeben.

aria-label erfüllt im Wesentlichen die gleiche Funktion, wird jedoch in Fällen verwendet, in denen es nicht praktikabel oder erwünscht ist, ein Etikett auf dem Bildschirm anzuzeigen.

X`

Die meisten Menschen können visuell erschließen, dass dieser Button den Dialog schließen wird. Ein blinder Mensch, der assistive Technologie verwendet, würde wahrscheinlich nur "X" vorgelesen bekommen, was ohne visuelle Hinweise nicht viel bedeutet. aria-label sagt ihnen explizit, was der Button tun wird.

Answer 2

In dem Beispiel, das Sie geben, haben Sie vollkommen recht, Sie müssen das title-Attribut setzen.

Wenn aria-label ein Werkzeug ist, das von unterstützenden Technologien wie Bildschirmlesegeräten verwendet wird, wird es nicht nativ von Browsern unterstützt und hat keine Auswirkungen auf sie. Es wird den meisten Menschen, die von der WCAG angesprochen werden (außer Bildschirmleser-Benutzern), nicht helfen, zum Beispiel einer Person mit geistigen Behinderungen.

Das "X" reicht nicht aus, um Informationen zur Aktion, die durch den Button ausgeführt wird, zu geben (denken Sie an jemanden, der keine Computerkenntnisse hat). Es könnte "schließen", "löschen", "abbrechen", "verkleinern", ein seltsames Kreuz, eine Kritzelei, nichts bedeuten.

Trotz der Tatsache, dass das W3C hier scheinbar das aria-label statt des title-Attributs fördert: http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/ARIA14 in einem ähnlichen Beispiel sieht man, dass die Unterstützung durch Technologie nicht standardmäßige Browser umfasst: http://www.w3.org/WAI/WCAG20/Techniques/ua-notes/aria#ARIA14

Tatsächlich kann aria-label in dieser genauen Situation verwendet werden, um mehr Kontext für eine Aktion zu geben:

Zum Beispiel nehmen blinde Menschen Popups nicht wahr wie Menschen mit gutem Sehvermögen, es ist wie eine Änderung des Kontexts. "Zurück zur Seite" wäre eine praktischere Alternative für einen Bildschirmleser, während "Schließen" für jemanden ohne Bildschirmleser bedeutsamer ist.

  X

Answer 3

Wenn Sie wissen möchten, wie aria-label Ihnen praktisch hilft .. befolgen Sie dann die Schritte ... Sie werden es selbst sehen ..

Erstellen Sie eine HTML-Seite mit folgendem Code

     X 

     X 

Nun benötigen Sie einen virtuellen Screenreader-Emulator, der im Browser läuft, um den Unterschied zu beobachten. Chrome-Browser-Benutzer können die chromevox-Erweiterung installieren, während Mozilla-Benutzer das fangs screen reader-Add-In verwenden können

Nach der Installation setzen Sie Kopfhörer auf, öffnen die HTML-Seite und fokussieren sich nacheinander auf beide Schaltflächen (durch Drücken der Tabulatortaste) .. und Sie können hören .. wenn Sie sich auf die erste x Schaltfläche konzentrieren .. hören Sie nur x Schaltfläche .. aber im Falle der zweiten x Schaltfläche .. hören Sie nur Zurück zur Seite Schaltfläche..

Ich hoffe, Sie haben es jetzt gut verstanden!!

Answer 4

Voraussetzung:

ARIA ist eine Reihe von Attributen, die Sie zu HTML-Elementen hinzufügen können, um Webinhalte und Anwendungen für Benutzer mit Behinderungen zugänglich zu machen, die unterstützende Technologien (AT) verwenden. Wenn Zugänglichkeitsprobleme nicht mit nativem HTML gelöst werden können, kann ARIA helfen, diese Lücken zu überbrücken. Es ändert nichts visuell.

aria-label

Das aria-label -Attribut wird verwendet, um zu beschreiben, was das Label für diese Benutzer tut.

Verwendung:

aria-labelledby

Sowohl aria-label als auch aria-labelledby werden verwendet, um das Label zu kommunizieren. aria-labelledby kann jedoch dazu verwendet werden, auf jedes bereits vorhandene Label auf der Seite zu verweisen, während aria-label dazu dient, das Label zu kommunizieren, das nicht visuell angezeigt wird.

Ansatz 1:

Suche

Ansatz 2:

aria-labelledby kann auch verwendet werden, um zwei Labels für Screenreader-Benutzer zu kombinieren

Rechnungsadresse

Vorname

Answer 5

Das title-Attribut zeigt einen Tooltip an, wenn die Maus über das Element schwebt. Obwohl dies eine großartige Ergänzung ist, hilft es nicht den Menschen, die die Maus nicht benutzen können (aufgrund von Mobilitätsbehinderungen) oder den Menschen, die diesen Tooltip nicht sehen können (z. B.: Menschen mit Sehbehinderungen oder Menschen, die einen Bildschirmleser verwenden).

Als solches wäre der achtsame Ansatz hier, allen Benutzern zu dienen. Ich würde sowohl die title- als auch die aria-label-Attribute hinzufügen (die verschiedenen Benutzertypen und die verschiedenen Arten der Internetnutzung bedienen).

Hier ist ein guter Artikel, der aria-label ausführlich erklärt