Qualität: i18n & Barrierefreiheit

So arbeitet die Prüfung

Öffne in den DevTools (F12) das Panel FrontTailor oder das Side-Panel und wähle den Tab Qualität. Vor dem Klick läuft in der Seite nichts. Dann liest FrontTailor die App einmal: Controls, Bindings, Resource Bundles, Beschriftungen und Farben. Alles wird in deinem Browser ausgewertet.

Geprüft wird nur, was zur App gehört: Controls, die einer Komponente der App gehören und gerendert sind. Die Launchpad-Shell, nicht gerenderte Controls und das Innenleben von Bibliotheken bleiben außen vor. Controls aus Templates von Fiori Elements bekommen ihre Texte aus Annotationen und werden deshalb nicht auf hartcodierte Texte geprüft.

Eine Prüfung starten

1. Öffne die App auf der Seite, die du prüfen willst, und im Panel den Tab Qualität.
2. Klicke Prüfen. Sollen auch die Sprachdateien verglichen werden, klicke stattdessen Übersetzungen laden (de, en).
3. Lies oben die Summe aus Fehlern, Warnungen und Hinweisen, darunter die Abschnitte Texte und Barrierefreiheit.
4. Hast du etwas behoben oder eine andere Seite der App geöffnet, klicke Erneut prüfen.

1. Prüfen, nach dem ersten Lauf Erneut prüfen.
2. Übersetzungen laden (de, en): prüft und vergleicht dazu die Sprachdateien.
3. Die Summe aus Fehlern, Warnungen und Hinweisen.
4. Zeitpunkt, Zahl der Controls, Bundles und Kontrastproben, Dauer; darunter UI5-Version, Sprache und Theme.

Die Prüfung startet auch über die Befehlspalette (Alt+Shift+K, auf dem Mac ⌥+Shift+K) mit dem Befehl i18n- und Barrierefreiheitsprüfung starten. Die Seite merkt sich den letzten Bericht: Nach einem Lauf aus der Palette oder einem Wechsel zwischen DevTools und Side-Panel zeigt der Tab ihn, ohne neu zu prüfen.

Abschnitt „Texte“

1. Sprache testen: App in einer anderen Sprache neu laden, dann erneut prüfen.
2. Filter nach Schweregrad: Alle, Fehler, Warnung, Hinweis, je mit Anzahl.
3. Filter nach Regel: Alle Regeln oder eine Regel mit Anzahl.
4. Nach Control, Schlüssel oder Text filtern.
5. Stand jeder geladenen Sprachdatei: Zahl der Schlüssel oder Datei fehlt, nicht in supportedLocales, nicht ladbar, anderer Ursprung – nicht geladen.
6. Ein Befund mit Regel, Schlüssel, Bundle, Text, geladenen Dateien und Behebung.

Übersetzungen laden (de, en) lädt die Sprachdateien der eigenen Resource Bundles der App über UI5 – nur vom gleichen Ursprung, nur lesend, höchstens zehn Bundles – und vergleicht sie mit der Standarddatei. Eine Sprache, die nicht in den supportedLocales steht, wird nicht angefragt, sondern als nicht in supportedLocales gemeldet.

Sprache testen

1. Prüfe die App einmal, damit der Abschnitt Texte erscheint.
2. Wähle unter Sprache testen die Sprache. Daneben steht die aktuelle Sprache.
3. Klicke Neu laden mit Sprache. Die App lädt mit dem URL-Parameter sap-ui-language neu – Bundles, Texte von Fiori Elements und OData-Texte kommen dann in der neuen Sprache.
4. Klicke im Tab Qualität auf Prüfen.

Mehr in Werkzeuge öffnet die Karte Sprache im Tab Werkzeuge: mit allen Sprachen der App, den SAP-Testsprachen, RTL und dem Umschalten ohne Neuladen.

Abschnitt „Barrierefreiheit“

1. Der Befund: Regel, Schwere, Control-Typ und ID.
2. Die Behebung in einem Satz.
3. UI5-Dokumentation und WCAG 2.2 – 1.3.1 öffnen die passenden Seiten.
4. Im Inspector zeigen wählt das Control im Inspector aus.
5. In der Seite hervorheben rahmt das Control vier Sekunden lang ein.
6. Als Markdown kopieren nimmt den Befund mit, etwa für ein Ticket.
7. CSV exportieren, daneben Markdown exportieren und Alle als Markdown kopieren.

Beim Kontrast gilt 4,5:1, für großen Text (ab 24 px oder ab 18,66 px fett) 3:1 – ohne Runden. Deaktivierte Elemente sind ausgenommen, Texte auf Bildern oder Verläufen werden übersprungen.

1. Rahmen und Etikett mit Control-Typ und ID.

Befunde filtern und weitergeben

Gleiche Befunde – etwa geklonte Listeneinträge oder wiederholte Texte – fasst FrontTailor zusammen und zählt sie. Beide Abschnitte haben dieselben Filter und Exporte; der Export nimmt die gerade gefilterten Befunde.

Mit der KI-Leiste und deinem eigenen Schlüssel gibt es zwei Einstiege: Fehlende Texte übersetzen im Abschnitt Texte macht aus fehlenden Schlüsseln und Übersetzungen .properties-Snippets je Sprache, Mit KI beheben im Abschnitt Barrierefreiheit schlägt je Befund eine Korrektur mit WCAG-Kriterium vor. Gesendet wird erst nach Vorschau und Klick.

Was die Prüfung nicht sieht

• Ungenutzte Schlüssel sind nur ein Hinweis: Controller, Formatter und nicht geladene Views sieht die Prüfung nicht.
• Fehlende Schlüssel und hartcodierte Texte findet sie nur in gerenderten Views. Öffne Dialoge und weitere Seiten und prüfe erneut.
• Der zugängliche Name ist eine Näherung an das, was ein Screenreader ansagt.
• Kein Kontrast für Nicht-Text-Elemente (WCAG 1.4.11), keine Prüfung von Tastatur und Fokusreihenfolge.

Typische Probleme