ARIA: aria-label-Attribut

Manchmal fehlt dem Standard-zugänglichen Namen eines Elements oder der zugängliche Name beschreibt den Inhalt des Elements nicht genau und es gibt keinen im DOM sichtbaren Inhalt, der mit dem Objekt assoziiert werden kann, um ihm Bedeutung zu verleihen. Ein häufiges Beispiel für ein solches Element ist ein Button, der ein SVG-Icon ohne Text enthält.

In Fällen, in denen ein Element, das nicht Teil der verbotsliste ist, keinen zugänglichen Namen hat oder ein zugänglicher Name nicht genau ist und es keinen im DOM sichtbaren Inhalt gibt, auf den über das aria-labelledby-Attribut verwiesen werden kann, kann das aria-label-Attribut verwendet werden, um eine Zeichenfolge zu definieren, die das interaktive Element, auf dem es gesetzt ist, kennzeichnet. Dies gibt dem Element einen zugänglichen Namen.

Der folgende Code zeigt ein Beispiel, wie das aria-label-Attribut verwendet wird, um einem <button>-Element einen zugänglichen Namen zu geben. Der Button in diesem Beispiel enthält eine SVG-Grafik und hat keinen Textinhalt, was das aria-label für Benutzer von Bildschirmleseprogrammen unerlässlich macht, um seine Funktion zu verstehen, die in diesem Fall "Schließen" ist.

<button aria-label="Close">
  <svg
    aria-hidden="true"
    focusable="false"
    width="17"
    height="17"
    xmlns="http://www.w3.org/2000/svg">
    <path
      d="m.967 14.217 5.8-5.906-5.765-5.89L3.094.26l5.783 5.888L14.66.26l2.092 2.162-5.766 5.889 5.801 5.906-2.092 2.162-5.818-5.924-5.818 5.924-2.092-2.162Z"
      fill="black" />
  </svg>
</button>

document.querySelector("button").addEventListener("click", () => {
  myDialog.close();
});

Die meisten Inhalte haben einen zugänglichen Namen, der aus dem Textinhalt des umschließenden Elements generiert wird. Zugängliche Namen können auch durch bestimmte Attribute oder assoziierte Elemente erstellt werden.

Standardmäßig ist der zugängliche Name eines Buttons der Inhalt zwischen den öffnenden und schließenden <button>-Tags, ein Bild hat einen zugänglichen Namen, der dem Inhalt seines alt-Attributs entspricht, und ein Formularelement erhält seinen zugänglichen Namen über den Inhalt des zugehörigen <label>-Elements.

Wenn keine dieser Optionen verfügbar ist oder der Standard-zugängliche Name nicht geeignet ist, verwenden Sie das aria-label-Attribut, um den zugänglichen Namen eines Elements zu definieren.

Beim Verwenden von aria-label sollten Sie auch aria-labelledby in Betracht ziehen:

• aria-label kann in Fällen verwendet werden, in denen der Text, der das Element etikettieren könnte, nicht sichtbar ist. Wenn es sichtbaren Text gibt, der ein Element etikettiert, verwenden Sie stattdessen aria-labelledby.
• Der Zweck von aria-label ist derselbe wie der von aria-labelledby. Beide bieten einem Element einen zugänglichen Namen. Wenn es keinen sichtbaren Namen für das Element gibt, den Sie referenzieren können, verwenden Sie aria-label, um dem Benutzer einen erkennbaren zugänglichen Namen bereitzustellen. Wenn Label-Text im DOM verfügbar ist und es möglich ist, ihn für ein akzeptables Benutzererlebnis zu referenzieren, ziehen Sie aria-labelledby vor. Verwenden Sie nicht beide auf demselben Element, da aria-labelledby Vorrang vor aria-label hat, wenn beide angewendet werden.

Beachten Sie beim Verwenden von aria-label die folgenden zusätzlichen Richtlinien:

• Das aria-label-Attribut kann mit regulären, semantischen HTML-Elementen verwendet werden; es ist nicht auf Elemente beschränkt, die eine ARIA role zugewiesen haben.

• Nutzen Sie aria-label nicht übermäßig. Denken Sie daran, dass es in erster Linie für unterstützende Technologien gedacht ist. Um zusätzliche Anweisungen bereitzustellen oder die Benutzeroberfläche zu klären, verwenden Sie sichtbaren Text mit aria-describedby oder aria-description, nicht aria-label. Anweisungen sollten für alle Benutzer zugänglich sein, nicht nur für Benutzer von Bildschirmleseprogrammen (oder vorzugsweise sollte Ihre Benutzeroberfläche intuitiver gestaltet werden).

  Hinweis: Da der Inhalt von aria-label außerhalb unterstützender Technologien nicht angezeigt wird, sollten Sie in Erwägung ziehen, wichtige Informationen für alle Benutzer sichtbar zu machen.

• Nicht alle Elemente können mit einem zugänglichen Namen versehen werden. Weder aria-label noch aria-labelledby sollten mit Inline-Strukturrollen wie code, term und emphasis sowie Rollen, die nicht auf die Barrierefreiheits-API abgebildet sind, inklusive none, verwendet werden. Das aria-label-Attribut ist für Elemente wie Links, Videos, Formularelemente sowie solche mit Landmark-Rollen oder Widget-Rollen vorgesehen; aria-label bietet einen zugänglichen Namen, wenn kein sichtbares Label im DOM vorhanden ist.

• Wenn Sie einem <iframe> einen title zuweisen, einem <img> ein alt-Attribut definieren oder ein <label> für ein <input> hinzufügen, ist aria-label nicht notwendig. Wenn jedoch ein aria-label-Attribut vorhanden ist, hat es Vorrang vor dem title des iframes, dem alt eines Bildes oder dem Text des <label>-Elements als zugänglicher Name für dieses Element.

<string>

Eine Zeichenkette, die der zugängliche Name für das Objekt sein wird.

Element.ariaLabel

Die ariaLabel-Eigenschaft, Teil der Element-Schnittstelle, spiegelt den Wert des aria-label-Attributs wider.

ElementInternals.ariaLabel

Die ariaLabel-Eigenschaft, Teil der ElementInternals-Schnittstelle, spiegelt den Wert des aria-label-Attributs wider.

Wird in fast allen Rollen verwendet, außer in Rollen, denen der Autor keinen zugänglichen Namen geben kann.

Das aria-label-Attribut wird NICHT unterstützt in:

• code
• caption
• definition
• deletion
• emphasis
• generic
• insertion
• mark
• paragraph
• presentation / none
• strong
• subscript
• superscript
• suggestion
• term
• time

• <label>-Element
• aria-description
• aria-labelledby
• Verwendung von HTML-Landmark-Rollen zur Verbesserung der Barrierefreiheit im MDN-Blog (2023)