html5 - w3school - html role presentation




Was ist Aria-Label und wie soll ich es verwenden? (2)

Es ist ein Attribut, das entwickelt wurde, um Hilfstechnologien (z. B. Bildschirmleseprogrammen) zu helfen, ein Label an ein ansonsten anonymes HTML-Element anzuhängen.

Also gibt es das Element <label> :

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

Das <label> weist den Benutzer explizit an, seinen Namen in das input mit id="fmUserName" .

aria-label macht fast dasselbe, aber es ist für die Fälle, in denen es nicht praktisch oder wünschenswert ist, ein label auf dem Bildschirm zu haben. Nehmen Sie das MDN-Beispiel :

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

Die meisten Leute könnten visuell ableiten, dass dieser Knopf den Dialog schließt. Eine blinde Person, die assistierende Technologie benutzt, hört vielleicht "X" laut vorlesen, was ohne die visuellen Hinweise nicht viel bedeutet. aria-label sagt ihnen explizit, was die Schaltfläche tun wird.

Vor ein paar Stunden las ich über das aria-label Attribut, welches:

Definiert einen Zeichenfolgenwert, der das aktuelle Element kennzeichnet.

Aber meiner Meinung nach sollte dies das Titelattribut sein. Ich habe im Mozilla Developer Network nach weiteren Beispielen und Erklärungen gesucht, aber das einzige, was ich gefunden habe, war

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

Das gibt mir kein Label (ich nehme an, ich habe die Idee missverstanden). Ich habe es hier im jsfiddle versucht.

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


Wenn Sie wissen aria-label , wie aria-label Ihnen praktisch hilft .. dann folgen Sie den Schritten ... 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 Bildschirmleser-Emulator, der im Browser ausgeführt wird, um den Unterschied zu beobachten. So können Chrome-Browser-Benutzer chromevox Erweiterung und Mozilla-Benutzer können mit Reißzähnen Bildschirmleser Addin gehen

Sobald Sie mit der Installation fertig sind, legen Sie Kopfhörer in Ihre Ohren, öffnen Sie die HTML-Seite und konzentrieren Sie sich auf beide Tasten (durch Drücken der Tabulatortaste) eins nach dem anderen .. und Sie können hören .. Fokussierung auf die first x button .. wird Ihnen nur sagen x button .. aber im Falle der second x button .. hören Sie nur back to the page button ..

Ich hoffe du hast es jetzt gut verstanden !!





assistive-technology