Die Bedeutung von aria-Tags in der Barrierefreiheit von Webseiten

Aria-Tags im HTML dienen dazu, die Barrierefreiheit von Webseiten zu verbessern, indem sie zusätzliche Informationen über die semantische Bedeutung von Elementen bereitstellen. ARIA steht dabei für "Accessible Rich Internet Applications".

Dreidimensionales Labyrinth. — Bild von PIRO über die Plattform Pixabay

Entwickler sollten beachten, dass aria-Tags nicht das semantische HTML ersetzen, sondern es ergänzen. Das bedeutet, dass Entwickler sich auf die korrekte Verwendung von HTML-Elementen konzentrieren sollten, bevor sie aria-Tags einsetzen.

Ein Übersicht der wichtigsten ARIA-Tags

Es gibt viele aria-Tags, die unterschiedliche Zwecke erfüllen. Einige Beispiele sind:

aria-label: gibt einem Element eine beschreibende Bezeichnung.
Beispiele für die Verwendung von 'aria-label'
aria-labelledby: verweist auf ein Element, das die Bezeichnung für das aktuelle Element enthält.
Beispiele für die Verwendung von 'aria-labelledby'
aria-describedby: verweist auf ein Element, das eine Beschreibung oder weitere Informationen über das aktuelle Element enthält
aria-hidden: gibt an, dass ein Element für assistive Technologien wie Screenreader unsichtbar sein soll
aria-expanded: gibt an, ob ein Element, wie beispielsweise ein Dropdown-Menü, ausgeklappt oder eingeklappt ist

Beispiele für die Verwendung des aria-label-Attributs:

Beispiel 1: Ein Button mit beschreibendem Label

<button type="button" aria-label="Suchen">🔍</button>

gibt assistiven Technologien wie Screenreadern eine Beschreibung des Zwecks des Buttons.

Beispiel 2: Eine Schaltfläche mit dynamischem Label

<button type="button" id="searchButton" aria-label="Suchen">🔍</button>
<input type="text" id="searchInput" placeholder="Suchbegriff eingeben">
<script>
    const searchInput = document.getElementById('searchInput');
    const searchButton = document.getElementById('searchButton');
    searchButton.addEventListener('click', () => {
        const searchTerm = searchInput.value; search(searchTerm);
        searchButton.setAttribute('aria-label', `Suche nach "${searchTerm}"`);
    });
</script>

In diesem Beispiel wird das aria-label-Attribut des Buttons dynamisch aktualisiert, wenn der Benutzer eine Suchanfrage eingibt. Wenn der Benutzer beispielsweise "Pizza" in das Suchfeld eingibt und auf die Schaltfläche klickt, wird das aria-label-Attribut des Buttons auf "Suche nach 'Pizza'" aktualisiert.

Beispiel 3: Ein Bild mit beschreibendem Label

<img src="bild.jpg" alt="" aria-label="Landschaft mit Bergen und See">

In diesem Beispiel erhält das Bild das aria-label-Attribut mit einer beschreibenden Bezeichnung der enthaltenen Landschaft. Dies gibt assistiven Technologien wie Screenreadern eine Beschreibung des Bildinhalts, die dem Benutzer vorgelesen werden kann.

Es ist wichtig zu beachten, dass aria-label-Attribute das semantische HTML-Attribut "alt" nicht ersetzen, sondern ergänzen sollten. Das "alt"-Attribut sollte weiterhin verwendet werden, um eine Beschreibung des Bildinhalts bereitzustellen, wenn das Bild aus irgendeinem Grund nicht angezeigt werden kann.

Beispiele für die Verwendung des aria-labelledby-Attributs:

Verwendung von aria-labelledby mit einer Schaltfläche:

<button aria-labelledby="btn-label">Klicken Sie hier</button>
<span id="btn-label">Drücken Sie diese Schaltfläche, um fortzufahren</span>

Verwendung von aria-labelledby mit einem Formularfeld:

<label id="name-label">Name:</label>
<input type="text" aria-labelledby="name-label" />

Verwendung von aria-labelledby mit einer Tabelle:

<table>
  <caption id="table-caption">Beschreibung der Elemente</caption>
  <thead>
    <tr>
      <th id="th1">Element</th>
      <th id="th2">Beschreibung</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td headers="th1" aria-labelledby="td1-label">Button</td>
      <td headers="th2" id="td1-label">Klicken Sie hier, um fortzufahren</td>
    </tr>
    <tr>
      <td headers="th1" aria-labelledby="td2-label">Checkbox</td>
      <td headers="th2" id="td2-label">Wählen Sie diese Option aus, um fortzufahren</td>
    </tr>
  </tbody>
</table>

In allen obigen Beispielen wird das aria-labelledby-Attribut verwendet, um das Element mit einer Textbeschreibung zu versehen, indem es auf ein anderes Element verweist, das die Beschreibung enthält. Beachten Sie, dass die ID des beschreibenden Elements im Attribut angegeben werden muss.

Hier ist eine Übersicht der verfügbaren ARIA-Tags, gruppiert nach ihrer Verwendung:

Es ist wichtig zu beachten, dass nicht alle ARIA-Tags in allen Situationen sinnvoll oder notwendig sind. Entwickler sollten sich mit jedem Tag vertraut machen und sorgfältig prüfen, welche Tags in ihrem konkreten Anwendungsfall sinnvoll sind. Weitere, noch detaillierte Informationen zu diesem Thema gibt es auf der englisch-sprachigen Webseite vom W3C.