ARIA-Attribute in HTML

Was ist ARIA?

ARIA (Accessible Rich Internet Applications) ist eine Sammlung von Attributen, die HTML-Elementen zusätzliche semantische Bedeutung verleihen, um die Barrierefreiheit von Webinhalten zu verbessern. ARIA-Attribute helfen Screenreadern und anderen Hilfstechnologien, dynamische und interaktive Webinhalte korrekt zu interpretieren.

<button aria-pressed="false">Menü öffnen</button>

Wann sollte ARIA verwendet werden?

ARIA sollte nach dem Prinzip “Keine ARIA ist besser als schlechte ARIA” eingesetzt werden:

Verwenden Sie native HTML-Elemente mit eingebauter Barrierefreiheit, wann immer möglich
Setzen Sie ARIA nur ein, wenn die semantischen Funktionen von HTML nicht ausreichen
Testen Sie Ihre ARIA-Implementierung mit Screenreadern und Tastaturnavigation

Grundlegende ARIA-Kategorien

Rollen (roles)

Mit dem role-Attribut können Sie die beabsichtigte Funktion eines Elements definieren:

<!-- Ein DIV, das als Navigationselement dient -->
<div role="navigation">
  <!-- Navigationselemente -->
</div>

<!-- Besser: Das semantische nav-Element verwenden -->
<nav>
  <!-- Navigationselemente -->
</nav>

Häufig verwendete Rollen:

Landmark-Rollen: banner, navigation, main, complementary, contentinfo
Struktur-Rollen: heading, region, article, group
Widget-Rollen: button, tab, tabpanel, menu, menuitem, dialog
Live-Region-Rollen: alert, status, timer, marquee

Eigenschaften (properties)

ARIA-Eigenschaften beschreiben den Zustand, die Beziehung oder die Funktionalität eines Elements:

<!-- Label für ein benutzerdefiniertes Widget -->
<div role="button" aria-label="Schliessen">✕</div>

<!-- Element mit ausgeblendeter Beschriftung verknüpfen -->
<div role="combobox" aria-labelledby="dropdown-label">
  <!-- Combobox-Inhalt -->
</div>
<span id="dropdown-label" class="hidden">Sprache auswählen</span>

<!-- Alternative Bildbeschreibung -->
<div role="img" aria-label="Logo der Firma XYZ"></div>

Häufig verwendete Eigenschaften:

aria-label: Definiert einen String als Beschriftung
aria-labelledby: Verweist auf ein Element, das als Beschriftung dient
aria-describedby: Verweist auf ein Element, das eine Beschreibung bietet
aria-required: Kennzeichnet ein erforderliches Eingabefeld
aria-hidden: Versteckt ein Element vor assistiven Technologien

Zustände (states)

ARIA-Zustände beschreiben die dynamischen Bedingungen eines Elements, die sich durch Benutzerinteraktion ändern können:

<!-- Ein aufklappbares Panel -->
<button aria-expanded="false" aria-controls="panel1">Details anzeigen</button>
<div id="panel1" hidden>
  <!-- Panel-Inhalt, anfangs ausgeblendet -->
</div>

<!-- Ein Tab, der aktuell ausgewählt ist -->
<div role="tab" aria-selected="true">Tab 1</div>

<!-- Eine Checkbox im ausgewählten Zustand -->
<div role="checkbox" aria-checked="true">Zustimmung</div>

Häufig verwendete Zustände:

aria-expanded: Gibt an, ob ein Element erweitert ist
aria-selected: Gibt an, ob ein Element ausgewählt ist
aria-checked: Gibt den Auswahlstatus einer Checkbox oder Option an
aria-disabled: Gibt an, ob ein Element deaktiviert ist
aria-pressed: Gibt den gedrückten Zustand eines Schalters an

ARIA in Formularen

ARIA-Attribute können die Barrierefreiheit von Formularen erheblich verbessern:

<!-- Fehlerhinweis für ein Formularfeld -->
<label for="username">Benutzername:</label>
<input
  type="text"
  id="username"
  aria-invalid="true"
  aria-describedby="username-error"
/>
<div id="username-error" class="error">
  Benutzername muss mindestens 5 Zeichen enthalten
</div>

<!-- Gruppierung zusammengehöriger Formularelemente -->
<div role="group" aria-labelledby="shipping-address">
  <h3 id="shipping-address">Lieferadresse</h3>
  <!-- Adressfelder -->
</div>

Wichtige ARIA-Attribute für Formulare:

aria-invalid: Kennzeichnet ein ungültiges Eingabefeld
aria-describedby: Verknüpft eine Fehlermeldung oder Hinweis mit einem Eingabefeld
aria-required: Kennzeichnet ein Pflichtfeld
aria-errormessage: Verweist auf ein Element, das eine Fehlermeldung enthält

Dynamische Komponenten mit ARIA

Akkordeon/Collapse

<div class="accordion">
  <h3>
    <button aria-expanded="false" aria-controls="section1">Abschnitt 1</button>
  </h3>
  <div id="section1" hidden>
    <p>Inhalt des ersten Abschnitts...</p>
  </div>

  <h3>
    <button aria-expanded="true" aria-controls="section2">Abschnitt 2</button>
  </h3>
  <div id="section2">
    <p>Inhalt des zweiten Abschnitts...</p>
  </div>
</div>

Tabs

