Accessibility Checker Benutzerhandbuch

1. Erste Schritte

Accessibility Checker ist um drei Tools herum aufgebaut, zwischen denen Sie über das segmentierte Steuerelement in der Navigationsleiste wechseln:

• Audit – führt einen automatisierten axe-core-Scan einer Webseite durch und zeigt jedes gefundene WCAG-Problem zur Prüfung an.
• Contrast (Kontrast) – misst den Farbkontrast zwischen zwei beliebigen Punkten einer Seite, eines Bildes oder eines Live-Kamerabilds.
• Focus Order (Fokus-Reihenfolge) – blendet die Tastatur-Fokus-Reihenfolge (Tab-Reihenfolge) über eine Seite ein und lässt Probleme visuell erkennen. (Auf dem iPhone ist das Segment mit Focus beschriftet.)

Geben Sie der App zunächst etwas zum Testen. Beim ersten Start werden Sie aufgefordert, eine Quelle auszuwählen; danach tippen Sie auf die Schaltfläche Quelle ändern (das Plus-App-Symbol oben rechts) und wählen:

• Web-URL – geben Sie eine beliebige Adresse ein, um eine Live-Website zu laden. Sie können auch direkt in die URL-Leiste tippen („URL zum Auditieren eingeben“).
• Kamera – machen Sie ein Foto zum Prüfen.
• Galerie – laden Sie einen Screenshot oder ein Bild aus Ihrer Fotomediathek.
• Live – ein Live-Kamerabild, um reale Bildschirme und Materialien in Echtzeit zu prüfen.

Alle drei Tools funktionieren mit Webseiten. Bilder, Fotos und die Live-Kamera werden mit dem Contrast-Tool geprüft. Das Zahnradsymbol (oben links) öffnet die Einstellungen, und das •••-Menü neben der URL-Leiste enthält Zurück, Vorwärts, Neu laden und Bericht erstellen.

2. Ein automatisiertes WCAG-Audit durchführen

Das Audit-Tool führt axe-core aus – dieselbe branchenübliche Engine, die auch professionelle Barrierefreiheits-Teams verwenden – und prüft damit die geladene Seite.

1. Laden Sie eine Seite (geben Sie eine URL ein und warten Sie, bis sie vollständig geladen ist).
2. Wählen Sie das Segment Audit. Während die Engine arbeitet, sehen Sie „Audit wird vorbereitet …“ und dann „Audit wird durchgeführt …“.
3. Die Ergebnisse öffnen sich automatisch, wobei der Titel die Gesamtzahl anzeigt: Ergebnisse (N).

Die Ergebnisse lesen

Die Probleme sind nach Schweregrad gruppiert – kritisch, schwerwiegend, moderat, geringfügig – die schwerwiegendsten zuerst. Tippen Sie auf einen Schweregrad, um dessen Problemkategorien zu sehen, und dann auf eine Kategorie, um sich durch jedes betroffene Element zu blättern. Jedes Problem zeigt den Ziel-Selektor, das beteiligte HTML, eine verständliche Zusammenfassung und einen Link Mehr Informationen, der die Regel erklärt und das Element auf der Seite hervorhebt. Eine fehlerfreie Seite meldet „Glückwunsch! Keine Probleme gefunden.“

Audit-Ergebnisse teilen

Tippen Sie auf dem Ergebnisbildschirm auf die Schaltfläche Teilen, um zu exportieren:

• Audit-Bericht (PDF) – öffnet den automatisierten Berichtsablauf (siehe Abschnitt 5).
• Zusammenfassung (Text) – eine knappe Übersicht mit den Anzahlen je Schweregrad und den wichtigsten Problemen.
• Alle Ergebnisse (Text) – die vollständige Auflistung aller Einzelprobleme.
• Tabelle (CSV) – ein maschinenlesbarer Export zur Auswertung in Excel, Numbers oder einem Skript.

3. Die Tastatur-Fokus-Reihenfolge erfassen Neu

Tastatur- und viele Screenreader-Nutzer bewegen sich mit der Tab-Taste durch eine Seite. Springt die Fokus-Abfolge unlogisch umher, verstößt die Seite gegen WCAG 2.4.3 (Fokus-Reihenfolge) – und das war bisher ohne Desktop und Spezialwerkzeuge umständlich zu testen. Das neue Focus-Order-Tool zeichnet die gesamte Abfolge über die Seite.

