aria-label

Manchmal fehlt der standardmäßige zugängliche Name eines Elements oder der zugängliche Name beschreibt den Inhalt des Elements nicht genau. Es gibt keinen sichtbaren Inhalt im DOM, der mit dem Objekt verknüpft werden kann, um ihm eine Bedeutung zu geben. 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 verbotenen Liste ist, keinen zugänglichen Namen hat oder ein zugänglicher Name nicht genau 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 gesetzt ist. Dies gibt dem Element einen zugänglichen Namen.

Der untenstehende Code zeigt ein Beispiel, 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 Bildschirmlesegeräte-Benutzer unerlässlich wird, um seine Funktion, die in diesem Fall "Schließen" ist, zu verstehen.

<button aria-label="Close" onclick="myDialog.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>

Der meiste Inhalt hat 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 Formular-Inputs ist der Inhalt des zugeordneten <label> Elements.

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

Wenn Sie aria-label verwenden, sollten Sie auch aria-labelledby berücksichtigen:

• aria-label kann in Fällen verwendet werden, in denen Text, der das Element bezeichnen könnte, nicht sichtbar ist. Wenn sichtbarer Text vorhanden ist, der ein Element bezeichnet, 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, den Sie referenzieren können, verwenden Sie aria-label, um dem Benutzer einen erkennbaren zugänglichen Namen zu geben. Wenn Label-Text im DOM verfügbar ist und es möglich ist, ihn für ein akzeptables Benutzererlebnis zu referenzieren, ziehen Sie die Verwendung von aria-labelledby vor. Verwenden Sie nicht beide auf demselben Element, da aria-labelledby Vorrang vor aria-label erhält, wenn beide angewendet werden.

Beachten Sie die folgenden zusätzlichen Richtlinien bei der Verwendung von aria-label:

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

• Überbeanspruchen Sie aria-label nicht. Denken Sie daran, dass es primär 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 diejenigen mit Bildschirmlesegeräten (oder vorzugsweise, machen Sie Ihre Benutzeroberfläche intuitiver).

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

• Nicht alle Elemente können einen zugänglichen Namen erhalten. Weder aria-label noch aria-labelledby sollten mit Inline-Strukturrollen wie code, term und emphasis verwendet werden, und Rollen, die nicht zur Barrierefreiheits-API zugeordnet sind, einschließlich none. Das aria-label Attribut ist für Elemente vorgesehen, einschließlich Links, Videos, Formular-Steuerelementen und diejenigen mit Landmark-Rollen oder Widget-Rollen; aria-label bietet einen zugänglichen Namen, wenn kein sichtbares Label im DOM vorhanden ist.

• Wenn Sie einem <iframe> ein title zuweisen, ein alt Attribut für ein <img> definieren oder <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 des Bildes oder dem <label> Text des Inputs als zugänglicher Name für dieses Element.

<string>

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

Element.ariaLabel

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

ElementInternals.ariaLabel

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

Wird in fast allen Rollen verwendet ausgenommen Rollen, bei denen dem Autor das Bereitstellen eines zugänglichen Namens nicht möglich ist.

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 Zugänglichkeit im MDN-Blog (2023)