Barrierefreiheit & ARIA‑Labels – Anleitung für Dummies

1. Warum du dich kümmern solltest

• Reichweite – rund 15 % der Menschen leben mit einer Behinderung. Wenn deine Seite sie ausschliesst, verpasst du Besucher:innen und Umsatz.

• SEO‑Boost – saubere Semantik hilft Suchmaschinen, deinen Content besser zu verstehen.

• Recht & Image – in vielen Ländern sind barrierefreie Angebote Pflicht. Ausserdem zeigt es, dass du es ernst meinst mit Inklusion.

2. Die 5 goldenen Barrierefreiheits‑Regeln

1. Semantik first – nutze die richtigen HTML‑Elemente (z. B. <button> statt <div> für klickbare Dinge).

2. Tastatur‑Test – prüfe jede Funktion nur mit Tab, Enter und Leertaste. Wenn es klappt, bist du schon weit.

3. Visueller Fokus – der aktuell fokussierte Bereich muss klar sichtbar sein (Outline, Shadow …).

4. Kontrast & Schriften – mindestens 4.5 : 1 für Text, keine winzigen 10‑px‑Fonts.

5. Alle Medien beschreiben – Alt‑Text fürs Bild, Untertitel fürs Video.

3. Was ist ARIA?

ARIA = Accessible Rich Internet Applications. Es ergänzt HTML, wenn Standard‑Elemente nicht reichen.

Denke an ARIA wie an Gewürze: Eine Prise macht das Gericht besser, zu viel verdirbt es.

4. Die wichtigsten ARIA‑Attribute (Cheat‑Sheet)

5. Landmarks – Wegweiser für Screenreader

Was sind Landmarks? Denk an sie wie an Wegweiser in einem Gebäude: „Hier geht’s zum Empfang“, „Hier zur Kantine“. Screenreader bauen aus Landmarks ein Inhaltsverzeichnis, damit Nutzende blitzschnell von Abschnitt zu Abschnitt springen können.

5.1 Warum du Landmarks brauchst

• Zeitsparend: Ein einzelnes Shortcut‑Tastenkürzel (NVDA = D, VoiceOver = ⌃⌥⌘ L) reicht, um durch alle Landmarks zu zappen.

• Klare Orientierung: „Main Content“, „Navigation“, „Footer“ – sofort erkennbar, wo man sich befindet.

• WCAG 2.1 §1.3.1 & 2.4.1: Struktur muss programmatisch erkennbar sein.

5.2 Die sechs Standard‑Landmarks

Tipp: Wenn du mehrere Landmarks desselben Typs hast, benenne sie mit aria-label oder aria-labelledby, z. B. <nav aria-label="Footer‑Navigation">.

6. Schritt‑für‑Schritt‑Checkliste

1. Template prüfen – gibt es bereits ein <main>? Wenn nein: nachrüsten.

2. Navigation labeln – bei mehr als einer <nav> jeder ein aria-label geben (z. B. "Hauptnavigation", "Footer‑Links").

3. Buttons checken – sind es echte <button>s? Haben Toggle‑Buttons aria-pressed oder aria-expanded?

4. Formulare testen – jedes <input> braucht ein <label> oder aria-label/aria-labelledby.

5. Medien – Bilder: aussagekräftiger Alt‑Text. Videos: Untertitel. PDFs: getaggte Struktur.

6. Keyboard‑Durchlauf – einmal komplett mit Tab durchgehen (Safari/Firefox: Tab‑Navigation aktivieren!).

7. Automatischer Scan – Lighthouse, axe DevTools oder den Accessible Web Page Scanner laufen lassen und Fehlermeldungen fixen.

7. Code‑Beispiel: Mini‑Accordion

<section class="faq">
  <h2>FAQ</h2>

  <button class="faq-toggle" aria-expanded="false" aria-controls="faq1">
    Was ist ARIA?
  </button>
  <div id="faq1" hidden>
    <p>ARIA ergänzt HTML, um Web‑Apps für Screenreader verständlich zu machen.</p>
  </div>
</section>

<script>
  const btns = document.querySelectorAll('.faq-toggle');
  btns.forEach(btn => {
    btn.addEventListener('click', () => {
      const expanded = btn.getAttribute('aria-expanded') === 'true';
      btn.setAttribute('aria-expanded', !expanded);
      document.getElementById(btn.getAttribute('aria-controls')).hidden = expanded;
    });
  });
</script>

Was passiert hier?

• Der Button bekommt dynamisch aria-expanded → Screenreader sagt „eingeklappt“ / „ausgeklappt“.

• aria-controls verbindet Button und Panel.

• Das Panel ist mit hidden ausgeblendet, bis es geöffnet wird.

8. Nützliche Tools & Links

(Alle Tools sind kostenlos oder haben eine Free‑Tier.)

9. TL;DR zum Mitnehmen

Wenn du richtiges HTML verwendest und ein paar ARIA‑Labels sauber setzt, bist du zu 80 % barrierefrei. Teste alles mit der Tastatur und lass einen Scanner drüberlaufen – fertig!

Lieben Gruss & happy coding – Max