⚡Accessibility

Accessibility Grundlagen

Deine App fuer alle Menschen nutzbar machen

15 Prozent der Weltbevoelkerung haben eine Behinderung. Accessibility ist kein Nice-to-Have, sondern ein Muss. Und das Beste: Die meisten Verbesserungen machen die App fuer ALLE Nutzer besser.

Pro-Tip — Der schnelle Weg
Installiere die axe DevTools Browser-Extension. Sie scannt deine Seite automatisch und zeigt dir Accessibility-Probleme mit konkreten Loesungsvorschlaegen.
Seite 1
1

Semantisches HTML nutzen

Verwende die richtigen HTML-Elemente. button statt div mit onClick. nav fuer Navigation. main fuer Hauptinhalt. header und footer wo sie hingehoeren. Screenreader verstehen semantisches HTML.

<!-- Schlecht -->
<div onClick={handleClick} className="btn">Klick mich</div>


<!-- Gut -->
<button onClick={handleClick}>Klick mich</button>


<!-- Seitenstruktur -->
<header><nav>...</nav></header>
<main>...</main>
<footer>...</footer>
2

Alt-Texte und ARIA Labels

Jedes Bild braucht einen alt-Text. Jeder interaktive Element ohne sichtbaren Text braucht ein aria-label. Dekorative Bilder bekommen alt leer.

<!-- Informatives Bild -->
<img src="chart.png" alt="Umsatz stieg um 25 Prozent im Q3" />


<!-- Dekoratives Bild -->
<img src="bg-pattern.svg" alt="" role="presentation" />


<!-- Icon-Button -->
<button aria-label="Menue oeffnen">
 <MenuIcon />
</button>
3

Keyboard Navigation

Jede Funktion muss mit der Tastatur erreichbar sein. Tab zum Navigieren, Enter zum Aktivieren, Escape zum Schliessen. Teste deine App ohne Maus.

// Focus-Trap fuer Modals
import { FocusTrap } from 'focus-trap-react';


<FocusTrap>
 <dialog open>
 <h2>Modal Titel</h2>
 <button onClick={close}>Schliessen</button>
 </dialog>
</FocusTrap>


// Sichtbarer Focus-Ring
:focus-visible {
 outline: 2px solid #4f46e5;
 outline-offset: 2px;
}
4

Kontrast und Farben

Text muss einen Kontrast von mindestens 4.5:1 haben. Nutze nie Farbe als einziges Unterscheidungsmerkmal. Rot-Gruen-Blindheit betrifft 8 Prozent aller Maenner.

/* Schlecht: Kontrast zu niedrig */
color: #999;
background: #fff;
/* Kontrast: 2.8:1 */


/* Gut: Ausreichend Kontrast */
color: #595959;
background: #fff;
/* Kontrast: 7:1 */
5

Automatisch testen

Bau Accessibility-Tests in deinen Workflow ein. eslint-plugin-jsx-a11y warnt bei Problemen direkt im Code. axe-core testet zur Laufzeit.

npm install eslint-plugin-jsx-a11y


// .eslintrc.js
module.exports = {
 extends: ['plugin:jsx-a11y/recommended']
};


// Laufzeit-Test mit axe
import { axe } from '@axe-core/react';
if (process.env.NODE_ENV === 'development') {
 axe(React, ReactDOM, 1000);
}
Seite 2
Warum das funktioniert
  • 15 Prozent der Weltbevoelkerung profitiert direkt
  • Bessere Accessibility verbessert auch SEO
  • Keyboard Navigation hilft Power-Usern schneller zu arbeiten
  • In vielen Laendern ist Barrierefreiheit gesetzlich vorgeschrieben
Tipps
  • Teste mit einem Screenreader, VoiceOver auf Mac oder NVDA auf Windows
  • Jede Seite braucht eine h1 Ueberschrift und logische Heading-Hierarchie
  • Animationen mit prefers-reduced-motion respektieren
  • Form-Felder brauchen sichtbare Labels, Placeholder reicht nicht
Seite 3
Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen