Barrierefreiheit: alt, Überschriften-Hierarchie und ARIA

Meistere Alternativtexte, eine Überschriften-Hierarchie, durch die Screenreader wirklich navigieren können, und einen ARIA-Einsatz, der auf die Fälle beschränkt bleibt, in denen natives HTML an seine Grenzen stößt.

9 Min. · 3 Fragen

Barrierefreiheit ist keine kosmetische Schicht, die man am Ende eines Projekts aufschraubt: Sie ist eine strukturelle Eigenschaft deines HTML. Als Erstes das Attribut alt. Ein guter Alternativtext beschreibt die Funktion des Bildes in seinem Kontext, nicht sein Aussehen Pixel für Pixel. Ein Verkaufsdiagramm wird nicht als "blaues Balkendiagramm" beschrieben, sondern über die Information, die es transportiert. Und ein rein dekoratives Bild muss ein leeres alt="" bekommen: Es ist das explizite Signal, das dem Screenreader sagt, es zu überspringen. Das Attribut wegzulassen ist die schlechteste Option von allen, denn dann liest der Screenreader den Dateinamen vor.

<img src="sales-chart.png"
     alt="2025 sales: +18% in the last quarter">

<img src="divider-ornament.png" alt="">

Zweite Aufgabe: die Überschriften-Hierarchie. Nutzer von Screenreadern springen ganz überwiegend von Überschrift zu Überschrift, um sich eine mentale Karte der Seite aufzubauen. Deine Gliederung h1 → h2 → h3 muss deshalb die logische Struktur des Inhalts widerspiegeln, niemals die visuelle Größe, die du gerade haben möchtest. Zwei nicht verhandelbare Regeln: eine einzige h1 pro Seite und keine übersprungenen Ebenen (keine h4 direkt unter einer h2). Wenn eine Überschrift "zu groß" wirkt, korrigiere das in CSS, nicht indem du ihre semantische Ebene herabstufst.

<h1>Dashboard</h1>
<section>
  <h2>Statistics</h2>
  <h3>Monthly visits</h3>
  <h3>Conversion rate</h3>
</section>
<section>
  <h2>Exportable reports</h2>
</section>

ARIA wird legitim, wenn natives HTML einen dynamischen Zustand nicht ausdrücken kann: ein Menü, das offen oder geschlossen ist, eine Region, die live aktualisiert wird, ein aktiver Tab. Die wichtigsten Attribute sind aria-expanded (Zustand offen/geschlossen), aria-controls (Verknüpfung zum gesteuerten Element) und aria-live (Ankündigung von Aktualisierungen). Merke dir das Prinzip: Natives HTML liefert die Rollen, ARIA ergänzt die Zustände und Eigenschaften, die dein JavaScript im Lauf der Zeit ändert.

<button aria-expanded="false" aria-controls="menu">
  Menu
</button>
<ul id="menu" hidden>
  <li><a href="/profile">Profile</a></li>
  <li><a href="/settings">Settings</a></li>
</ul>

Wissenscheck

Stelle sicher, dass du die wichtigsten Punkte dieser Lektion behalten hast.

1. Wie solltest du ein rein dekoratives Bild behandeln?
   • Ihm einen beschreibenden alt geben, etwa alt="Ornament"
   • Ihm ein leeres alt-Attribut geben: alt=""
   • Das alt-Attribut ganz entfernen
   • title statt alt verwenden
2. Unter einer h2 möchtest du eine visuell dezente Unterüberschrift. Was tust du?
   • Eine h5, weil sie standardmäßig kleiner ist
   • Eine h3, deren Größe du in CSS verkleinerst
   • Ein div mit einer Überschriften-Klasse
3. Wann ist es angebracht, ARIA-Attribute hinzuzufügen?
   • Bei jedem interaktiven Element, nur zur Sicherheit
   • Wenn kein natives HTML-Element die benötigte Rolle oder den benötigten Zustand ausdrückt
   • Um das Suchmaschinen-Ranking der Seite zu verbessern