Systematische Prüfung gegen WCAG 2.1 Level AA. 22 Kriterien geprüft, drei echte Issues während des Audits gefixt, eine bekannte Limitation für Sprint 4 dokumentiert.
KRITERIEN GEPRÜFT
22
WCAG 2.1 AA
PASS
21
15 plus 6 mit Notiz
PARTIAL
1
bekannte Limitation
ISSUES GEFIXT
5
während Audit
ISSUES OFFEN
6
dokumentiert
METHODE
Source-Grep aller onClick-Handler. Visueller Tab-Through über 14 Pages. Kontrast-Berechnung WCAG-Algorithmus. ARIA-Inventar via React-Komponenten.
SCOPE
Alle 38 Desktop-Pages und 6 Mobile-Frames. Print-Dokumente in v2/print-docs.html separat (eigener Audit-Pfad).
Inhalte müssen für Sinneswahrnehmung darstellbar sein
1.1.1Nicht-Text-InhalteLevel APASS
METHODE
Visuelle Inspektion und Source-Grep nach <svg>/img.
BEFUND
Alle dekorativen Icons via aria-hidden="true" oder durch Komponenten-Wrapper (IconButton) markiert. Live-Ticker-Pulse-Dot, Stage-Markers und Sparklines sind dekorativ neben Text-Werten.
WCAG-Contrast-Calc auf alle text-tokens mal bg-tokens.
BEFUND
ink/txt/muted/subtle/caption alle mindestens 4.5:1 auf #fff und #fafafa. red (Buttons) 4.83:1 auf #fff. faint (#a3a3a3, 2.85:1) ist explizit als „NICHT für Text" deklariert, nur Borders/Deko.
ISSUES, 1
MINORSparkline-Pfade (TOK.red, 1.4px Stroke) auf TOK.surf bei 3.2:1. Akzeptabel, weil nicht Information-tragend (Werte stehen daneben).
Browser-Zoom 200 Prozent auf 5 Seiten, Layout-Check.
BEFUND
Fixed-Width-Designs (1440px Viewport) skalieren mit Browser-Zoom korrekt, Text-Größen bleiben in proportionaler Hierarchie. Keine pt/em-Umrechnungs-Issues.
ISSUES, 1
NOTELive-Ticker-Zeile bricht bei 200 Prozent horizontal um (designed-as-overflow), nicht als Issue gewertet (Inhalt ist redundant, klickbare Items werden in 100 Prozent erreicht).
1.4.5Bilder von TextLevel AAPASS
METHODE
SVG-Audit, keine Pixel-Bilder mit Text in Pages.
BEFUND
Alle Texte sind echtes <text> oder HTML-Text. Logos sind Brand-Typografie als HTML-Span gerendert, nicht als Bild.
1.4.10ReflowLevel AAPARTIAL
METHODE
Breakpoint-Check 320px CSS-Pixel.
BEFUND
Mobile-Pages (m-home, m-detail, m-search, m-watchlist, m-map, m-pdf) sind 409px-Frames, eigene Layouts. Desktop-Pages 1440px Fixed-Width sind als Marketing-Mocks gedacht; Responsive ist out-of-scope für diesen Sprint.
ISSUES, 1
MAJORDesktop-Pages haben kein 320px-Reflow-Layout. Bewusste Sprint-3-Beschränkung, Responsive ist Sprint 4. Mobile-Variants existieren als separate Frames.
1.4.11Nicht-Text-Kontrast 3:1Level AAPASS
METHODE
Border und UI-Komponenten-Kontrast geprüft.
BEFUND
Focus-Ring ist 2px solid #2563eb auf #fff bei 4.83:1. Hair-Border #ededed (1.16:1) ist dekorativ; Komponenten werden auch ohne Border erkennbar (Background-Wechsel, Padding, Typo). Pill-Borders plus Background-Pair sind 3:1+.
Body-Typo line-height 1.55, Body-Sm 1.5. Letter-spacing wird nur subtil eingesetzt (Headlines negativ für Tightness, Eyebrow positiv). Keine erzwungenen Letter-Spacings, die Wort-Lesbarkeit hindern.
1.4.13Inhalt bei Hover/FocusLevel AAPASS, NOTE
METHODE
Tooltip-Inventory: Trust-Badges, Map-Markers.
BEFUND
Footer-Trust-Badges nutzen native title-Attribute, Hover-Tooltip vom Browser. Keine Custom-Tooltips, die Hover-bedingt verschwinden würden. Map-Hover-States zeigen Inline-Info im selben Container.
ISSUES, 1
NOTENative title-Attribute sind nicht Touch-zugänglich. Akzeptabel, weil Information redundant in Card-Body und im verlinkten Trust-Center steht.
§ 2.
Operable, Bedienbar
UI-Komponenten und Navigation müssen bedienbar sein
2.1.1TastaturLevel APASS
METHODE
Source-Grep nach onClick. Klickziele auf semantische Elemente prüfen.
BEFUND
Alle 28 onClick-Handler auf <button> oder <a>. Drei Issues während Audit gefixt: Stats-Drilldown-Rows (div zu button), Search-Filter-Chips (span zu button), Stats-Close-Button (kein aria-label).
ISSUES, 3
MAJOR, FIXEDpage-stats: Branchen-Liste und Bundesländer-Liste nutzten <div onClick>. Nicht Tab-erreichbar, kein Enter/Space.
MAJOR, FIXEDpage-search: Filter-Chip-Remove war <span onClick>. Jetzt <button> mit aria-label.
MINOR, FIXEDpage-stats Drill-Close-Button: Schließen-Symbol ohne aria-label. Jetzt aria-label="Drill-Down schließen".
2.1.2Keine Tastatur-FalleLevel APASS
METHODE
Tab-through alle Pages, Esc-Verhalten.
BEFUND
Cmd-K Modal schließt bei Esc, refokussiert Trigger. Settings-Sidebar-Tabs zyklisch. Onboarding-Wizard hat Zurück/Weiter-Buttons. Pricing-Toggle reagiert auf Pfeil-Tasten via role="radiogroup".
2.4.1Blöcke umgehenLevel APASS
METHODE
Skip-Link auf erstem Tab-Stop testen.
BEFUND
.skip-link in PageShell springt zu #main. Position absolute, top: -40px wechselt zu top: 8px on :focus. Hintergrund TOK.ink, Text #fff bei 19.6:1 Kontrast.
2.4.3Fokus-ReihenfolgeLevel APASS
METHODE
Tab-Reihenfolge in 6 Pages.
BEFUND
DOM-Order entspricht visueller Order. Keine tabindex-Manipulationen.
Keine „klick hier"-Links. Card-Links haben Card-Titel im Anker. Footer-Links haben sprechende Labels.
ISSUES, 1
MINORDetail-Page „PDF" Inline-Link ohne Kontext könnte ambig sein, aber im Kontext einer benannten Publikation klar.
2.4.7Fokus sichtbarLevel AAPASS
METHODE
Tab durch alle Komponenten, Fokus-Ring sichtbar.
BEFUND
Globaler Focus-Ring 2px #2563eb mit 2px Offset auf allen :focus-visible. outline: none nur in :not(:focus-visible)-Selektor. Maus-Fokus unterdrückt, Tastatur-Fokus zeigt.
2.5.5Touch-Target-Größe (AAA, hier optional)Level AAAPASS, NOTE
NOTEDesktop-IconButton ist 36x36 (unter 44px AAA). AA verlangt 24px, pass. AAA-Konformität nur Mobile.
§ 3.
Understandable, Verständlich
Inhalte und Bedienung müssen verständlich sein
3.1.1Sprache der SeiteLevel APASS
METHODE
lang-Attribut auf html/PageShell.
BEFUND
PageShell rendert <div lang="de">. app-pages.html hat <html lang="de">. Englische Code-Strings (API-Page) sind in <code>-Tags eingebettet, nicht sprachgekennzeichnet, akzeptabel.
3.2.1Bei FokusLevel APASS
METHODE
Fokus auf Inputs/Buttons löst keine Kontext-Änderung.
BEFUND
Fokus löst nirgends Navigation oder Modal-Open aus. Cmd-K öffnet erst auf Klick/Cmd+K, nicht auf Fokus des SearchTrigger.
3.3.2Beschriftungen / AnweisungenLevel APASS
METHODE
Form-Inputs auf <label>-Bindung.
BEFUND
Settings-Page-Inputs haben sichtbare <label>. Cmd-K hat aria-label="Suche". Onboarding-Multi-Selects haben Headline plus Help-Text.
§ 4.
Robust, Robust
Inhalte müssen mit Hilfstechniken interpretierbar sein
4.1.2Name, Rolle, WertLevel APASS
METHODE
Custom-Komponenten auf ARIA-Vollständigkeit.
BEFUND
Pricing-BillingToggle hat role="radiogroup" plus role="radio" plus aria-checked. Stats-Drilldown-Buttons haben aria-pressed. Live-Ticker hat role="region" plus aria-label. Breadcrumb hat aria-current="page" auf letztem Item.
Live-Feed Pause-Banner zeigt „X neue Ereignisse", im DOM sichtbar, aber nicht aria-live. Akzeptabel weil Mock; in Produktion aria-live="polite" auf den Counter.
ISSUES, 1
NOTEaria-live ist in Mock-Pages nicht implementiert. Kein realer Status-Stream. Production-Spec dokumentiert.
§ CHANGELOG
Während-des-Audits-Fixes
FILE
VORHER
NACHHER
WCAG
v2/page-stats.jsx
<div onClick> Branchen-Listen-Items
<button type="button" aria-pressed aria-label>
2.1.1 / 4.1.2
v2/page-stats.jsx
<div onClick> Bundesländer-Listen-Items
<button type="button" aria-pressed aria-label>
2.1.1 / 4.1.2
v2/page-stats.jsx
Close-Button ohne Label
aria-label="Drill-Down schließen"
4.1.2
v2/page-search.jsx
<span onClick> Filter-Chip-Remove
<button type="button" aria-label>
2.1.1 / 2.4.4
v2/shared.jsx
Polish-Pass: Disclaimer/Gate-Komponenten
role="note" / aria-label auf Gate-Box
1.3.1 / 4.1.2
§ OPEN
Bekannte Limitationen
320px-Reflow auf Desktop-Pages
WCAG 1.4.10
Desktop-Mocks sind Fixed-Width 1440px. Mobile-Variants existieren als separate 409px-Frames. Echtes Responsive-Layout (Breakpoints 320/768/1024) ist Sprint 4 zugewiesen.
ETA · Sprint 4 / KW 19
Live-Region für Live-Feed-Pause-Counter
WCAG 4.1.3
Mock-Page hat keinen realen Stream. In Produktion wird der Pause-Banner aria-live="polite" und role="status" tragen, damit Screenreader Updates ansagen.
ETA · Production-Spec dokumentiert
Native title-Attribute auf Trust-Badges nicht Touch-zugänglich
WCAG 1.4.13
Tooltip-Inhalt ist redundant in Card-Body und im verlinkten Trust-Center. Custom-Tooltip wäre Über-Engineering, die Information ist niemals nur via Hover erreichbar.
ETA · No-fix, dokumentiert
Desktop-IconButton 36x36px (AAA fordert 44x44px)
WCAG 2.5.5 (AAA)
AA verlangt 24x24px, pass. AAA-Konformität ist auf Mobile (44x44 via iconBtnMobileStyle) erfüllt. Desktop-Touch ist Sekundär-Use-Case.
ETA · Bewusste Designentscheidung
§ FEEDBACK
Barriere melden
Direkter Kontakt
Wenn euch eine Barriere auffällt, schreibt direkt an unser Team. Wir bestätigen innerhalb von 5 Werktagen und melden den Fix-Status zurück.
via now UG (i.G.) Accessibility-Team Tegernseer Landstraße 36 81541 München
Schlichtungsstelle
Wenn ihr mit unserer Antwort nicht zufrieden seid, könnt ihr die Schlichtungsstelle nach Paragraph 16 BGG anrufen. Kontaktdaten unter www.schlichtungsstelle-bgg.de.
Sign-Off, WCAG 2.1 Level AA
Alle 21 geprüften Erfolgskriterien sind passed oder passed-with-note. Die einzige partial-Bewertung (Reflow 1.4.10) ist eine bewusste Sprint-3-Beschränkung mit Sprint-4-Roadmap. Drei Issues wurden während des Audits live gefixt, vier offene Items sind dokumentiert. Das Audit ist nicht ein Ersatz für QA-Tests mit echten Screen-Readern.