ARIA: aria-label-Attribut

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 im DOM sichtbaren Inhalt, der dem Objekt zugeordnet 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, 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 benennt, auf dem es gesetzt wird. Dies gibt dem Element einen zugänglichen Namen.

Der untenstehende Code zeigt ein Beispiel dafür, wie das aria-label-Attribut verwendet werden kann, um einem <button>-Element einen zugänglichen Namen zu geben. Der Button in diesem Beispiel enthält eine SVG-Grafik und keinen Textinhalt, wodurch das aria-label für Benutzer von Bildschirmlesern notwendig ist, 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="#000" />
  </svg>
</button>

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

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

Standardmäßig ist der zugängliche Name eines Buttons der Inhalt zwischen den öffnenden und schließenden <button>-Tags, der zugängliche Name eines Bildes ist der Inhalt seines alt-Attributs und der zugängliche Name eines Formulareingabewerts ist der Inhalt des zugeordneten <label>-Elements.

Wenn keine dieser Optionen verfügbar ist oder der standardmäßige zugängliche Name nicht angemessen 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 berücksichtigen:

• aria-label kann in Fällen verwendet werden, in denen der Text, der das Element beschriftet, nicht sichtbar ist. Wenn es sichtbaren Text gibt, der ein Element beschriftet, verwenden Sie stattdessen aria-labelledby.
• Der Zweck von aria-label ist derselbe wie der von aria-labelledby. Beide bieten einen zugänglichen Namen für ein Element. Wenn es keinen sichtbaren Namen für das Element gibt, auf den Sie Bezug nehmen können, verwenden Sie aria-label, um dem Benutzer einen erkennbaren zugänglichen Namen zu geben. Wenn der Beschriftungstext im DOM verfügbar ist und er für eine akzeptable Benutzererfahrung referenziert werden kann, bevorzugen Sie die Verwendung von aria-labelledby. Verwenden Sie nicht beide auf demselben Element, da aria-labelledby Vorrang vor aria-label hat, wenn beide angewendet werden.

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

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

• Verwenden 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 zu geben 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 jene mit Bildschirmlesegeräten (oder vorzugsweise sollte Ihre Benutzeroberfläche intuitiver gestaltet werden).

  Hinweis: Da der Inhalt von aria-label außerhalb von Hilfstechnologien nicht angezeigt wird, sollten Sie erwägen, wichtige Informationen für alle Benutzer sichtbar zu machen.

• Nicht alle Elemente können einen zugänglichen Namen haben. Weder aria-label noch aria-labelledby sollten mit Inline-Strukturrollen wie code, term und emphasis und Rollen, die nicht auf die Zugänglichkeits-API abgebildet sind, einschließlich none, verwendet werden. Das aria-label-Attribut ist für Elemente wie Links, Videos, Formularelemente und jene mit Landmark-Rollen oder Widget-Rollen gedacht; aria-label bietet einen zugänglichen Namen, wenn im DOM kein sichtbares Label existiert.

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

<string>

Eine Textzeichenfolge, 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 zuweisen 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 auf dem MDN-Blog (2023)