# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://gitbook.dev-becker.de/barrierefreie-webseiten/wai-aria-attribute.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.