Screenshot accessibili per l'App Store: contrasto, dimensione testo, alt text
Gli screenshot dell'App Store non sono navigabili con uno screen reader come una pagina web — Apple non espone l'alt text degli screenshot direttamente all'utente. Ma le regole di accessibilità visiva (contrasto, dimensione del testo, indipendenza dal colore) si applicano eccome, e coincidono con le stesse regole che governano la leggibilità a dimensione miniatura. Vale la pena rispettarle entrambe perché sono lo stesso lavoro.
Contrasto: WCAG AA come base di partenza
Rapporti di contrasto WCAG AA:
- Testo normale: minimo 4,5:1 rispetto allo sfondo.
- Testo grande (24pt+ normale o 18pt+ grassetto): minimo 3:1.
- Elementi grafici / controlli UI: 3:1.
Usa un verificatore di contrasto — ne esistono molti gratuiti — su ogni didascalia rispetto allo sfondo del pannello su cui si trova. Se lo sfondo è un gradiente, verifica nei punti più scuri e più chiari del gradiente dove si trova la didascalia.
Errore comune: testo bianco su un gradiente che va da arancione chiaro ad arancione scuro. Dove la didascalia cade sull'arancione chiaro, il contrasto scende sotto 4,5:1 e il testo scompare a dimensione miniatura.
Dimensione del testo in miniatura
Gli screenshot dell'App Store vengono renderizzati a più dimensioni:
- Dimensione intera sulla pagina prodotto (~1.290 px di larghezza).
- Anteprima del risultato di ricerca (~600 px di larghezza).
- Miniatura del risultato di ricerca (~300 px di larghezza).
Se la tua didascalia è 60px nel file di design a 1.290 × 2.796, viene renderizzata a circa 14px in una miniatura di ricerca da 300px. 14px è sotto la dimensione minima raccomandata per la leggibilità. La soluzione: progetta le didascalie a 80-100px in modo che vengano renderizzate a 18-22px nelle miniature. In particolare per i pannelli 1-3, che sono quelli mostrati nella ricerca.
Indipendenza dal colore
Non affidarti al colore da solo per comunicare informazioni. La violazione più comune: testo della didascalia in un colore distinguibile dallo sfondo solo per la tonalità (testo rosso su sfondo verde, ad esempio). Chi ha daltonismo rosso-verde vede solo confusione.
Test: se converti lo screenshot in scala di grigi, riesci ancora a leggere ogni didascalia? Se sì, sei indipendente dal colore. Se no, aumenta la differenza di luminanza (luminosità), non solo la differenza di tonalità.
Alt text in App Store Connect
App Store Connect non espone l'alt text degli screenshot nello stesso modo in cui una pagina web espone gli attributi alt. Ma App Store Connect ha un campo "tag di accessibilità" per ogni screenshot usato dagli utenti VoiceOver che navigano l'App Store. Compilalo. Breve descrizione di cosa mostra lo screenshot: "Schermata principale con riepilogo delle spese mensili" anziché "Screenshot 1".
Questo è il singolo maggior vantaggio in termini di accessibilità perché quasi nessuno sviluppatore lo fa. Gli utenti VoiceOver che navigano l'App Store sentono attualmente "screenshot 1, screenshot 2" per la grande maggioranza delle app. Poche frasi di descrizione per pannello rendono il tuo annuncio molto più usabile per quel pubblico.
L'anti-pattern del "font piccolo, tipo decorativo"
I font decorativi (scritti a mano, display ultra-sottili) quasi sempre falliscono sia i test di accessibilità sia quelli in miniatura. I tratti sottili che sembrano eleganti a piena dimensione diventano illeggibili a 300px e impossibili da leggere per gli utenti con bassa visione.
Usa questi stili decorativi al massimo per una parola d'accento per carosello. Le didascalie principali e qualsiasi testo importante richiedono un font con peso del tratto uniforme alle dimensioni che ti interessano — la maggior parte dei sans-serif grotteschi moderni (Inter, SF Pro, Roboto) funzionano.
Posizione delle didascalie e aree sicure
Apple a volte sovrappone elementi UI al carosello dell'App Store (il pulsante "Ottieni", il chip della classificazione per età, il pulsante "Apri" dopo l'installazione). Se la tua didascalia si trova in quelle aree, viene occlusa. Mantieni le didascalie nell'area sicura: 60px da ogni lato, 80px dall'alto, 200px liberi in basso per l'UI dell'App Store.
Cosa testare prima di pubblicare
- Controlla ogni didascalia con un verificatore di contrasto rispetto allo sfondo del suo pannello.
- Visualizza gli screenshot a 300px di larghezza in un simulatore di miniature (o ridimensiona in Figma). Ogni didascalia deve essere ancora leggibile.
- Testa l'indipendenza dal colore convertendo in scala di grigi.
- Scrivi i tag di accessibilità per ogni pannello in App Store Connect.
- Se hai un utente VoiceOver nel tuo gruppo di test, chiedigli di navigare il tuo annuncio e segnalare.
Perché questo conta al di là dell'accessibilità
Le regole di contrasto e dimensione che WCAG codifica derivano dalla ricerca sulla visione umana. Non sono arbitrarie — sono le soglie al di sotto delle quali una percentuale significativa di utenti non riesce a leggere il testo comodamente. Progettare per AA significa progettare per una popolazione che include utenti anziani, utenti su schermi luminosi all'aperto, utenti con lievi problemi visivi non corretti, più tutti quelli che scorrono velocemente tra i risultati di ricerca.
Le stesse regole che aiutano gli utenti con bassa visione a leggere il tuo screenshot aiutano anche gli utenti che scorrono l'App Store su un treno soleggiato. Stesso problema; stessa soluzione.