Anti-Patterns – Häufige Fehler

Diese Seite zeigt häufige Barrierefreiheitsfehler und ihre korrekten Alternativen. Die fehlerhaften Beispiele sind als Code dargestellt, nicht als funktionierendes HTML, um selbst keine Barrieren zu erzeugen.

❌ Div als Button

<!-- Falsch -->
<div class="btn" onclick="doSomething()">Klick mich</div>

<!-- Richtig -->
<button type="button" onclick="doSomething()">Klick mich</button>

Problem: Nicht fokussierbar, keine Rolle, kein Tastatur-Event, nicht im Accessibility Tree.

❌ Fehlende Labels

<!-- Falsch -->
<input type="text" placeholder="Suchbegriff eingeben">

<!-- Richtig -->
<label for="search">Suchbegriff</label>
<input type="text" id="search" placeholder="z.B. Yoga, Spanisch">

Problem: Placeholder ist kein Label. Verschwindet bei Eingabe. Oft zu geringer Kontrast.

❌ outline: none ohne Ersatz

<!-- Falsch -->
*:focus { outline: none; }

<!-- Richtig -->
*:focus-visible {
  outline: 3px solid #1a56c2;
  outline-offset: 2px;
}

Problem: Tastaturnutzer sehen nicht, welches Element fokussiert ist.

❌ Bild ohne Alt-Text

<!-- Falsch -->
<img src="kurs.jpg">

<!-- Richtig (informativ) -->
<img src="kurs.jpg" alt="Teilnehmer beim Keramikkurs">

<!-- Richtig (dekorativ) -->
<img src="trenner.png" alt="">

Problem: Screenreader liest den Dateinamen vor.

❌ Nichtssagende Linktexte

<!-- Falsch -->
<a href="/kurse">Hier klicken</a>
<a href="/kurse">Mehr</a>
<a href="/kurse">Link</a>

<!-- Richtig -->
<a href="/kurse">Alle Kurse anzeigen</a>

Problem: In der Screenreader-Link-Liste erscheinen nur «Hier klicken», «Mehr», «Link» – ohne Kontext.

❌ Falsche Heading-Hierarchie

<!-- Falsch -->
<h1>Willkommen</h1>
<h4>Unsere Kurse</h4>  <!-- h2, h3 übersprungen -->

<!-- Richtig -->
<h1>Willkommen</h1>
<h2>Unsere Kurse</h2>

Problem: Screenreader-Nutzer navigieren über Headings. Übersprungene Ebenen verwirren die Seitenstruktur.

❌ Tabindex grösser als 0

<!-- Falsch -->
<button tabindex="5">Zuerst</button>
<button tabindex="1">Dann</button>

<!-- Richtig: Natürliche DOM-Reihenfolge verwenden -->
<button>Zuerst</button>
<button>Dann</button>

Problem: Positive tabindex-Werte erzeugen unvorhersehbare und schwer wartbare Tab-Reihenfolgen.

❌ Autoplay mit Ton

<!-- Falsch -->
<video autoplay>
  <source src="intro.mp4">
</video>

<!-- Richtig -->
<video controls muted>
  <source src="intro.mp4">
  <track kind="captions" src="intro-de.vtt" srclang="de" label="Deutsch">
</video>

Problem: Automatischer Ton stört Screenreader-Nutzung und kann nicht kontrolliert werden.