1. Laden Sie eine Webseite.
2. Wählen Sie das Segment Focus Order. Die Seite wird abgedunkelt, während die App sie erfasst („Fokus-Reihenfolge wird berechnet“).
3. Das Overlay erscheint: nummerierte Punkte markieren jedes per Tastatur fokussierbare Element, beginnend bei 1, und Verbindungslinien zeichnen den exakten Pfad nach, dem ein Tastaturnutzer folgt. Das Panel meldet die Gesamtzahl, z. B. „14 Tab-Stopps“.
4. Tippen Sie auf einen beliebigen nummerierten Punkt, um eine Detailkarte zu diesem Element zu öffnen: seine Rolle, den zugänglichen Namen, das ARIA-Label, den Tab-Index, den CSS-Selektor und das zugrunde liegende HTML – alles, was Sie brauchen, um einen präzisen Fehlerbericht zu erstellen.

Worauf Sie achten sollten

• Sprünge, die dem visuellen Layout widersprechen – z. B. wenn der Fokus von der Navigation zur Fußzeile und zurück zum Hauptinhalt springt.
• Null Ergebnisse auf einer interaktiven Seite – die App weist Sie darauf hin: „Wenn diese Seite sichtbare Schaltflächen oder Links hat, kann das selbst ein Barrierefreiheitsfehler sein (WCAG 2.1.1).“
• Heuristische Warnungen – das Panel markiert unendliches Scrollen (weiter unten liegende Stopps können fehlen) und fixierte Elemente (Markierungen können beim Scrollen verrutschen).

Die Karte exportieren

Tippen Sie im Focus-Order-Panel auf die Schaltfläche Exportieren und wählen Sie Bild der gesamten Seite oder PDF der gesamten Seite. Der Export erfasst die komplette Seite – nicht nur den sichtbaren Bildschirm – mit intaktem nummeriertem Overlay, bereit für ein Ticket, ein Design-Review oder einen Audit-Bericht. Nutzen Sie die Schaltfläche Erneut ausführen, um nach Änderungen an der Seite erneut zu scannen.

4. Farbkontrast prüfen

Das Contrast-Tool misst den Kontrast zwischen zwei beliebigen Farben auf dem Bildschirm – in einer Website, einem Screenshot, einem Foto oder im Live-Kamerabild.

1. Laden Sie eine Quelle (Webseite, Bild oder Live-Kamera).
2. Wählen Sie das Segment Contrast.
3. Ziehen Sie die beiden Picker auf die Farben, die Sie vergleichen möchten – typischerweise Text und sein Hintergrund. Verschieben und zoomen Sie mit zwei Fingern für eine pixelgenaue Platzierung.
4. Die Ergebnisse aktualisieren sich live: das Kontrastverhältnis (z. B. Kontrast: 4.6:1) mit Bestanden/Nicht bestanden für WCAG 2.1 AA und AAA, jeweils für normalen und großen Text.

Eine durchgefallene Kombination korrigieren

Tippen Sie auf die Schaltfläche Vorschläge, um berechnete Alternativen zu sehen, die bestehen würden, gruppiert als AAA-konform (7:1), AA-konform (4.5:1) und AA für großen Text (3:1). Tippen Sie auf einen Vorschlag, um ihn auf den Picker anzuwenden und im Kontext zu sehen.

Farben kopieren

Tippen Sie auf ein Farbfeld, um es im gewünschten Format zu kopieren:

• HTML-hex – z. B. #1A56DB
• UIColor (RGBA) – bereit zum Einfügen in Swift
• UIColor (HSB) – in Form von Farbton/Sättigung/Helligkeit

Sie können einen hex-Wert auch direkt bearbeiten, um eine bestimmte Farbe zu testen, die Sie nicht vom Bildschirm ausgewählt haben.

Messwerte teilen und speichern

Das Teilen-Menü im Contrast-Panel bietet:

• Zum Bericht hinzufügen – speichern Sie diesen Messwert für den automatisierten Bericht (siehe Abschnitt 5).
• Als Text teilen oder Screenshot teilen – senden Sie Ergebnisse per Mail, Nachrichten, Notizen und mehr.
• Im Browser öffnen – sehen Sie dasselbe Ergebnis auf accessibleresources.com, um es als Link zu teilen.

Live-Kamera

Wählen Sie Quelle ändern → Live, um den Kontrast in Echtzeit durch Ihre Kamera zu prüfen – nützlich für Kioske, Beschilderung, Druckerzeugnisse und andere physische Oberflächen. Tippen Sie auf die Schaltfläche Einfrieren, um ein Standbild zu halten, während Sie die Picker platzieren, und tippen Sie erneut, um fortzufahren.

Aus Safari und Fotos heraus prüfen

Sie müssen Ihren Browser nicht verlassen: Tippen Sie in Safari auf Teilen und wählen Sie Accessibility Checker, um die aktuelle Seite direkt in das Contrast-Tool zu laden. Genauso funktioniert es aus Fotos mit jedem Screenshot oder Bild.

5. Berichte & Barrierefreiheitserklärungen erstellen

