Was ist ein Arien-Label und wie soll ich es verwenden?

319

Vor ein paar Stunden habe ich über das Aria-Label- Attribut gelesen , das:

Definiert einen Zeichenfolgenwert, der das aktuelle Element kennzeichnet.

Aber meiner Meinung nach sollte das titleAttribut genau das tun. Ich habe im Mozilla Developer Network weiter gesucht , um einige Beispiele und Erklärungen zu erhalten, aber das einzige, was ich gefunden habe, war

<button aria-label="Close" onclick="myDialog.close()">X</button>

Was mir kein Etikett gibt (also gehe ich davon aus, dass ich die Idee falsch verstanden habe). Ich habe es hier in jsfiddle versucht .

Meine Frage lautet also: Warum brauche ich aria-labelund wie soll ich es verwenden?

html assistive-technology Salvador Dali
quelle
3
Wenn Sie sich die von Ihnen verknüpfte Ressource ansehen, scheint sie aria-labelmöglicherweise verwendet zu werden, wenn Sie den vom title-Attribut bereitgestellten Tooltip nicht anzeigen möchten: In Fällen, in denen eine sichtbare Beschriftung oder ein sichtbarer Tooltip unerwünscht ist, können die Autoren den zugänglichen Namen des festlegen Element mit Arien-Label
Fabrizio Calderan
12
fyi ARIA = Zugängliche Rich Internet-Anwendungen
Eric D'Souza
Weiß jemand, ob es angemessen ist, aria-label für einen aussagekräftigeren <h1> -Text zu verwenden, wenn der tatsächlich sichtbare Text im <h1> -Element zu kurz ist und nicht gewünscht wird, dass der vollständige Text sichtbar ist? In den Beispielen in diesem Thread könnte ein Label verwendet werden. Aber Etikett nicht zu Überschriften gelten, weshalb ich frage
Hello World
Die einzig geeignete ähnliche Sache, nach der Sie fragen, ist die Eigenschaft "longdesc" (nur für Bilder), die weitere Informationen benötigt. Ich kann mir nicht vorstellen, dass es eine für Text gibt, da sie ohnehin immer beschreibend sein sollte. Ich fürchte. - @HelloWorld
Jamie Paterson

Antworten:

424

Es handelt sich um ein Attribut, mit dessen Hilfe unterstützende Technologien (z. B. Bildschirmleseprogramme) einem ansonsten anonymen HTML-Element ein Etikett hinzufügen können.

Da ist also das <label>Element:

<label for="fmUserName">Your name</label>
<input id="fmUserName">

Das <label>weist den Benutzer ausdrücklich an, seinen Namen in das inputFeld einzugeben, in dem id="fmUserName".

aria-labelmacht fast das Gleiche, aber es ist für jene Fälle, in denen es nicht praktisch oder wünschenswert ist, einen labelBildschirm zu haben . Nehmen Sie das MDN-Beispiel :

