Toegankelijke App Store-screenshots: contrast, tekstgrootte, alt-tekst
App Store-screenshots zijn niet op dezelfde manier doorzoekbaar met een schermlezer als een webpagina — Apple stelt de alt-tekst van screenshots niet rechtstreeks beschikbaar aan de gebruiker. Maar de visuele toegankelijkheidsregels (contrast, tekstgrootte, kleuronafhankelijkheid) gelden onverkort, en het zijn dezelfde regels die de leesbaarheid op miniatuurformaat bepalen. Het is de moeite waard om beide aan te pakken, want het is hetzelfde werk.
Contrast: WCAG AA als uitgangspunt
WCAG AA-contrastwaarden:
- Gewone tekst: minimaal 4.5:1 ten opzichte van de achtergrond.
- Grote tekst (24pt+ normaal of 18pt+ vet): minimaal 3:1.
- Grafische elementen / UI-bedieningselementen: 3:1.
Gebruik een contrastmeter — er zijn veel gratis opties — voor elk bijschrift ten opzichte van de achtergrond van het paneel waarop het staat. Als je achtergrond een verloop is, controleer dan op het donkerste en lichtste punt van het verloop waar het bijschrift valt.
Veelvoorkomende fout: witte tekst op een licht-naar-donker-oranje verloop. Waar het bijschrift op het lichte oranje valt, zakt het contrast onder de 4.5:1 en verdwijnt de tekst op miniatuurformaat.
Tekstgrootte op miniatuurformaat
App Store-screenshots worden op meerdere formaten weergegeven:
- Volledig formaat op de productpagina (~1290 px breed).
- Zoekresultaten-voorbeeld (~600 px breed).
- Zoekresultaten-miniatuur (~300 px breed).
Als je bijschrift 60px is in het ontwerpbestand op 1290 × 2796, wordt het weergegeven op ~14px in een zoekminiatuur van 300px. 14px is kleiner dan de aanbevolen minimumgrootte voor leesbaarheid. De oplossing: ontwerp bijschriften op 80-100px zodat ze op 18-22px worden weergegeven in miniaturen. Dit geldt in het bijzonder voor panelen 1-3, want dat is wat zichtbaar is in de zoekresultaten.
Kleuronafhankelijkheid
Gebruik niet alleen kleur om informatie over te brengen. De meest voorkomende overtreding: bijschrifttekst in een kleur die alleen op tint verschilt van de achtergrond (rode tekst op groene achtergrond, bijvoorbeeld). Wie rood-groen kleurenblind is, ziet een vaal vlak.
Test: als je je screenshot in grijswaarden zet, kun je dan nog elk bijschrift lezen? Zo ja, ben je kleuronafhankelijk. Zo nee, vergroot dan het luminantie- (helderheid-)verschil, niet alleen het tintverschil.
Alt-tekst in App Store Connect
App Store Connect stelt de alt-tekst van screenshots niet op dezelfde manier beschikbaar als een webpagina alt-attributen beschikbaar stelt. Maar App Store Connect heeft wel een veld 'accessibility tags' per screenshot, dat wordt gebruikt door VoiceOver-gebruikers die de App Store doorzoeken. Vul het in. Korte beschrijving van wat de screenshot toont: 'Startscherm met maandelijks bestedingsoverzicht' in plaats van 'Screenshot 1'.
Dit is de grootste toegankelijkheidswinst, want vrijwel geen enkele developer doet het. VoiceOver-gebruikers die de App Store doorzoeken horen voor de overgrote meerderheid van apps momenteel 'screenshot 1, screenshot 2'. Een paar zinnen beschrijving per paneel maakt je vermelding aanzienlijk bruikbaarder voor dat publiek.
Het anti-patroon van kleine en decoratieve lettertypes
Decoratieve lettertypes (handschriftlettertypes, ultradunne display-lettertypes) falen vrijwel altijd tegelijk voor toegankelijkheid en de miniatuurtest. De dunne lijnen die er op volledig formaat elegant uitzien worden onleesbaar bij 300px en zijn niet te lezen voor gebruikers met een verminderd gezichtsvermogen.
Gebruik deze decoratieve stijlen voor maximaal één accentwoord per carrousel. Bijschriften en alle belangrijke tekst hebben een lettertype nodig met een consistent lijngewicht op de formaten die ertoe doen — de meeste moderne grotesque schreefloze lettertypes (Inter, SF Pro, Roboto) werken prima.
Positie van bijschriften en veilige gebieden
Apple legt soms UI over de App Store-carrousel heen (de Get-knop, het leeftijdsbeoordelingslabel, de Open-knop na installatie). Als je bijschrift in die gebieden staat, wordt het afgedekt. Houd bijschriften in de veilige zone: 60px van elke zijkant, 80px van de bovenkant, en 200px vrij aan de onderkant voor de App Store-UI.
Wat je controleert voor je publiceert
- Voer elk bijschrift door een contrastmeter ten opzichte van de achtergrond van het paneel.
- Bekijk je screenshots op 300px breed in een miniatuur-simulator (of verklein ze gewoon in Figma). Elk bijschrift moet dan nog leesbaar zijn.
- Voer de grijswaardentest uit voor kleuronafhankelijkheid.
- Schrijf accessibility tags voor elk paneel in App Store Connect.
- Als je een VoiceOver-gebruiker in je testgroep hebt, vraag hem of haar dan je vermelding te bekijken en feedback te geven.
Waarom dit verder gaat dan toegankelijkheid alleen
De contrast- en grootteregels die WCAG vastlegt zijn gebaseerd op onderzoek naar het menselijk gezichtsvermogen. Ze zijn niet willekeurig — het zijn de drempelwaarden waaronder een aanzienlijk deel van de gebruikers tekst niet comfortabel kan lezen. Ontwerpen voor AA betekent ontwerpen voor een publiek dat oudere gebruikers omvat, gebruikers op felle buitenschermen, gebruikers met lichte ongecorrigeerde oogproblemen, plus iedereen die snel door de zoekresultaten scrolt.
Dezelfde regels die gebruikers met een verminderd gezichtsvermogen helpen jouw screenshot te lezen, helpen ook gebruikers die de App Store scrollen in de zon op een trein. Hetzelfde probleem; dezelfde oplossing.