Testen ist nur die halbe Arbeit – meist müssen Sie Ihre Ergebnisse auch belegen. Accessibility Checker fasst alles, was Sie erfasst haben, in einem automatisierten Barrierefreiheitsbericht zusammen und kann eine veröffentlichungsfertige Barrierefreiheitserklärung erstellen.

Einen Bericht erstellen

1. Führen Sie die Tools aus, von denen Sie Nachweise wollen: ein Audit, Kontrastprüfungen (nutzen Sie Zum Bericht hinzufügen, um Messwerte zu speichern) und einen Focus-Order-Scan.
2. Wählen Sie Bericht erstellen – aus dem •••-Menü neben der URL-Leiste oder über die Berichtsschaltfläche auf iPad und Mac.
3. Legen Sie im Berichtsgenerator den Gegenstand fest (was der Bericht abdeckt) und aktivieren Sie die einzuschließenden Tools: Audit (AxeCore), Farbkontrast und Fokus-Reihenfolge. Der Generator zeigt laufend, was enthalten ist, und Sie können einzelne gespeicherte Kontrast-Messwerte gezielt auswählen.
4. Tippen Sie auf Vorschau & Export, ergänzen Sie Ihren Organisationsnamen und eine Kontakt-E-Mail oder -Seite und exportieren Sie das PDF.

Was der Bericht enthält

Ein mehrseitiges PDF, gestaltet als automatisierte Selbstbewertung gegen WCAG 2.1 AA / EN 301 549 – die harmonisierte Norm, auf die sich der European Accessibility Act (EAA) bezieht. Es enthält ein Deckblatt mit einem zusammenfassenden Urteil und einer Aufschlüsselung nach Schweregrad, die vollständigen Ergebnisse mit Selektoren und Verweisen, einen Farbkontrast-Anhang mit Nachweis-Ausschnitten sowie die Karte der Fokus-Reihenfolge.

Entscheidend ist ein ehrlicher Abschnitt „Was dieser Scan abdeckt – und was nicht“: welche der 50 WCAG-2.1-Erfolgskriterien der Stufen A/AA automatisch geprüft wurden, welche eine menschliche Prüfung erfordern (als fertige manuelle Checkliste) und welche jenseits jedes automatisierten Seiten-Scans liegen. Automatisierte Tests liefern Ihnen eine schnelle Ausgangsbasis – sie sind keine Konformitätszertifizierung, und der Bericht sagt das unmissverständlich.

Eine Barrierefreiheitserklärung veröffentlichen

Wählen Sie in der Berichtsvorschau Barrierefreiheitserklärung öffnen. Die App erstellt aus Ihren Ergebnissen eine selbst bewertete Erklärung – Konformitätsstatus, bekannte Einschränkungen, Feedback-Kontakt und Bewertungsmethode – in wahlweise 17 Sprachen, unabhängig von der Sprache der App. Sie können sie als Text kopieren, als HTML für Ihre eigene Website herunterladen, drucken oder als gehosteten Link teilen. Sehen Sie eine Live-Beispielerklärung.

6. iPad & Mac: schwebende Karte und Kurzbefehle Neu

Dieses Update gestaltet die App für große Bildschirme neu. Auf iPad und Mac läuft die getestete Seite randlos im Vollbild, und die Ergebnisse erscheinen in einer schwebenden Karte statt in einem festen Panel am unteren Rand.

• Verschieben Sie sie überallhin: Ziehen Sie die Karte an ihrer Kopfzeile in jede Ecke – dorthin, wo sie den geprüften Teil der Seite nicht verdeckt. Mit VoiceOver nutzen Sie die eigenen Aktionen der Karte (Nach oben links verschieben, oben rechts, unten links, unten rechts).
• Klappen Sie sie ein: Tippen Sie auf den Pfeil in der Kopfzeile der Karte, um sie beim Browsen auf eine Titelleiste zu verkleinern, und tippen Sie erneut, um die Ergebnisse zurückzuholen.
• Scrollen Sie weiter: Der Seiteninhalt scrollt stets frei an der Karte vorbei, sodass nichts dauerhaft verdeckt bleibt.

Tastaturkurzbefehle

Mit einer Hardware-Tastatur auf dem iPad (halten Sie ⌘ gedrückt, um das Kurzbefehl-HUD zu sehen) oder über die Menüleiste auf dem Mac:

Geräte-Emulation

Auf iPad und Mac können Sie in der Vorschau sehen, wie eine Seite bei verschiedenen Größen reagiert: Gerät emulieren → Smartphone, Tablet oder Desktop (in der Mac-Menüleiste oder mit den obigen Kurzbefehlen) stellt die Seite in der Breite des jeweiligen Geräts dar und präsentiert sie mit dem passenden Safari-User-Agent – so können Sie die mobile Darstellung einer Website von Ihrem Mac aus prüfen oder die Desktop-Darstellung von Ihrem iPad aus.

7. Einstellungen

