Barrierefreiheit (A11y)

Barrierefreiheit ist kein Nice-to-have – es ist Pflicht. In vielen Ländern gesetzlich vorgeschrieben und für alle Nutzer ein Gewinn. arkmetis prüft deine Website automatisch nach WCAG 2.1 und bietet zusätzlich einen geführten Audit nach EN 301 549 / WCAG 2.2 mit visuellen Prüfwerkzeugen und KI-Assistenz.

Das A11y-Dashboard

Die Übersicht zeigt dir:

  • A11y-Score (0-100) – Durchschnitt über alle gecrawlten Seiten
  • Issue-Übersicht – Kritische Probleme, Warnungen und Hinweise
  • Score-Trend – Entwicklung über die letzten Crawls
  • Schwächste Seiten – Die 10 Seiten mit dem niedrigsten Score

WCAG-Level wählen

In den Projekt-Einstellungen wählst du das gewünschte Konformitäts-Level:

  • A – Basis-Anforderungen
  • AA (Standard) – Der international anerkannte Mindeststandard
  • AAA – Der höchste Standard, oft für öffentliche Einrichtungen gefordert

Bei AAA werden zusätzliche Prüfkriterien aktiviert, z.B. strengere Kontrast-Anforderungen (7:1 statt 4.5:1).

Issues nach WCAG filtern

Jedes gefundene Problem wird einem WCAG-Kriterium zugeordnet (z.B. 1.1.1 Non-text Content, 2.4.1 Bypass Blocks). Du kannst nach:

  • Schweregrad filtern – Kritisch, Warnung, Hinweis
  • WCAG-Kriterium filtern – z.B. nur Kontrast-Probleme anzeigen
  • Seite filtern – Probleme einer einzelnen URL

Seiten-Detail

Klicke auf eine Seite um alle A11y-Issues dieser URL zu sehen:

  • Score für diese spezifische Seite
  • Alle Probleme gruppiert nach WCAG-Kriterium
  • Schweregrad-Badge für schnelles Scannen
  • Page Browser für Vor/Zurück-Navigation (Alt+← / Alt+→)

KI-Fix-Vorschläge

Das Besondere: arkmetis gruppiert deine Issues nach Typ und generiert konkrete Lösungsvorschläge mit Code-Beispielen.

Statt "Bild hat keinen Alt-Text" bekommst du:

<!-- Vorher -->
<img src="team.jpg">

<!-- Nachher -->
<img src="team.jpg" alt="Unser Team bei der Jahresfeier 2025">

Die KI kennt den Kontext deiner Website (Branche, Zielgruppe, Seiteninhalt) und macht dadurch sinnvollere Vorschläge als generische Tools.

Typische Issues

Problem Schwere WCAG Lösung
Fehlendes alt-Attribut Kritisch 1.1.1 Alt-Text hinzufügen
Zu niedriger Kontrast Kritisch 1.4.3 Farbe anpassen
Fehlende Formular-Labels Kritisch 1.3.1 Label verknüpfen
Heading-Sprung (h1→h4) Warnung 1.3.1 Hierarchie korrigieren
Fehlender Skip-Link Warnung 2.4.1 Skip-Navigation einbauen
Kein Focus-Ring sichtbar Warnung 2.4.7 outline nicht entfernen

Rechtsrahmen-Check

arkmetis zeigt dir auf einen Blick, welche gesetzlichen Anforderungen für dein Projekt gelten – basierend auf dem gewählten Rechtsrahmen. Du siehst sofort, welche Gesetze relevant sind, welche Fristen gelten und was du konkret tun musst.


Geführter A11y-Audit

Für eine tiefgehende Prüfung bietet arkmetis einen geführten Audit nach EN 301 549 und WCAG 2.2 mit ca. 97 Prüfschritten. Das ist mehr als ein automatischer Scan – es ist ein vollständiger, manueller Barrierefreiheits-Audit mit KI-Unterstützung.

Audit erstellen

  1. Site auswählen – Welche Domain soll geprüft werden?
  2. Rechtsrahmen festlegen – WZG (Österreich), BaFG (Österreich Privatwirtschaft), BFSG (Deutschland) oder BehiG (Schweiz)
  3. WCAG-Level wählen – AA oder AAA
  4. Seiten auswählen – arkmetis schlägt Seiten aus der Sitemap vor, du passt die Auswahl an
  5. Automatische Vorbefüllung – arkmetis mappt bestehende A11y-Issues auf Prüfschritte. Ca. 40% der Checks werden automatisch vorausgefüllt – du startest nicht bei Null.

Der Audit-Arbeitsplatz (Immersive View)

Das Herzstück: Ein Vollbild-Arbeitsplatz mit Split View:

  • Links: Live-Vorschau der Website (eingebettet im iframe)
  • Rechts: Audit-Panel mit dem aktuellen Check, Status-Buttons, Kommentaren und KI-Assistenz

