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
- Site auswählen – Welche Domain soll geprüft werden?
- Rechtsrahmen festlegen – WZG (Österreich), BaFG (Österreich Privatwirtschaft), BFSG (Deutschland) oder BehiG (Schweiz)
- WCAG-Level wählen – AA oder AAA
- Seiten auswählen – arkmetis schlägt Seiten aus der Sitemap vor, du passt die Auswahl an
- 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:
- Starte einen Re-Audit aus dem bestehenden Audit
- arkmetis zeigt nur die geänderten Checks (Diff-Ansicht)
- Du prüfst gezielt, ob die Fixes wirken
- 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
- Installiere die Extension aus dem Chrome Web Store
- Öffne einen Audit in arkmetis
- Klicke auf "Extension verbinden" in der Audit-Toolbar
- 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.