Öffnen Sie die Einstellungen mit dem Zahnradsymbol (oder ⌘,). Die wichtigsten Punkte:

• Startseite ändern – legen Sie die Seite fest, mit der die App startet.
• App-Sprache – die App gibt es in 18 Sprachen; dies führt zur iOS-Einstellung für die App-spezifische Sprache.
• App-Symbol – wählen Sie zwischen den Symbolstilen High Contrast, Liquid Glass und Accessibility.
• APCA™ Lc anzeigen (WCAG 3.0) – ergänzt die Kontrastergebnisse um APCA-Werte (siehe Abschnitt 4).
• Axe-core-Version und Audit-Ergebnisse – steuern die Audit-Engine und ob „zu prüfende“ Punkte einbezogen werden.
• Focus Order – Optionen für Erscheinungsbild, Interaktion und Umfang des Overlays (siehe Abschnitt 3).
• WCAG-Karten – eine integrierte Kurzreferenz zu den Richtlinien.
• Hilfe und Willkommenstour wiederholen – spielen Sie die In-App-Einführung jederzeit erneut ab.
• Käufe wiederherstellen – stellen Sie ein Abonnement auf einem neuen Gerät wieder her.
• Account – optional per Sign in with Apple anmelden, um Ihre Berichtsangaben (Organisationsname und Kontakt) geräteübergreifend zu synchronisieren. Eine Anmeldung ist nie erforderlich, nichts, was Sie prüfen, wird mit Ihrem Account verknüpft, und Sie können den Account – und seine Daten – auf demselben Bildschirm löschen.

8. Kostenlose Funktionen und kostenpflichtige Pläne

Accessibility Checker lässt sich kostenlos herunterladen, und das Durchsuchen von Seiten sowie das Ansehen Ihrer bestehenden Ergebnisse ist immer kostenlos. Zwei Abo-Stufen schalten den vollständigen Workflow frei, und jedes Abonnement beginnt mit einer 7-tägigen kostenlosen Testphase:

• Checker – unbegrenzte Audits, Kontrastprüfungen und Fokus-Scans; AAA- und APCA-Prüfungen zusätzlich zu AA; Berichtsvorschauen mit Wasserzeichen.
• Checker Pro – alles aus Checker, plus vollständige WCAG-Berichte ohne Wasserzeichen, veröffentlichungsfertige Barrierefreiheitserklärungen und saubere Exporte ohne Herkunftsvermerke.
• Checker Pro Lifetime – ein einmaliger Kauf statt eines Abonnements, mit allem aus Checker Pro.

Die aktuellen Preise werden in der App angezeigt. Abonnements lassen sich jederzeit in den Einstellungen kündigen, und Käufe wiederherstellen überträgt einen bestehenden Plan auf ein neues Gerät.

9. Häufig gestellte Fragen

Sind meine Daten privat?

Ja. Audits, Kontrastprüfungen und Fokus-Scans laufen alle auf Ihrem Gerät – die Websites, Bilder und Farben, die Sie prüfen, werden nie hochgeladen. Selbst der teilbare Link zur Barrierefreiheitserklärung trägt seinen Inhalt im Link selbst statt auf einem Server. Details finden Sie in der Datenschutzerklärung.

Macht mich ein fehlerfreies automatisiertes Audit EAA-konform?

Nein – und seien Sie misstrauisch gegenüber jedem Tool, das etwas anderes behauptet. Automatisierte Prüfungen liefern Ihnen eine schnelle, wiederholbare Ausgangsbasis für die EAA-Bereitschaft anhand der WCAG-Kriterien hinter EN 301 549, doch volle Konformität erfordert immer manuelle Tests. Der Bericht der App sagt Ihnen genau, welche Kriterien automatisch geprüft wurden und welche noch eine menschliche Prüfung benötigen.

Welche Audit-Engine verwendet die App?

Die branchenübliche axe-core-Engine, die in die App integriert ist und ohne jede Einrichtung funktioniert. In den Einstellungen können Sie die axe-core-Version wählen, wenn Sie die Version abgleichen müssen, die Ihr Team anderswo verwendet.

Warum zeigt meine exportierte Fokus-Karte nur einen Teil der Seite?

Manche Seiten verhindern die Erfassung der gesamten Seite; die App weist Sie darauf hin, wenn sie nur den sichtbaren Bereich exportiert hat. Seiten mit unendlichem Scrollen können beim Scrollen auch weitere Stopps hinzufügen – das Panel warnt Sie, wenn es dies erkennt. Scrollen Sie weiter und führen Sie den Scan erneut aus, um mehr zu erfassen.

Wo erhalte ich Hilfe oder schlage eine Funktion vor?

Nutzen Sie Feedback senden in den Einstellungen oder schreiben Sie an info@accessibleresources.com – wir lesen alles.