Toolbar (oben)

Funktion Beschreibung
Geräte-Emulation Desktop, Tablet, Mobile – teste responsive Verhalten
Querformat Umschalten zwischen Hoch- und Querformat
Zoom 100%, 200%, 400% – für Kontrast- und Schriftgrößen-Prüfung
HTML-Quelltext Zeigt den Quellcode der Seite
Element-Selektor Wähle ein Element aus und frage Metis nach einer Analyse
Kommentar-Pins Pinne Kommentare visuell an Stellen auf der Seite

Visuelle Overlays

Mit einem Klick kannst du verschiedene Analyse-Overlays aktivieren, die Elemente direkt auf der Seite markieren:

Overlay Was es zeigt
Überschriften (H1-H6) Heading-Hierarchie mit farbigen Badges
Bilder & Alt-Texte Alle Bilder farbcodiert: fehlend (rot), leer (gelb), vorhanden (grün)
Landmarks & ARIA Landmark-Rollen und ARIA-Struktur
Link-Texte Alle Links mit ihrem Linktext sichtbar
Formular-Labels Label-Zuordnungen bei Formularen
Tab-Reihenfolge Visualisiert die Tastatur-Navigation
Skip-Links Zeigt Skip-Link-Ziele
Sprach-Attribute lang-Attribute im Dokument
CSS deaktivieren Website ohne Styling anzeigen (Struktur-Check)

Visuelle Barrierefreiheits-Werkzeuge

Werkzeug Beschreibung
Kontrast-Checker WCAG AA/AAA Kontrastverhältnis prüfen
Farbenblindheits-Simulation Achromatopsie, Deuteranopie, Protanopie, Tritanopie simulieren
Anzeige-Anpassung Schriftart, Hintergrundfarbe, Textfarbe, Zeilenhöhe und Zeichenabstand ändern
Bewegungs-Reduktion prefers-reduced-motion simulieren (Animationen stoppen)

Wichtig: Die visuellen Overlays und Werkzeuge benötigen die arkmetis Chrome Extension (siehe unten).

Check-Status pro Seite

Für jeden der 97 Prüfschritte setzt du einen Status:

  • Bestanden – Kriterium erfüllt
  • Fehlgeschlagen – Nicht konform
  • Nicht anwendbar – Für diese Seite nicht relevant
  • Fix beansprucht – Agentur hat den Fix als erledigt markiert
  • Re-Check – Muss nach Fix erneut geprüft werden

Zu jedem Check kannst du Kommentare und Screenshots hinterlegen.

KI-Assistenz (Metis)

Bei jedem Check kannst du Metis fragen – der KI-Assistent analysiert den tatsächlichen HTML-Code der Seite und gibt:

  • Kontextbezogene Erklärung, warum das ein Problem ist
  • Konkreten Fix-Vorschlag mit Code-Beispiel
  • Hinweis auf betroffene Nutzergruppen

Audit-Übersicht & Fortschritt

Die Audit-Übersicht zeigt eine Matrix aller Checks × alle Seiten:

  • Gesamtfortschritt in Prozent
  • Status-Filter (bestanden, fehlgeschlagen, offen)
  • Schweregrad-Verteilung
  • Pro Seite: wie viele Checks bestanden/fehlgeschlagen

Audit teilen

Du kannst den fertigen Audit über einen teilbaren Link weitergeben:

  • Kunden-Link (Read-only) – Dein Kunde sieht den Bericht, kann Fragen als Kommentare hinterlassen
  • Agentur-Link (Fix-Tracking) – Die umsetzende Agentur kann Fixes markieren und den Status tracken
  • Optionaler Passwortschutz
  • Optionales Ablaufdatum
  • Der öffentliche Bericht ist filterbar nach Status und Seite

Re-Audit

Nachdem Fixes umgesetzt wurden:

  1. Starte einen Re-Audit aus dem bestehenden Audit
  2. arkmetis zeigt nur die geänderten Checks (Diff-Ansicht)
  3. Du prüfst gezielt, ob die Fixes wirken
  4. Die Audit-Historie bleibt erhalten – Vorher/Nachher-Vergleich

Compliance-Erklärungen

arkmetis generiert DACH-spezifische Barrierefreiheitserklärungen automatisch aus deinen Audit-Ergebnissen und Firmendaten:

Rechtsrahmen Land Gültig für
WZG Österreich Öffentlicher Sektor (Behörden, Gemeinden)
BaFG Österreich Privatwirtschaft (ab 10 Mitarbeiter oder €2M Umsatz) – ab 28.06.2025
BFSG Deutschland Privatwirtschaft – ab 28.06.2025
BehiG Schweiz Bundesbehörden, öffentliche Unternehmen

