Barrierefreie App-Store-Screenshots: Kontrast, Schriftgröße, Alt-Text
App-Store-Screenshots sind für einen Screenreader nicht auf dieselbe Weise zugänglich wie eine Webseite – Apple stellt dem Nutzer den Alt-Text von Screenshots nicht direkt bereit. Aber die visuellen Barrierefreiheitsregeln (Kontrast, Schriftgröße, Farbunabhängigkeit) gelten absolut, und sie sind dieselben Regeln, die die Lesbarkeit in Thumbnail-Größe bestimmen. Beides ist sinnvoll – es ist dieselbe Arbeit.
Kontrast: WCAG AA als Ausgangspunkt
WCAG-AA-Kontrastverhältnisse:
- Normaler Text: mindestens 4.5:1 zum Hintergrund.
- Großer Text (24pt+ regulär oder 18pt+ fett): mindestens 3:1.
- Grafische Elemente / UI-Steuerelemente: mindestens 3:1.
Verwende für jeden Untertitel ein Kontrast-Prüfwerkzeug – es gibt viele kostenlose – und prüfe ihn gegen den Panel-Hintergrund, auf dem er liegt. Wenn dein Hintergrund ein Farbverlauf ist, prüfe gegen den dunkelsten und hellsten Punkt des Verlaufs, an dem der Untertitel sitzt.
Häufiger Fehler: weißer Text über einem Farbverlauf von hellem Orange zu dunklem Orange. Wo der Untertitel auf dem hellen Orange liegt, fällt der Kontrast unter 4.5:1, und der Text verschwindet in Thumbnail-Größe.
Schriftgröße im Thumbnail
App-Store-Screenshots werden in verschiedenen Größen dargestellt:
- Volle Größe auf der Produktseite (ca. 1290 px breit).
- Suchergebnis-Vorschau (ca. 600 px breit).
- Suchergebnis-Thumbnail (ca. 300 px breit).
Wenn dein Untertitel in der Design-Datei bei 1290 × 2796 mit 60px angegeben ist, wird er im 300px-Suchthumbnail mit ca. 14px dargestellt. 14px liegt unterhalb der empfohlenen Mindestgröße für Lesbarkeit. Die Lösung: Gestalte Untertitel mit 80–100px, damit sie in Thumbnails mit 18–22px erscheinen. Das gilt besonders für die Panels 1–3, die in Suchergebnissen sichtbar sind.
Farbunabhängigkeit
Verlasse dich nicht allein auf Farbe, um Informationen zu vermitteln. Der häufigste Verstoß: Untertitel-Text in einer Farbe, die sich vom Hintergrund nur durch den Farbton unterscheidet (roter Text auf grünem Hintergrund zum Beispiel). Wer rot-grün-blind ist, sieht nur Matsch.
Test: Wenn du deinen Screenshot in Graustufen umwandelst, kannst du dann noch jeden Untertitel lesen? Falls ja, bist du farbunabhängig. Falls nein, erhöhe den Helligkeitsunterschied – nicht nur den Farbtonunterschied.
Alt-Text in App Store Connect
App Store Connect stellt Alt-Text für Screenshots nicht auf dieselbe Weise bereit wie eine Webseite alt-Attribute bereitstellt. Aber App Store Connect verfügt pro Screenshot über ein „Barrierefreiheits-Tags“-Feld, das von VoiceOver-Nutzern beim Durchsuchen des App Store verwendet wird. Fülle es aus. Kurze Beschreibung dessen, was der Screenshot zeigt: „Startbildschirm mit monatlicher Ausgabenübersicht“ statt „Screenshot 1“.
Das ist der größte einzelne Barrierefreiheits-Gewinn, weil ihn fast kein Entwickler nutzt. VoiceOver-Nutzer, die den App Store durchsuchen, hören derzeit bei der großen Mehrheit der Apps „Screenshot 1, Screenshot 2“. Wenige Sätze Beschreibung pro Panel machen deinen App-Store-Eintrag für diese Zielgruppe deutlich nutzbarer.
Das Antipattern „Kleine Schrift, dekorative Schriftart“
Dekorative Schriften (Handschriftfonts, extraschmale Display-Schriften) scheitern fast immer gleichzeitig an Barrierefreiheits- und Thumbnail-Tests. Die dünnen Striche, die in voller Größe elegant wirken, werden bei 300px unleserlich und sind für Nutzer mit eingeschränkter Sehkraft nicht lesbar.
Verwende diese dekorativen Stile für höchstens ein Akzentwort pro Karussell. Reguläre Untertitel und alle wichtigen Texte brauchen eine Schrift mit gleichmäßigem Strichgewicht in den relevanten Größen – die meisten modernen Groteskschriften (Inter, SF Pro, Roboto) funktionieren.
Untertitel-Position und sichere Bereiche
Apple blendet manchmal UI über das App-Store-Karussell ein (der „Get“-Button, der Altersfreigabe-Chip, der „Open“-Button nach der Installation). Wenn dein Untertitel in diesen Bereichen liegt, wird er verdeckt. Halte Untertitel in der sicheren Zone: 60px von jeder Seite, 80px vom oberen Rand, 200px Abstand am unteren Rand für die App-Store-UI.
Was du vor der Veröffentlichung testen solltest
- Prüfe jeden Untertitel mit einem Kontrast-Prüfwerkzeug gegen seinen Panel-Hintergrund.
- Sieh dir deine Screenshots bei 300px Breite in einem Thumbnail-Simulator an (oder verkleinere sie einfach in Figma). Jeder Untertitel sollte noch lesbar sein.
- Graustufen-Test auf Farbunabhängigkeit.
- Schreibe Barrierefreiheits-Tags für jedes Panel in App Store Connect.
- Wenn du einen VoiceOver-Nutzer in deinem Testkreis hast, bitte ihn, deinen App-Store-Eintrag zu durchsuchen und Rückmeldung zu geben.
Warum das über Barrierefreiheit hinaus wichtig ist
Die Kontrast- und Größenregeln, die WCAG kodifiziert, stammen aus der Sehforschung. Sie sind nicht willkürlich – es sind die Schwellenwerte, unterhalb derer ein bedeutender Anteil der Nutzer Text nicht komfortabel lesen kann. Für AA zu gestalten bedeutet, für die Gesamtheit der Nutzer zu gestalten: ältere Nutzer, Nutzer auf hellen Außenbildschirmen, Nutzer mit leichten unkorrigierten Sehproblemen – und alle, die im Suchlauf durch Ergebnisse scrollen.
Dieselben Regeln, die Nutzern mit eingeschränkter Sehkraft helfen, deinen Screenshot zu lesen, helfen auch Nutzern, die den App Store in der Sonne im Zug durchsuchen. Dasselbe Problem, dieselbe Lösung.