<div role="tablist" aria-label="Programmiersprachen">
  <button role="tab" aria-selected="true" aria-controls="panel1" id="tab1">
    HTML
  </button>
  <button role="tab" aria-selected="false" aria-controls="panel2" id="tab2">
    CSS
  </button>
  <button role="tab" aria-selected="false" aria-controls="panel3" id="tab3">
    JavaScript
  </button>
</div>

<div id="panel1" role="tabpanel" aria-labelledby="tab1">
  <p>HTML ist die Auszeichnungssprache für Webseiten.</p>
</div>
<div id="panel2" role="tabpanel" aria-labelledby="tab2" hidden>
  <p>CSS ist für die Gestaltung zuständig.</p>
</div>
<div id="panel3" role="tabpanel" aria-labelledby="tab3" hidden>
  <p>JavaScript fügt Interaktivität hinzu.</p>
</div>

<button aria-haspopup="dialog" aria-controls="dialog1">Dialog öffnen</button>

<div
  id="dialog1"
  role="dialog"
  aria-labelledby="dialog1-title"
  aria-modal="true"
  hidden
>
  <h2 id="dialog1-title">Bestätigung</h2>
  <p>Möchten Sie diese Aktion wirklich durchführen?</p>
  <div>
    <button>Abbrechen</button>
    <button>Bestätigen</button>
  </div>
</div>

Best Practices für ARIA

Erst HTML, dann ARIA: Verwenden Sie semantische HTML-Elemente, bevor Sie zu ARIA greifen
Keine redundanten Rollen: Fügen Sie keine ARIA-Rolle hinzu, die dem nativen Zweck des Elements entspricht
```

<button role="button">Klick mich</button>
```
Aktualisieren Sie ARIA-Zustände dynamisch: Verwenden Sie JavaScript, um ARIA-Attribute bei Benutzerinteraktionen zu aktualisieren
Testen Sie mit Screenreadern:: Um Ihre Implementierung zu überprüfen
Verstecken Sie dekorative Elemente: Nutzen Sie aria-hidden="true" für rein visuelle Elemente ohne semantische Bedeutung
Prüfen Sie die Tastaturzugänglichkeit: Stellen Sie sicher, dass alle interaktiven Elemente per Tastatur bedienbar sind

Zu vermeidende Fehler

<!-- FALSCH: Button ohne zugänglichen Namen -->
<div role="button" onclick="doSomething()"></div>

<!-- RICHTIG: Button mit zugänglichem Namen -->
<div role="button" aria-label="Löschen" onclick="doSomething()"></div>

<!-- BESSER: Natives Button-Element verwenden -->
<button onclick="doSomething()">Löschen</button>

<!-- FALSCH: Falsches Elternelement -->
<ul>
  <div role="listitem">Element 1</div>
</ul>

<!-- RICHTIG: Korrekte Verschachtelung -->
<ul>
  <li>Element 1</li>
</ul>

Vorbereitung für Aufgabe: details/summary Elemente

Die HTML-Elemente <details> und <summary> bieten eine eingebaute Möglichkeit, aufklappbare Inhalte zu erstellen.

<details> ist der Container für ausklappbare Inhalte
<summary> definiert die sichtbare Überschrift/Zusammenfassung, die immer sichtbar ist
Der Inhalt innerhalb von <details> (ausserhalb von <summary>) wird nur angezeigt, wenn das Element geöffnet ist
Diese Elemente bieten bereits eine grundlegende Barrierefreiheit und Tastaturunterstützung

Hier ein einfaches Beispiel:

<details>
  <summary>Klick mich, um mehr zu sehen</summary>
  <p>Dieser Text wird nur angezeigt, wenn das details-Element geöffnet ist.</p>
</details>

Übung: Akkordeon-Menü mit HTML5

Erstellen Sie eine neue Seite “faq.html” mit häufig gestellten Fragen:
- Mit der üblichen Navigation und Struktur
- Verwenden Sie <details> und <summary> für die Fragen und Antworten
- Mindestens 6 FAQ-Einträge zu verschiedenen Aspekten Ihres Blogs
- Ergänzen Sie die nativen Elemente mit ARIA-Attributen:
  - aria-expanded für den aktuellen Zustand
  - aria-controls für die Beziehung zwischen Frage und Antwort
  - aria-hidden für eingeklappte Bereiche
Verbessern Sie die Barrierefreiheit Ihrer Navigation:
- Fügen Sie aria-current=“page” zum aktiven Navigationslink hinzu
- Verwenden Sie aria-label für Icons oder Buttons ohne sichtbaren Text
- Falls Sie ein mobiles Menü haben, nutzen Sie aria-expanded für den Menü-Button
Optimieren Sie alle Formulare für Barrierefreiheit:
- Stellen Sie sicher, dass alle Formularfelder Labels haben
- Verwenden Sie aria-required für Pflichtfelder
- Nutzen Sie aria-describedby, um Felder mit Hilfstexten zu verknüpfen
- Implementieren Sie aria-invalid für Fehlerzustände
Erstellen Sie eine Live-Region für Statusmeldungen:
- Fügen Sie auf einer Formularseite (z.B. Kontaktformular) einen Bereich für Statusmeldungen hinzu
- Verwenden Sie aria-live=“polite” für diesen Bereich
- Simulieren Sie eine Erfolgsmeldung nach dem Absenden des Formulars
Überprüfen Sie alle Ihre Bilder auf Barrierefreiheit:
- Stellen Sie sicher, dass alle Bilder aussagekräftige alt-Attribute haben
- Dekorative Bilder sollten alt="" haben
- Komplexe Bilder sollten ausführlichere Beschreibungen bekommen