| 1.1.1 Textalternativen |
A |
✓ Erfüllt |
Dekorative SVGs mit aria-hidden, aussagekräftige Link-Labels; Tool-Screenshots mit individuell gepflegten Alt-Texten versehen |
| 1.3.1 Info und Beziehungen |
A |
✓ Erfüllt |
Semantische HTML5-Struktur (header, main, nav, footer, section) |
| 1.3.4 Ausrichtung |
AA |
✓ Erfüllt |
Keine Ausrichtungsbeschränkung auf Portrait oder Landscape |
| 1.4.1 Benutzung von Farbe |
A |
✓ Erfüllt |
Farbe wird nicht als einziges Unterscheidungsmerkmal verwendet |
| 1.4.3 Kontrast (Minimum) |
AA |
✓ Erfüllt |
Alle Textfarben auf ihren Hintergründen ≥ 4,5:1 (Fließtext) bzw. ≥ 3:1 (Großtext) |
| 1.4.4 Textgröße ändern |
AA |
✓ Erfüllt |
Texte skalieren bis 200 % ohne Funktionsverlust (relative Einheiten); zusätzlich per Barrierefreiheits-Toolbar in 7 Stufen (80 %–150 %) anpassbar – Einstellung wird persistent gespeichert |
| 1.4.10 Umfluss (Reflow) |
AA |
✓ Erfüllt |
Responsive Layout, kein horizontales Scrollen bis 320 px Breite |
| 1.4.11 Nicht-Text-Kontrast |
AA |
✓ Erfüllt |
UI-Komponenten (Buttons, Formularfelder) mit ≥ 3:1 Kontrast |
| 1.4.12 Textabstand |
AA |
✓ Erfüllt |
Keine Beschränkung von Zeilen-, Buchstaben- oder Wortabstand |
| 2.1.1 Tastatur |
A |
✓ Erfüllt |
Alle interaktiven Elemente per Tab erreichbar, Skip-Link vorhanden; Screenshot-Lightbox vollständig per Tastatur bedienbar (Escape, ←/→ Navigation) |
| 2.1.2 Keine Tastaturfalle |
A |
✓ Erfüllt |
Modale Dialoge (Lightbox, Barrierefreiheits-Panel) mit Focus-Trap und Escape-Schließfunktion; Fokus wird nach Schließen korrekt zurückgesetzt |
| 2.4.1 Blöcke überspringen |
A |
✓ Erfüllt |
Skip-Link „Zum Hauptinhalt springen" vorhanden |
| 2.4.3 Fokus-Reihenfolge |
A |
✓ Erfüllt |
Logische Tab-Reihenfolge, kein positives tabindex |
| 2.4.7 Fokus sichtbar |
AA |
✓ Erfüllt |
Deutlich sichtbarer Fokusindikator via :focus-visible |
| 2.5.3 Beschriftung im Namen |
A |
✓ Erfüllt |
Sichtbare Labels stimmen mit zugänglichen Namen überein |
| 3.1.1 Sprache der Seite |
A |
✓ Erfüllt |
lang="de" am HTML-Element gesetzt |
| 3.3.1 Fehlererkennung |
A |
✓ Erfüllt |
Keine Formulare vorhanden – nicht anwendbar |
| 2.3.1 Blitzen |
A |
✓ Erfüllt |
Keine blitzenden Inhalte, Animationen sind sanft |
| 2.2.2 Pausieren, Beenden, Ausblenden |
A |
✓ Erfüllt |
Hintergrundanimationen stoppen automatisch bei prefers-reduced-motion: reduce; zusätzlich können alle Animationen per Barrierefreiheits-Toolbar manuell pausiert werden |
| 4.1.1 Syntaxanalyse |
A |
✓ Erfüllt |
Gültiges HTML5, keine doppelten IDs |
| 4.1.2 Name, Rolle, Wert |
A |
✓ Erfüllt |
ARIA-Labels, Rollen und Zustände (aria-expanded, aria-label) implementiert |
| 1.2.x Zeitbasierte Medien |
A/AA |
✓ N/A |
Keine Audio- oder Videoinhalte vorhanden |
| 2.4.2 Seite mit Titel |
A |
✓ Erfüllt |
Aussagekräftiger <title> auf jeder Seite |
| 1.3.2 Bedeutungsvolle Reihenfolge |
A |
✓ Erfüllt |
Leserichtung und DOM-Reihenfolge stimmen überein; kein Layout-abhängiges Tab-Order-Problem |
| 1.3.3 Sensorische Eigenschaften |
A |
✓ Erfüllt |
Anweisungen stützen sich nicht allein auf Form, Farbe oder Position (z. B. kein „Klicken Sie den roten Knopf") |
| 1.4.5 Bilder von Text |
AA |
✓ Erfüllt |
Kein Text wird als Bilddatei dargestellt; alle Texte sind echtes HTML/CSS |
| 1.4.13 Inhalt bei Hover oder Fokus |
AA |
✓ Erfüllt |
Kein zusätzlicher Tooltipp-Inhalt beim Hovern vorhanden, der versehentlich verdeckt oder nicht wegschließbar wäre |
| 2.1.4 Tastaturkürzel |
A |
✓ N/A |
Keine Einzelzeichen-Tastaturkürzel (einzelne Buchstaben/Zeichen als Shortcuts) implementiert |
| 2.4.4 Linkzweck (im Kontext) |
A |
✓ Erfüllt |
Alle Links haben aussagekräftigen Text oder aria-label; kein doppeltes „Hier klicken" |
| 2.4.5 Mehrere Wege |
AA |
✓ Erfüllt |
Jede Seite ist über Hauptnavigation und Footer-Navigation erreichbar |
| 2.4.6 Überschriften und Beschriftungen |
AA |
✓ Erfüllt |
Überschriften beschreiben eindeutig den jeweiligen Abschnitt; logische H1→H2→H3-Hierarchie |
| 2.5.1 Zeigergesten |
A |
✓ N/A |
Keine Mehrfinger- oder pfadabhängigen Gesten erforderlich |
| 2.5.2 Zeigerabbruch |
A |
✓ Erfüllt |
Aktionen werden auf mouseup/pointerup ausgelöst; versehentliche Klicks können durch Wegziehen abgebrochen werden |
| 2.5.4 Betätigung durch Bewegung |
A |
✓ N/A |
Keine Gerätebewegungs-Steuerung (Shake, Tilt) implementiert |
| 3.1.2 Sprache von Teilen |
AA |
✓ Erfüllt |
Die Seite ist durchgehend deutschsprachig; Eigennamen und technische Begriffe (z. B. „Windows", „Python") sind von dieser Anforderung ausgenommen |
| 3.2.1 Bei Fokus |
A |
✓ Erfüllt |
Kein unerwarteter Kontextwechsel (Navigation, Formular-Submit) beim Fokussieren eines Elements |
| 3.2.2 Bei Eingabe |
A |
✓ N/A |
Keine Formularfelder vorhanden, die bei Eingabe automatisch eine Aktion auslösen |
| 3.2.3 Konsistente Navigation |
AA |
✓ Erfüllt |
Header- und Footer-Navigation sind auf allen Unterseiten identisch aufgebaut |
| 3.2.4 Konsistente Erkennung |
AA |
✓ Erfüllt |
Gleichartige Komponenten (Buttons, Links, Tool-Karten) sind seitenübergreifend konsistent beschriftet |
| 4.1.3 Statusmeldungen |
AA |
✓ Erfüllt |
Statusmeldungen sind mit aria-live="polite" + aria-atomic="true" als Live-Region umgesetzt (Lightbox-Bildwechsel-Anzeige) |
| Neu in WCAG 2.2 – Level A / AA |
| 2.4.11 Fokus nicht verdeckt (Minimum) |
AA |
✓ Erfüllt |
Fokussierte Elemente werden nicht vollständig durch fixe Elemente (Header) verdeckt – umgesetzt via scroll-margin-top: 88px auf allen interaktiven Elementen |
| 2.4.13 Fokus-Erscheinungsbild |
AA |
✓ Erfüllt |
Fokusindikator: 3 px Umrandung mit ≥ 3:1 Kontrast zum Hintergrund via :focus-visible |
| 2.5.7 Ziehbewegungen |
AA |
✓ N/A |
Keine Drag-&-Drop-Interaktionen auf der Website vorhanden |
| 2.5.8 Zielgröße (Minimum) |
AA |
✓ Erfüllt |
Alle interaktiven Elemente mind. 24×24 px; Buttons mindestens 44×44 px |
| 3.2.6 Konsistente Hilfe |
A |
✓ Erfüllt |
Kontaktmöglichkeit (E-Mail) konsistent im Footer aller Seiten sichtbar |
| 3.3.7 Redundante Eingabe |
A |
✓ N/A |
Keine mehrstufigen Formulare mit Mehrfacheingaben vorhanden |
| 3.3.8 Zugängliche Authentifizierung (Minimum) |
AA |
✓ N/A |
Keine Anmeldung / Login auf dieser Website vorhanden |
| WCAG 2.2 – Level AAA |
| 1.3.6 Zweck identifizieren |
AAA |
✓ Erfüllt |
Semantische Elemente und ARIA-Landmarks ermöglichen die Zweck-Identifikation aller UI-Komponenten |
| 1.4.6 Kontrast (Erweitert) |
AAA |
✓ Erfüllt |
Alle Textfarben ≥ 7:1 auf jeweiligem Hintergrund (z. B. --muted: #475569 = 7,58:1 auf Weiß; kontextabhängige Overrides für dunkle Sektionen) |
| 1.4.8 Visuelle Darstellung |
AAA |
✓ Erfüllt |
Kein Blocksatz; Zeilenbreite angemessen; Farben anpassbar via Toolbar; kein reines Weiß auf Schwarz-Hintergrund ohne Option zur Anpassung |
| 2.1.3 Tastatur (keine Ausnahme) |
AAA |
✓ Erfüllt |
Alle Funktionen ausnahmslos per Tastatur bedienbar; keine Maus-only-Interaktionen |
| 2.2.3 Keine zeitliche Begrenzung |
AAA |
✓ N/A |
Keine zeitkritischen Interaktionen auf dieser Website |
| 2.2.6 Zeitüberschreitungen |
AAA |
✓ N/A |
Keine Session-Timeouts vorhanden |
| 2.3.2 Dreimaliges Aufblitzen |
AAA |
✓ Erfüllt |
Keine blitzenden Inhalte; alle Animationen sind sanft und können pausiert werden |
| 2.3.3 Animationen durch Interaktionen |
AAA |
✓ Erfüllt |
Bewegungsanimationen bei prefers-reduced-motion deaktiviert; manuelle Pause-Option in der Barrierefreiheits-Toolbar |
| 2.4.8 Position |
AAA |
✓ Erfüllt |
Breadcrumb-Navigation auf allen Unterseiten (Barrierefreiheitserklärung, Glossar, 404) vorhanden |
| 2.4.9 Linkzweck (nur Link) |
AAA |
✓ Erfüllt |
Alle Links sind auch isoliert verständlich; kein „Hier klicken" oder kontextabhängiger Text |
| 2.4.10 Abschnittsüberschriften |
AAA |
✓ Erfüllt |
Alle Inhaltsbereiche sind mit aussagekräftigen Überschriften (h2, h3) gegliedert |
| 2.4.12 Fokus nicht verdeckt (Erweitert) |
AAA |
✓ Erfüllt |
Kein fokussiertes Element wird auch nur teilweise durch fixe Elemente verdeckt – scroll-margin-top: 88px stellt vollständige Sichtbarkeit sicher |
| 2.5.5 Zielgröße (Erweitert) |
AAA |
✓ Erfüllt |
Alle interaktiven Elemente mindestens 44×44 CSS-Pixel (Buttons, Nav-Links, Toolbar-Elemente, Lightbox-Steuerung) |
| 3.1.3 Ungewöhnliche Wörter |
AAA |
✓ Erfüllt |
IT-Fachbegriffe werden im Glossar erklärt; Link im Footer aller Seiten |
| 3.1.4 Abkürzungen |
AAA |
✓ Erfüllt |
Alle Abkürzungen beim ersten Auftreten mit <abbr title="…"> ausgezeichnet (KI, MDM, CMS, WLAN, VPN, NRW, BGB, TMG, DSGVO, gGmbH u. a.) |
| 3.1.5 Leseniveau |
AAA |
⚠ Einschränkung |
IT-Fachinhalte erfordern Fachkenntnisse; Vereinfachung auf Sekundarstufe-I-Niveau ist für diese Zielgruppe nicht sinnvoll möglich. Abkürzungen und Glossar mindern die Hürde (3.1.3, 3.1.4). |
| 3.2.5 Änderung auf Anforderung |
AAA |
✓ Erfüllt |
Keine automatischen Kontextwechsel; alle Änderungen erfolgen nur auf explizite Nutzerinteraktion |
| 3.3.5 Hilfe |
AAA |
✓ Erfüllt |
Glossar mit Erklärungen zu Fachbegriffen (glossar.php); Kontakt-E-Mail für Rückfragen im Footer |