ARIA: aria-label Attribut
Das aria-label Attribut definiert einen Zeichenfolgewert, der zur Benennung eines Elements verwendet werden kann, solange die Rolle des Elements nicht das Benennen untersagt.
Beschreibung
Manchmal fehlt der standardmäßige zugängliche Name eines Elements oder der zugängliche Name beschreibt die Inhalte des Elements nicht genau und es gibt keinen Inhalt, der im DOM sichtbar ist und mit dem Objekt verknüpft werden kann, um ihm Bedeutung zu verleihen. Ein häufiges Beispiel für ein solches Element ist ein Button, der eine SVG-Grafik ohne Text enthält.
In Fällen, in denen ein Element, das nicht auf der verbotene Liste steht und keinen zugänglichen Namen hat oder der zugängliche Name nicht zutreffend ist und es keinen sichtbaren Inhalt im DOM gibt, der über das aria-labelledby Attribut referenziert werden kann, kann das aria-label Attribut verwendet werden, um eine Zeichenfolge zu definieren, die das interaktive Element bezeichnet, auf dem es festgelegt ist. Dies gibt dem Element einen zugänglichen Namen.
Der folgende Code zeigt ein Beispiel, wie das aria-label Attribut verwendet wird, um einem -Element einen zugänglichen Namen zu geben. Der Button in diesem Beispiel enthält eine SVG-Grafik und hat keinen Textinhalt, was den aria-label für Bildschirmleser-Nutzer unerlässlich macht, um seine Funktion zu verstehen, die in diesem Fall "Schließen" ist.
document.querySelector("button").addEventListener("click", () => {
myDialog.close();
});
Note:
aria-labelist für die Benennung von Elementen gedacht, bei denen die implizite oder explizite Rolle das Benennen nicht verbietet. Es wird dringend empfohlen,aria-labelledbygegenüberaria-labelzu priorisieren, wenn ein sichtbares Label für das Element existiert, auf das referenziert werden kann, um seinen Namen zu erhalten.
Die meisten Inhalte haben einen zugänglichen Namen, der von dem Textinhalt ihres unmittelbar umgebenden Elements generiert wird. Zugängliche Namen können auch durch bestimmte Attribute oder zugehörige Elemente erstellt werden.
Standardmäßig ist der zugängliche Name eines Buttons der Inhalt zwischen den öffnenden und schließenden Tags, der zugängliche Name eines Bildes ist der Inhalt seines alt Attributs, und der zugängliche Name einer Formulareingabe ist der Inhalt des zugehörigen Elements.
Wenn keine dieser Optionen verfügbar ist oder der standardmäßig zugängliche Name nicht geeignet ist, verwenden Sie das aria-label Attribut, um den zugänglichen Namen eines Elements zu definieren.
Hinweis:
Während aria-label auf jedem Element verwendet werden kann, das einen zugänglichen Namen haben kann, wird es in der Praxis jedoch nur auf interaktive Elemente, Widgets, Landmarks, Bilder und Iframes unterstützt.
Wenn Sie aria-label verwenden, sollten Sie auch aria-labelledby in Betracht ziehen:
aria-labelkann in Fällen verwendet werden, in denen Text, der das Element kennzeichnen könnte, nicht sichtbar ist. Wenn es sichtbaren Text gibt, der ein Element kennzeichnet, verwenden Sie stattdessenaria-labelledby.- Der Zweck von
aria-labelist derselbe wie der vonaria-labelledby. Beide bieten einen zugänglichen Namen für ein Element. Wenn kein sichtbarer Name für das Element vorhanden ist, den Sie referenzieren können, verwenden Siearia-label, um dem Benutzer einen erkennbaren zugänglichen Namen zu geben. Wenn im DOM Beschriftungstext verfügbar ist und es möglich ist, ihn zu referenzieren, um eine akzeptable Benutzererfahrung zu bieten, bevorzugen Sie die Verwendung vonaria-labelledby. Verwenden Sie beide nicht auf demselben Element, daaria-labelledbyVorrang voraria-labelhat, wenn beide angewendet werden.
Beachten Sie die folgenden zusätzlichen Richtlinien, wenn Sie aria-label verwenden:
-
Das
aria-labelAttribut kann mit regulären, semantischen HTML-Elementen verwendet werden; es ist nicht auf Elemente beschränkt, die eine ARIArolezugewiesen haben. -
Verwenden Sie
aria-labelnicht "übermäßig". Denken Sie daran, dass es hauptsächlich für unterstützende Technologien gedacht ist. Um zusätzliche Anweisungen bereitzustellen oder die Benutzeroberfläche zu klären, verwenden Sie sichtbaren Text mitaria-describedbyoderaria-description, nichtaria-label. Anweisungen sollten allen Benutzern zugänglich sein, nicht nur denen mit Bildschirmlesern (oder vorzugsweise, machen Sie Ihre Benutzeroberfläche intuitiver).Hinweis: Da der Inhalt von
aria-labelaußerhalb unterstützender Technologien nicht angezeigt wird, sollten Sie erwägen, wichtige Informationen für alle Benutzer sichtbar zu machen. -
Nicht allen Elementen kann ein zugänglicher Name zugewiesen werden. Weder
aria-labelnocharia-labelledbysollten mit strukturellen Inlinerollen wiecode,termundemphasisverwendet werden, und Rollen, die nicht zur Barrierefreiheits-API abgebildet sind, einschließlichnone. Dasaria-labelAttribut ist für Elemente wie Links, Videos, Formularelemente und solche mit Landmark-Rollen oder Widget-Rollen gedacht;aria-labelbietet einen zugänglichen Namen, wenn kein sichtbares Label im DOM existiert.