ARIA: aria-labelledby-Attribut

Beschreibung

Die Eigenschaft aria-labelledby ermöglicht es Autoren, auf andere Elemente auf der Seite zu verweisen, um einen zugänglichen Namen zu definieren. Dies ist nützlich, wenn Elemente verwendet werden, die keine native Unterstützung für die Verknüpfung von Elementen zur Bereitstellung eines zugänglichen Namens haben.

Einige Elemente erhalten ihren zugänglichen Namen aus ihrem inneren Inhalt. Zum Beispiel stammt der zugängliche Name für ein <button>, <a>, oder <td> aus dem Text zwischen den öffnenden und schließenden Tags. Andere Elemente, wie Formularelemente <textarea>, <fieldset>, und <table>, erhalten ihren zugänglichen Namen aus dem Inhalt der zugeordneten Elemente; für diese Elemente kommt der zugängliche Name von einem <label> mit einem for-Attribut, <legend>, und <caption> jeweils.

Alle interaktiven Elemente müssen einen zugänglichen Namen haben. aria-labelledby kann verwendet werden, um auf ein anderes Element zu verweisen, um seinen zugänglichen Namen zu definieren, wenn der zugängliche Name eines Elements Inhalte von einer anderen Stelle im DOM nutzen muss.

Wenn kein Inhalt vorhanden ist, der referenziert werden kann, um einen zugänglichen Namen zu erstellen, sollte stattdessen das aria-label-Attribut verwendet werden.

Der Zweck von aria-labelledby ist derselbe wie der von aria-label. Es bietet dem Benutzer einen erkennbaren, zugänglichen Namen für ein interaktives Element. Wenn ein Element beide Attribute gesetzt hat, wird aria-labelledby verwendet. aria-labelledby hat Vorrang vor allen anderen Methoden zur Bereitstellung eines zugänglichen Namens, einschließlich aria-label, <label>, und dem inneren Text des Elements.

Die aria-labelledby- und aria-describedby-Attribute referenzieren beide andere Elemente, um Textalternativen zu berechnen. aria-labelledby sollte auf kurzen Text verweisen, der dem Element einen zugänglichen Namen verleiht. aria-describedby wird verwendet, um auf längeren Inhalt zu verweisen, der eine Beschreibung liefert. Wenn es kein Element im DOM gibt, das ein kurzes Etikett für einen zugänglichen Namen für ein interaktives Element bereitstellt, verwenden Sie aria-label, um den zugänglichen Namen für ein interaktives Element zu definieren.

Das folgende Beispiel verwendet aria-labelledby, um einen zugänglichen Namen für ein Kontrollkästchen-Input bereitzustellen, indem der Textinhalt eines Geschwisterelements verwendet wird:

<span
  role="checkbox"
  aria-checked="false"
  tabindex="0"
  aria-labelledby="tac"></span>
<span id="tac">I agree to the Terms and Conditions.</span>

Beachten Sie, dass die Verwendung von aria-labelledby in dieser Situation ähnlich ist wie die Verwendung eines HTML-<label>-Elements mit dem for-Attribut, es gibt jedoch einige sehr wichtige Unterschiede. Das aria-labelledby-Attribut definiert nur den zugänglichen Namen. Es bietet keine der anderen Funktionen von <label>, wie das Aktivieren des zugehörigen Eingabefeldes durch Klicken auf das beschriftende Element. Dies muss mit JavaScript hinzugefügt werden.

Glücklicherweise funktioniert das HTML-<input> mit type="checkbox" mit dem nativen <label>. Wenn machbar, verwenden Sie Folgendes:

<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions" />
  I agree to the Terms and Conditions.
</label>
<p><a href="tac.html">Read our Terms and Conditions</a>.</p>

Vorteile (und Nachteile)

