> For the complete documentation index, see [llms.txt](https://gitbook.dev-becker.de/barrierefreie-webseiten/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gitbook.dev-becker.de/barrierefreie-webseiten/wai-aria-attribute.md).

# WAI-ARIA-Attribute

#### 1. **Grundlegende ARIA-Attribute**

Die wichtigsten ARIA-Attribute sind `role`, `aria-label`, `aria-labelledby`, und `aria-describedby`. Diese Attribute beschreiben die Funktion oder den Status eines Elements, um es verständlicher zu machen.

* **role**: Weist einem Element eine spezifische Rolle zu.
* **aria-label**: Gibt einem Element einen beschreibenden Namen.
* **aria-labelledby**: Verknüpft ein Element mit einem anderen, das es beschreiben soll.
* **aria-describedby**: Verweist auf ein Element, das zusätzliche Informationen liefert.

**Beispiel:**

```html
<button role="button" aria-label="Formular absenden">Absenden</button>
```

#### 2. **`role`-Attribut**

Mit dem `role`-Attribut können HTML-Elementen spezielle Rollen zugewiesen werden. Es ist besonders nützlich, wenn man keine semantischen HTML-Tags verwenden kann.

| Rolle        | Beschreibung                                      |
| ------------ | ------------------------------------------------- |
| `button`     | Definiert ein Element als Schaltfläche            |
| `alert`      | Für Warnungen oder Fehler, wird sofort vorgelesen |
| `navigation` | Definiert eine Navigationsleiste                  |
| `main`       | Der Hauptinhalt der Seite                         |
| `banner`     | Definiert einen Seitenkopfbereich                 |
| `dialog`     | Ein Dialogfeld wie ein Popup                      |

**Beispiel für eine benutzerdefinierte Schaltfläche:**

```html
<div role="button" tabindex="0" onclick="submitForm()">Absenden</div>
```

> Hinweis: Bei Verwendung von `role="button"` auf einem `<div>` sollte das `tabindex="0"` hinzugefügt werden, damit die Schaltfläche mit der Tab-Taste erreicht werden kann.

#### 3. **`aria-label`**

Das `aria-label`-Attribut wird verwendet, um einem Element einen beschreibenden Namen zu geben, insbesondere wenn kein visueller Text vorhanden ist.

**Beispiel für eine Navigation mit Icons:**

```html
<nav>
  <a href="#home" aria-label="Zur Startseite"><i class="icon-home"></i></a>
  <a href="#search" aria-label="Suche öffnen"><i class="icon-search"></i></a>
</nav>
```

#### 4. **`aria-labelledby`**

Das `aria-labelledby`-Attribut verknüpft ein Element mit einem anderen, das eine beschreibende Überschrift enthält. Es ist besonders hilfreich für Formularelemente.

**Beispiel:**

```html
<label id="email-label">E-Mail-Adresse:</label>
<input type="email" id="email" aria-labelledby="email-label">
```

> Hier verweist das Eingabefeld (`input`) auf das Label, und der Screenreader liest beim Fokusieren „E-Mail-Adresse“ vor.

#### 5. **`aria-describedby`**

Mit `aria-describedby` wird eine zusätzliche Beschreibung für ein Element angegeben. Dies ist besonders hilfreich für Formulare mit erklärenden Texten oder Anweisungen.

**Beispiel:**

```html
<label for="username">Nutzername:</label>
<input type="text" id="username" aria-describedby="username-help">
<span id="username-help">Der Nutzername muss mindestens 8 Zeichen enthalten.</span>
```

> Wenn sich der Nutzer auf das Eingabefeld fokussiert, liest der Screenreader den Hinweis „Der Nutzername muss mindestens 8 Zeichen enthalten.“

***

#### 6. **Arbeiten mit `aria-hidden`**

`aria-hidden="true"` versteckt ein Element vor Screenreadern, selbst wenn es visuell angezeigt wird. Es ist nützlich, wenn bestimmte Inhalte nicht vorgelesen werden sollen.

**Beispiel für ein dekoratives Bild:**

```html
<img src="design-element.png" alt="" aria-hidden="true">
```

> Da das Bild rein dekorativ ist, sollte es nicht für Screenreader zugänglich sein.

***

#### 7. **Zustandsangaben mit ARIA-Attributen**

Es gibt verschiedene `aria-*`-Attribute, die den Status von Elementen beschreiben. Diese Statusattribute helfen Screenreader-Nutzern, die aktuelle Situation oder den Status eines Elements zu verstehen.

| ARIA-Attribut   | Bedeutung                                             |
| --------------- | ----------------------------------------------------- |
| `aria-expanded` | Gibt an, ob ein Element (z. B. ein Menü) geöffnet ist |
| `aria-checked`  | Zeigt den Status einer Checkbox an                    |
| `aria-selected` | Markiert ein ausgewähltes Element                     |
| `aria-disabled` | Zeigt an, dass ein Element deaktiviert ist            |

**Beispiel für ein aufklappbares Menü:**

```html
<button aria-expanded="false" aria-controls="menu" onclick="toggleMenu()">Menü</button>
<ul id="menu" style="display: none;">
  <li><a href="#home">Startseite</a></li>
  <li><a href="#services">Dienstleistungen</a></li>
  <li><a href="#contact">Kontakt</a></li>
</ul>

<script>
function toggleMenu() {
  const menu = document.getElementById("menu");
  const isExpanded = menu.style.display === "block";
  menu.style.display = isExpanded ? "none" : "block";
  document.querySelector("button[aria-controls='menu']").setAttribute("aria-expanded", !isExpanded);
}
</script>
```

> Der Screenreader erkennt nun, ob das Menü geöffnet (`aria-expanded="true"`) oder geschlossen (`aria-expanded="false"`) ist.

***

#### 8. **Dynamische Inhalte und `aria-live`**

Wenn Inhalte dynamisch aktualisiert werden (z. B. bei Benachrichtigungen oder Ladezuständen), können `aria-live`-Regionen verwendet werden, damit Screenreader automatisch diese Änderungen vorlesen.

| Wert                    | Bedeutung                                           |
| ----------------------- | --------------------------------------------------- |
| `aria-live="polite"`    | Updates werden vorgelesen, wenn der Nutzer pausiert |
| `aria-live="assertive"` | Updates werden sofort vorgelesen                    |

**Beispiel für eine Ladeanzeige:**

```html
<div aria-live="polite" id="status">Bitte warten, die Daten werden geladen...</div>
```

> Sobald sich der Text innerhalb des `status`-Divs ändert, informiert der Screenreader den Nutzer darüber.

***

#### 9. **`aria-controls`, `aria-owns`, und `aria-flowto`**

Diese Attribute werden genutzt, um eine Verbindung oder Reihenfolge zwischen Elementen herzustellen.

* **`aria-controls`**: Zeigt, dass ein Element ein anderes steuert.
* **`aria-owns`**: Definiert die visuelle Hierarchie, z. B. bei verschachtelten Elementen.
* **`aria-flowto`**: Bestimmt die Lesereihenfolge für Screenreader.

**Beispiel mit `aria-controls`:**

```html
<button aria-controls="details" onclick="toggleDetails()">Details anzeigen</button>
<div id="details" hidden>
  <p>Hier sind die Details zum Produkt...</p>
</div>
```

***

#### Zusammenfassung

Mit ARIA-Attributen kannst du die Zugänglichkeit deiner Webseite signifikant verbessern. Hier sind die wichtigsten Punkte noch einmal zusammengefasst:

1. **Beschreibende Labels**: Verwende `aria-label`, `aria-labelledby`, und `aria-describedby`, um Elemente zu beschreiben.
2. **Zustandsverwaltung**: Nutze `aria-expanded`, `aria-selected`, `aria-checked`, um den Zustand von Elementen zu definieren.
3. **Verbindung und Kontrolle**: Setze `aria-controls`, `aria-owns`, und `aria-flowto`, um die Reihenfolge und Struktur zu verdeutlichen.
4. **Live-Updates**: Mit `aria-live` kannst du dynamische Inhalte für Screenreader aktualisieren.

Mit diesen Grundlagen hast du eine solide Basis, um ARIA-Attribute sinnvoll in deiner WordPress-Seite einzusetzen.