<button aria-label="Close" onclick="myDialog.close()">X</button>`

Die meisten Menschen können visuell schließen, dass diese Schaltfläche den Dialog schließt. Eine blinde Person, die unterstützende Technologie verwendet, hört möglicherweise nur "X" vorlesen, was ohne die visuellen Hinweise nicht viel bedeutet. aria-labelteilt ihnen explizit mit, was die Schaltfläche tun wird.

Olly Hodgson
quelle
4
Danke für die Erklärung, aber wie wird er nah hören? Was kann ich in meinem Browser (Chrome) tun, um dies zu hören? Und wie kann ein Blinder diese Schaltfläche auswählen, wenn er keine Ahnung hat, wo sie sich befindet?
Salvador Dali
1
Ich denke, eine Erweiterung wie ChromeVox wäre ein guter Anfang? Ich habe es aber nie benutzt. Sie lesen dem Benutzer den Bildschirm vor und nehmen Hinweise aus dem HTML- Code (z. B. h1sollte ein stärker hervorgehoben werden als a p, aist eindeutig ein , Linkformular, das angibt, wo Informationen eingegeben werden sollen, aria-*Attribute geben weitere Hinweise darauf, was die Elemente tun usw.). .
Olly Hodgson
2
In diesem speziellen Fall würde ich es einem Titel hinzufügen attribute. Es schadet nicht, Benutzern einen Tooltip zu zeigen, wenn sie mit dem
Mauszeiger über
3
Neben ChromeVox gibt es NVDA . Beide sind ziemlich einfach zu installieren und zu starten und ziemlich schwer zu beherrschen.
ivarni
1
@SalvadorDali - nur zur Information. In mobilen Blinden kann das Barrierefreiheits-Tool aktiviert werden, wie für Android-Handys ist es TalkBack und für iOS-Handys ist es VoiceOver. Auf diese Weise wird die Seite Zeile für Zeile gelesen.
Rahul J. Rane
71

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

Wenn dies aria-labelein Tool ist, das von unterstützenden Technologien (wie Bildschirmleseprogrammen) verwendet wird, wird es von Browsern nicht nativ unterstützt und hat keine Auswirkungen auf diese. Dies wird den meisten von der WCAG anvisierten Personen (mit Ausnahme von Benutzern von Bildschirmleseprogrammen), beispielsweise einer Person mit geistigen Behinderungen, keine Hilfe sein.

Das "X" reicht nicht aus, um Informationen über die von der Schaltfläche ausgeführte Aktion zu geben (denken Sie an jemanden ohne Computerkenntnisse). Es könnte "schließen", "löschen", "abbrechen", "reduzieren" bedeuten, ein seltsames Kreuz, ein Gekritzel, nichts.

Trotz der Tatsache, dass das W3C aria-labeleher das titleAttribut hier zu fördern scheint : http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/ARIA14 in einem ähnlichen Beispiel, können Sie sehen, dass die Technologie Die Unterstützung umfasst keine Standardbrowser: http://www.w3.org/WAI/WCAG20/Techniques/ua-notes/aria#ARIA14

In der Tat aria-labelkönnte genau diese Situation verwendet werden, um einer Aktion mehr Kontext zu geben:

Zum Beispiel nehmen Blinde Popups nicht wie wir mit guter Sicht wahr, es ist wie eine Änderung des Kontexts. "Zurück zur Seite" ist eine bequemere Alternative für einen Bildschirmleser, wenn "Schließen" für jemanden ohne Bildschirmleser von größerer Bedeutung ist.

  <button
      aria-label="Back to the page"
      title="Close" onclick="myDialog.close()">X</button>
Adam
quelle
35

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

Erstellen Sie eine HTML-Seite mit dem folgenden Code

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body>
    <button title="Close"> X </button>
    <br />
    <br />
    <br />
    <br />
    <button aria-label="Back to the page" title="Close" > X </button>
</body>
</html>

Jetzt benötigen Sie einen virtuellen Screenreader-Emulator, der im Browser ausgeführt wird, um den Unterschied zu beobachten. So können Chrome - Browser - Benutzer installieren ChromeVox Erweiterung und mozilla - Benutzer können mit gehen Zähne Bildschirmleser Addin

Sobald die Installation fertig, in die Ohren stecken Kopfhörer, öffnen Sie die HTML - Seite und machen Fokus sowohl auf Taste (nach Tab drücken) one-by-one .. und Sie können hören .. wobei der Schwerpunkt auf first x button.. wird Ihnen nur sagen x button.. aber im Falle von second x button.. werden Sie back to the page buttonnur hören ..

Ich hoffe du hast es jetzt gut verstanden !!

Moumit
quelle
1
Ein wichtiger Punkt ist, dass das titleAttribut auch auf der ersten Schaltfläche ignoriert wird. Weitere Informationen: silktide.com/…
Sphinxxx
2
Ist es immer noch so? Noch besser entweder title und aria-label ?
Kamafeather
2
Genau das wollte ich. Ich wollte nur sehen und hören, wie es in der realen Welt chromevoxfunktioniert und wie ein Zauber wirkt, und ich werde die von Arien beschrifteten Felder rezitieren. Vielen Dank.
Raj Rajeshwar Singh Rathore
7

Voraussetzung:

Aria wird verwendet, um die Benutzererfahrung von sehbehinderten Benutzern zu verbessern. Benutzer mit Sehbehinderung navigieren mit einer Bildschirmlese-Software wie JAWS, NVDA usw. durch die Anwendung. Während der Navigation durch die Anwendung kündigt die Bildschirmlese-Software den Benutzern Inhalte an. Aria kann verwendet werden, um dem Code Inhalte hinzuzufügen, mit denen Benutzer von Bildschirmleseprogrammen die Rolle, den Status, die Bezeichnung und den Zweck des Steuerelements verstehen können

Aria ändert visuell nichts. (Aria hat auch Angst vor Designern).

Arien-Label

Das Attribut aria-label wird verwendet, um das Label den Benutzern des Bildschirmlesegeräts mitzuteilen. Normalerweise hat das Sucheingabefeld keine visuelle Beschriftung (dank Designern). aria-label kann verwendet werden, um den Benutzern des Bildschirmlesegeräts das Label der Steuerung mitzuteilen

Wie benutzt man:

<input type="edit" aria-label="search" placeholder="search">

Es gibt keine visuelle Änderung in der Anwendung. Aber Bildschirmleser können den Zweck der Kontrolle verstehen

Arie-beschriftet von

Sowohl das Arienetikett als auch das Arienetikett werden verwendet, um das Etikett zu kommunizieren. Aber aria-labelledby kann verwendet werden, um auf jedes bereits auf der Seite vorhandene Etikett zu verweisen, während aria-label verwendet wird, um das Etikett zu kommunizieren, das ich nicht visuell angezeigt habe

Ansatz 1:

<span id="sd">Search</span>

<input type="text" aria-labelledby="sd">

Ansatz 2:

aria-labelledby kann auch verwendet werden, um zwei Beschriftungen für Benutzer von Bildschirmleseprogrammen zu kombinieren

<span id="de">Billing Address</span>

<span id="sd">First Name</span>

<input type="text" aria-labelledby="de sd">
ndioewbnc
quelle
3

Das titleAttribut zeigt eine QuickInfo an, wenn sich die Maus über dem Element befindet. Dies ist zwar eine großartige Ergänzung, hilft jedoch nicht Personen, die die Maus nicht verwenden können (aufgrund von Mobilitätsbehinderungen) oder Personen, die diesen Tooltip nicht sehen können (z. B. Personen mit Sehbehinderungen oder Personen, die einen Bildschirmleser verwenden).

Daher wäre der achtsame Ansatz hier, allen Benutzern zu dienen. Ich würde sowohl titleals auch aria-labelAttribute hinzufügen (verschiedene Arten von Benutzern und verschiedene Arten der Nutzung des Webs bedienen).

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

lucalanca
quelle