1. Die aria-labelledby-Eigenschaft hat die höchste Priorität, wenn Browser zugängliche Namen berechnen. Beachten Sie, dass sie andere Methoden zur Benennung des Elements, einschließlich aria-label, anderer Benennungsattribute und sogar die Inhalte des Elements selbst, überschreibt.

   html

   <button aria-label="Blue" aria-labelledby="color">Red</button>
   <span id="color">Yellow</span>
   

   In diesem Beispiel ist der zugängliche Name "Yellow".

2. Die aria-labelledby-Eigenschaft nimmt als Wert eine durch Leerzeichen getrennte Liste von ID-Referenzen an, was bedeutet, dass Sie mehr als ein Element zu einem einzigen zugänglichen Namen kombinieren können. Sie können die id des Elements selbst einfügen, um auf den eigenen Inhalt zu verweisen.

   html

   <h2 id="attr" class="article-title">13 ARIA attributes you need to know</h2>
   <p>
     There are over 50 ARIA states and properties, but 13 of them stand out…
     <a href="13.html" id="rm13" aria-labelledby="rm13 attr">read more</a>
   </p>
   

   In diesem Beispiel ist der zugängliche Name "read more 13 ARIA attributes you need to know".

3. Die Reihenfolge der aria-labelledby-Eigenschaftswerte ist wichtig. Wenn mehr als ein Element durch aria-labelledby referenziert wird, wird der Inhalt jedes referenzierten Elements in der Reihenfolge kombiniert, in der sie im aria-labelledby-Wert referenziert werden. Hätten wir aria-labelledby="attr rm13"> geschrieben, wäre der zugängliche Name "13 ARIA attributes you need to know read more".

4. Die aria-labelledby-Eigenschaft ignoriert wiederholte ids in ihrem Wert. Wenn ein Element mehr als einmal referenziert wird, wird nur der erste Verweis verarbeitet. aria-labelledby="attr attr rm13 rm13"> wird als aria-labelledby="attr rm13"> behandelt.

5. Die aria-labelledby-Eigenschaft kann Inhalte von Elementen enthalten, die nicht sichtbar sind. Während Sie Benutzern von unterstützenden Technologien denselben Inhalt wie allen anderen Benutzern bereitstellen sollten, können Sie Inhalte von Elementen mit dem HTML-Attribut hidden, CSS display: none, und CSS visibility: hidden in der berechneten Namenszeichenfolge einbeziehen.

6. Die aria-labelledby-Eigenschaft integriert den Wert von Eingabeelementen. Wenn der Wert auf ein <input> verweist, wird der aktuelle Wert des Formularelements in die berechnete Namenszeichenfolge einbezogen, die sich ändert, wenn der Wert aktualisiert wird.

7. Die aria-labelledby-Eigenschaft kann nicht verkettet werden. Wenn ein Element mit aria-labelledby auf ein anderes Element verweist, das ebenfalls aria-labelledby hat, wird das aria-labelledby-Attribut des referenzierten Elements ignoriert.

Werte

ID-Referenzliste

Durch Leerzeichen getrennte Liste von einem oder mehreren ID-Werten, die auf die Elemente verweisen, die das aktuelle Element beschriften.

Zugehörige Schnittstellen

Element.ariaLabelledByElements

Die ariaLabelledByElements-Eigenschaft ist Teil der Schnittstelle jedes Elements. Sein Wert ist ein Array von Unterklassen von Element, das die id-Referenzen im aria-labelledby-Attribut widerspiegelt (mit einigen Vorbehalten).

ElementInternals.ariaLabelledByElements

Die ariaLabelledByElements-Eigenschaft ist Teil der Schnittstelle jedes benutzerdefinierten Elements. Sein Wert ist ein Array von Unterklassen von Element, das die id-Referenzen im aria-labelledby-Attribut widerspiegelt (mit einigen Vorbehalten).

Zugehörige Rollen

Verwendet in fast allen Rollen außer Rollen, die keinen zugänglichen Namen vom Autor erhalten können.

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

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

Spezifikationen

Siehe auch

• HTML-<label>-Element
• HTML-<legend>-Element
• HTML-<caption>-Element
• aria-label
• aria-describedby