ARIA: aria-label Attribut

Beschreibung

Manchmal fehlt der standardmäßige barrierefreie Name eines Elements oder der barrierefreie Name beschreibt den Inhalt des Elements nicht genau, und es gibt keinen im DOM sichtbaren Inhalt, der mit dem Objekt in Verbindung gebracht werden kann, um ihm Bedeutung zu verleihen. Ein häufiges Beispiel für ein solches Element ist eine Schaltfläche, die ein SVG-Icon ohne Text enthält.

In Fällen, in denen ein Element, das nicht Teil der verbotenen Liste ist, keinen barrierefreien Namen hat oder der barrierefreie Name nicht zutreffend 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, auf dem es gesetzt ist, beschriftet. Dies gibt dem Element einen barrierefreien Namen.

Der untenstehende Code zeigt ein Beispiel, wie das aria-label Attribut verwendet wird, um einer <button>-Element eine barrierefreie Benennung zu geben. Der Button in diesem Beispiel enthält eine SVG-Grafik und hat keinen Textinhalt, wodurch das aria-label für Benutzer von Screenreadern unerlässlich wird, 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 barrierefreien Namen, der aus dem unmittelbaren Textinhalt des umgebenden Elements generiert wird. Barrierefreie Namen können auch durch bestimmte Attribute oder assoziierte Elemente erstellt werden.

Standardmäßig ist der barrierefreie Name eines Buttons der Inhalt zwischen den öffnenden und schließenden <button>-Tags, der barrierefreie Name eines Bildes ist der Inhalt seines alt Attributs und der barrierefreie Name einer Formulareingabe ist der Inhalt des zugehörigen <label> Elements.

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

Wenn Sie aria-label verwenden, sollten Sie auch aria-labelledby in Betracht ziehen:

• aria-label kann in Fällen verwendet werden, in denen Text, der das Element beschriften könnte, 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 einem Element einen barrierefreien Namen. Wenn es keinen sichtbaren Namen gibt, auf den Sie verweisen können, verwenden Sie aria-label, um dem Benutzer einen erkennbaren barrierefreien Namen zu geben. Wenn Label-Text im DOM verfügbar ist und er für ein akzeptables Benutzererlebnis referenziert werden kann, ziehen Sie es vor, aria-labelledby zu verwenden. 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 role zugewiesen bekommen haben.

• Überbeanspruchen Sie aria-label nicht. Denken Sie daran, dass es in erster Linie für unterstützende Technologien gedacht ist. Um zusätzliche Anweisungen zu geben oder das UI zu erläutern, 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 Screenreadern (oder besser noch, machen Sie Ihr UI intuitiver).

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

• Nicht alle Elemente können einen barrierefreien Namen erhalten. Weder aria-label noch aria-labelledby sollten mit Inline-Strukturrollen wie code, term und emphasis und Rollen, die nicht in der Accessibility API abgebildet sind, einschließlich none, verwendet werden. Das aria-label Attribut ist für Elemente vorgesehen, einschließlich Links, Videos, Formularsteuerelementen und solchen mit Landmark Rollen oder Widget Rollen; aria-label bietet einen barrierefreien Namen, wenn kein sichtbares Label im DOM existiert.

• Wenn Sie einem <iframe> ein 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 des Bildes oder dem <label> Text der Eingabe als barrierefreier Name für dieses Element.

Werte

<string>

Eine Textzeichenfolge, die der barrierefreie Name für das Objekt sein wird.

Zugehörige Schnittstellen

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.

Zugehörige Rollen

Wird in fast allen Rollen verwendet, außer in Rollen, denen kein barrierefreier Name vom Autor zugewiesen werden kann.

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

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

Spezifikationen

Siehe auch

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