Captures d'écran App Store accessibles : contraste, taille du texte, texte alternatif
Les captures d'écran de l'App Store ne sont pas parcourables avec un lecteur d'écran de la même façon qu'une page web — Apple n'expose pas directement le texte alternatif des captures d'écran à l'utilisateur. Mais les règles d'accessibilité visuelle (contraste, taille du texte, indépendance de la couleur) s'appliquent pleinement, et ce sont les mêmes règles qui régissent la lisibilité en taille miniature. Ça vaut la peine de faire les deux, car c'est le même travail.
Contraste : WCAG AA comme base
Ratios de contraste WCAG AA :
- Texte normal : minimum 4,5:1 par rapport au fond.
- Grand texte (24 pt+ régulier ou 18 pt+ gras) : minimum 3:1.
- Éléments graphiques / contrôles d'interface : 3:1.
Utilise un vérificateur de contraste — il en existe beaucoup de gratuits — sur chaque légende par rapport au fond du panneau sur lequel elle se trouve. Si ton fond est un dégradé, vérifie les points les plus sombres et les plus clairs du dégradé là où la légende se trouve.
Erreur fréquente : texte blanc sur un dégradé allant d'un orange clair à un orange foncé. Là où la légende se trouve sur l'orange clair, le contraste descend en dessous de 4,5:1 et le texte disparaît en taille miniature.
Taille du texte en miniature
Les captures d'écran de l'App Store s'affichent à plusieurs tailles :
- Taille réelle sur la page produit (~1290 px de large).
- Aperçu dans les résultats de recherche (~600 px de large).
- Miniature dans les résultats de recherche (~300 px de large).
Si ta légende fait 60 px dans le fichier de conception à 1290 × 2796, elle s'affiche à ~14 px dans une miniature de recherche de 300 px. 14 px est en dessous de la taille minimale recommandée pour la lisibilité. La solution : conçois les légendes à 80-100 px pour qu'elles s'affichent à 18-22 px dans les miniatures. Notamment pour les panneaux 1 à 3, qui sont ceux qui apparaissent dans la recherche.
Indépendance de la couleur
Ne t'appuie pas uniquement sur la couleur pour communiquer une information. La violation la plus fréquente : texte de légende dans une couleur qui se distingue du fond uniquement par la teinte (texte rouge sur fond vert, par exemple). Toute personne souffrant de daltonisme rouge-vert ne voit que du gris.
Test : si tu convertis ta capture d'écran en niveaux de gris, peux-tu encore lire chaque légende ? Si oui, tu es indépendant de la couleur. Sinon, augmente la différence de luminosité, pas seulement la différence de teinte.
Texte alternatif dans App Store Connect
App Store Connect n'expose pas le texte alternatif des captures d'écran de la même façon qu'une page web expose les attributs alt. Mais App Store Connect dispose d'un champ « balises d'accessibilité » par capture d'écran, utilisé par les utilisateurs de VoiceOver qui parcourent l'App Store. Remplis-le. Courte description de ce que montre la capture d'écran : « Écran d'accueil avec un aperçu des dépenses mensuelles » plutôt que « Capture d'écran 1 ».
C'est le gain d'accessibilité le plus important, car presque aucun développeur ne le fait. Les utilisateurs de VoiceOver qui parcourent l'App Store entendent actuellement « capture d'écran 1, capture d'écran 2 » pour la grande majorité des apps. Quelques phrases de description par panneau rendent ta fiche nettement plus utilisable pour ce public.
L'anti-modèle « petite police, typographie décorative »
Les polices décoratives (scripts manuscrits, polices d'affichage ultra-fines) échouent presque toujours simultanément aux tests d'accessibilité et de miniature. Les traits fins qui paraissent élégants en taille réelle deviennent illisibles à 300 px et incompréhensibles pour les utilisateurs malvoyants.
Utilise ces styles décoratifs pour un seul mot d'accroche par carrousel au maximum. Les légendes de corps et tout texte important nécessitent une police à épaisseur de trait régulière aux tailles qui t'importent — la plupart des sans-serifs grotesques modernes (Inter, SF Pro, Roboto) conviennent.
Position des légendes et zones sûres
Apple superpose parfois des éléments d'interface sur le carrousel de l'App Store (le bouton « Obtenir », la puce d'âge, le bouton « Ouvrir » après l'installation). Si ta légende se trouve dans ces zones, elle sera masquée. Maintiens les légendes dans la zone sûre : 60 px de chaque côté, 80 px depuis le haut, 200 px de dégagement en bas pour l'interface de l'App Store.
Ce qu'il faut tester avant de publier
- Passe chaque légende dans un vérificateur de contraste par rapport au fond de son panneau.
- Affiche tes captures d'écran à 300 px de large dans un simulateur de miniatures (ou réduis simplement dans Figma). Chaque légende doit rester lisible.
- Teste en niveaux de gris pour l'indépendance de la couleur.
- Remplis les balises d'accessibilité pour chaque panneau dans App Store Connect.
- Si tu as un utilisateur de VoiceOver dans ton groupe de test, demande-lui de parcourir ta fiche et de te faire un retour.
Pourquoi c'est important au-delà de l'accessibilité
Les règles de contraste et de taille que WCAG codifie sont dérivées de la recherche sur la vision humaine. Elles ne sont pas arbitraires — ce sont les seuils en dessous desquels un pourcentage significatif d'utilisateurs ne peut pas lire du texte confortablement. Concevoir pour AA signifie concevoir pour une population qui inclut les utilisateurs plus âgés, les utilisateurs sous des écrans en plein soleil, les utilisateurs avec de légers problèmes de vision non corrigés, plus tous ceux qui font défiler rapidement les résultats de recherche.
Les mêmes règles qui aident les utilisateurs malvoyants à lire ta capture d'écran aident aussi ceux qui font défiler l'App Store dans un train ensoleillé. Même problème ; même solution.