Die Erklärung enthält:

  • Status der Konformität (vollständig, teilweise, nicht konform)
  • Liste der nicht barrierefreien Inhalte (aus Audit-Ergebnissen)
  • Begründung und geplante Maßnahmen
  • Kontaktdaten für Feedback (aus Firmeneinstellungen)
  • Zuständige Aufsichtsbehörde je nach Rechtsrahmen
  • Vorschau als HTML, Export als PDF

Tipp: Die Compliance-Erklärung wird automatisch aktualisiert, wenn du einen Re-Audit durchführst.


arkmetis Chrome Extension

Die Chrome Extension erweitert den geführten Audit um visuelle Prüfwerkzeuge direkt auf der Website. Sie ist kostenlos und funktioniert ausschließlich in Verbindung mit arkmetis.

Was die Extension kann

  • Visuelle Overlays – Überschriften, Alt-Texte, Landmarks, Links, Labels, Tab-Reihenfolge direkt auf der Seite einblenden
  • Kontrast-Checker – WCAG AA/AAA Kontrastverhältnis in Echtzeit prüfen
  • Farbenblindheits-Simulation – Vier Arten von Farbfehlsichtigkeit simulieren
  • Anzeige-Anpassung – Schriftart, Farben, Zeilenhöhe und Zeichenabstand live ändern
  • Bewegungs-Reduktion – Animationen stoppen (prefers-reduced-motion)
  • Kommentar-Pins – Visuelle Marker an Stellen auf der Seite setzen
  • Element-Analyse – Ein Element auswählen und von Metis analysieren lassen
  • Navigations-Sperre – Links deaktivieren während der Prüfung (Formulare bleiben bedienbar)

Einrichtung

  1. Installiere die Extension aus dem Chrome Web Store
  2. Öffne einen Audit in arkmetis
  3. Klicke auf "Extension verbinden" in der Audit-Toolbar
  4. Autorisiere die Verbindung – fertig

Die Extension authentifiziert sich automatisch mit deinem arkmetis-Konto. Deine Daten bleiben lokal.

Ohne Extension

Der geführte Audit funktioniert auch ohne Extension – du siehst die Website-Vorschau und kannst alle Checks durcharbeiten. Die visuellen Overlays und Simulationswerkzeuge sind dann nicht verfügbar.


Free-Tier-Einschränkungen

Im Free-Tier gelten Einschränkungen beim geführten Audit:

  • Maximal 1 Audit pro Site
  • Maximal 1 Seite pro Audit
  • Keine KI-Assistenz (Metis)
  • Kein Teilen
  • Keine Screenshots
  • Kein Re-Audit

Die automatische A11y-Prüfung (Dashboard, Issues, Score) ist in allen Plänen enthalten.


Häufige Fragen

Reicht der automatische Scan für WCAG-Konformität? Nein. Automatische Scans erkennen ca. 30-40% aller Barrieren (fehlende Alt-Texte, Kontrast, Heading-Sprünge). Für eine vollständige Konformitätserklärung brauchst du den geführten Audit mit manueller Prüfung.

Wie viele Prüfschritte hat der geführte Audit? Ca. 97 Prüfschritte basierend auf EN 301 549 / WCAG 2.2. Nicht alle sind auf jede Seite anwendbar – du kannst Schritte als "Nicht anwendbar" markieren.

Was ist der Unterschied zwischen WZG, BaFG, BFSG und BehiG? Das sind die länderspezifischen Gesetze: WZG (Österreich, öffentlicher Sektor), BaFG (Österreich, Privatwirtschaft ab 28.06.2025), BFSG (Deutschland, Privatwirtschaft ab 28.06.2025), BehiG (Schweiz, Bundesbehörden). Alle basieren auf dem gleichen Standard (EN 301 549), unterscheiden sich aber in Geltungsbereich und Aufsichtsbehörde.

Muss ich die Chrome Extension installieren? Nein, der Audit funktioniert auch ohne Extension. Du verlierst aber die visuellen Overlays (Headings, Alt-Texte, Landmarks), den Kontrast-Checker und die Farbenblindheits-Simulation.

Kann mein Kunde den Audit-Bericht sehen? Ja. Über "Audit teilen" erstellst du einen öffentlichen Link. Wähle "Kunden-Link" für Nur-Lesen-Zugriff oder "Agentur-Link" wenn die umsetzende Agentur Fixes markieren soll.

Was passiert beim Re-Audit? Ein Re-Audit zeigt nur die Checks, die beim letzten Audit fehlgeschlagen sind. So prüfst du gezielt, ob die Fixes wirken – ohne alle 97 Schritte neu durchzugehen.

Die automatische Vorbefüllung hat einen Check falsch bewertet. Das kann vorkommen. Die Vorbefüllung ist ein Startpunkt (~40% automatisch), nicht das Endergebnis. Prüfe jeden Check manuell und korrigiere die Bewertung wenn nötig.