Skip to main content
Knowledge Academy

Ausbildung & Best Practices für barrierefreies Web.

Lerne Barrierefreiheit von Experten: strukturierte Kurse, Checklisten und Code-Snippets für Entwickler und Designer.

86
WCAG Kriterien
3
Masterclasses
100%
Praxisorientiert

Wabiy Academy Curriculum

Fundiertes Wissen für moderne Frontend-Entwicklung und barrierefreies UI-Design.

Knowledge Academy

Wissen, das den Unterschied macht.

Fundierte Kurse und Leitfäden von Barrierefreiheits-Experten. Kostenlose Grundlagen und spezialisierte Profi-Trainings.

Wabiy Academy Free & Pro Curriculums
Kostenlos 4h 30m

Barrierefreiheit Grundlagen & WCAG 2.2

Der ideale Einstieg für Entwickler, Designer und Product Owner in die Kernprinzipien des barrierefreien Webs.

8 Lektionen Kurs starten
Advanced 6h 15m

Barrierefreie UI-Komponenten in React

Modale, Dropdowns, Akkordeons und Formulare mit perfekter Tastaturbedienung und ARIA-Semantik programmieren.

12 Lektionen Kurs starten
Advanced 3h 45m

BFSG & Europäischer Accessibility Act 2025

Rechtliche Rahmenbedingungen, Fristen, Konformitätsanforderungen und praktische Umsetzung.

6 Lektionen Kurs starten
Interaktive Kriterien-Matrix

Die 4 Prinzipien der WCAG 2.2 aufgeschlüsselt

86 Kriterien für WCAG 2.2, EN 301 549 & BFSG
1

Wahrnehmbar (Perceivable)

Informationen und UI-Komponenten müssen so dargestellt werden, dass Nutzer sie wahrnehmen können.

1.1.1 Non-text Content Level A

Textalternativen für Bilder & Icons

1.3.1 Info and Relationships Level A

Semantische HTML-Hierarchie

1.4.3 Contrast (Minimum) Level AA

4.5:1 Textkontrast zum Hintergrund

1.4.11 Non-text Contrast Level AA

3:1 Kontrast für UI-Elemente & Icons

2

Bedienbar (Operable)

Komponenten der Benutzeroberfläche und die Navigation müssen ohne Barrieren bedienbar sein.

2.1.1 Keyboard Level A

Alle Funktionen per Tastatur nutzbar

2.1.2 No Keyboard Trap Level A

Kein Festhängen im Fokus

2.4.7 Focus Visible Level AA

Sichtbarer Tastatur-Fokusindikator

2.5.8 Target Size (Minimum) Level AA

24x24px Mindest-Tippbereich (WCAG 2.2)

3

Verständlich (Understandable)

Informationen und die Bedienung der Benutzeroberfläche müssen für alle verständlich sein.

3.1.1 Language of Page Level A

Korrektes lang-Attribut im HTML

3.2.6 Consistent Help Level A

Einheitliche Hilfe-Positionen (WCAG 2.2)

3.3.2 Labels or Instructions Level A

Eindeutige Formular-Labels

3.3.8 Accessible Authentication Level AA

Keine kognitiven Login-Tests (WCAG 2.2)

4

Robust (Robust)

Inhalte müssen robust genug sein, um von modernen Browsern und Screenreadern zuverlässig interpretiert zu werden.

4.1.2 Name, Role, Value Level A

Standard ARIA & DOM-Attribute

4.1.3 Status Messages Level AA

Live-Regionen für Screenreader

Der Wabiy Vorteil

Echter Quellcode statt oberflächlicher Overlays.

Warum JavaScript-Overlay-Widgets digitale Barrieren nicht lösen – und wie Wabiy Ihre Webseiten direkt an der Wurzel barriereärmer macht.

Der Wabiy Deep-Code-AnsatzDauerhafte Barrierefreiheit

Echte Barrierefreiheit direkt an der Wurzel

Präzise Quellcode- & DOM-Reparatur

Wabiy identifiziert semantische Fehler im HTML, repariert Farbkontraste und optimiert ARIA-Attribute dauerhaft.

Automatisierte Git-Diffs & Pull Requests

Entwickler erhalten sofort einsatzbereite Code-Snippets und GitHub/GitLab-Diffs für React, Vue, Svelte und Plain HTML.

0 ms Ladezeit-Impact & 100% DSGVO

Kein schweres Third-Party-Widget im Browser. Die Barrierefreiheit ist fest in Ihrem sauberen HTML5 verankert.

Ganzheitlich von Code bis Medien

Kombiniert DOM-Scans mit barrierefreien Video-Untertiteln (WebVTT), Meldekanal und integrierter Entwickler-Academy.

Unterstützt WCAG 2.2 & BFSG 2025
100% Native Code
component.tsx — accessible
GIT DIFF APPLIED
// Wabiy Generierter Pull Request:
- <button className="btn"><IconSearch /></button>
+ <button
+   className="btn focus:ring-2 focus:ring-teal-500"
+   aria-label="Produkte durchsuchen">
+   <IconSearch aria-hidden="true" />
+ </button>
0ms Overhead • Screenreader kompatibel • Tastaturfokus aktiv

Wabiy Code Guard

Für echte digitale Inklusion entwickelt.

Engine

Tiefe DOM- & Kontrast-Engine

Analysiert Farbkontraste im tatsächlichen Rendering-Kontext, erkennt Tastaturfallen und unvollständige ARIA-Bäume.

Wabiy Standard
Developer

Automatisierte Git-Code-Fixes

Wandelt Barrieren mit einem Klick in präzise Code-Diffs für React, Vue, Tailwind und HTML um.

Wabiy Standard
Media

Media Subtitles & Transkripte

Integrierter WebVTT & SRT Untertitel-Editor für barrierefreie Videos und Screenreader-Transkripte.

Wabiy Standard
Team & User

Academy & Feedback-Portal

Interaktive Lernpfade für Teams plus standardisierter Feedback-Kanal für Menschen mit Einschränkungen.

Wabiy Standard

Baue ein Web, das für alle funktioniert.

Starte jetzt mit einem kostenlosen Check oder entdecke die gesamte Wabiy Plattform.

Prüfung nach WCAG 2.2BFSG 2025 KriterienKostenlos & ohne Registrierung