HTML/Attribute/aria-labelledby

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Das aria-labelledby-Attribut verweist auf ein Element (oder mehrere), um mit deren Textinhalt(en) eine nähere Beschreibung anzugeben.

erlaubte Werte

Zeichenkette

default-Wert -
erlaubt in allen Elementen
Beispiel 
<form>
  <table>
    <thead>
      <tr><th>Nr.</th><th id="zweck">Spielername</th></tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>
          <input aria-labelledby="zweck" name="player1">
        </td>
      </tr>
      <tr>
        <td>2</td>
        <td>
          <input aria-labelledby="zweck" name="player2">
        </td>
      </tr>
      <tr>
        <td>3</td>
        <td>
          <input aria-labelledby="zweck attr" id="Nr. 3" name="player3">
        </td>
      </tr>
    </tbody>
  </table>
  <button name="save">speichern</button>
</form>


Beachten Sie: Im obigen Beispiel wurde als Inhalt für aria-labelledby der ID-Wert der entsprechenden Spaltenüberschrift verwendet. Für assistive Technologien bedeutet das, dass das Texteingabefeld als Beschriftung „Spielername“ bekommt.
Sollten Sie mehrere IDs als Attributwert für aria-labelledby verwenden, werden die Textinhalte der referenzierten Elemente in der notierten Reihenfolge zusammengefasst und als Beschriftung gedeutet. Im obigen Beispiel bekommt das dritte textarea-Element als Beschriftung „Spielername Nr. 3“, weil im Attributwert zuerst zweck auf das th-Element mit dem Textinhalt „Spielername“ verweist, und das Schlüsselwort attr auf den eigenen ID-Wert des Elements.
Empfehlung: Besser ist die Verwendung eines label-Elements, welches individuell für das jeweilige Eingabeelement steht. Im Falle dieser tabellarischen Eingabe, bei der die Spaltenüberschrift für alle Eingabefelder gilt, kann man sich mit diesem aria-Attribut behelfen.

Siehe auch

Weblinks

Liste der HTML-Attribute

Abgerufen am 22.11.2025
von "http://wiki.selfhtml.org/wiki/HTML/Attribute/aria-labelledby"