Accessible App Store स्क्रीनशॉट: contrast, text size, alt text
App Store स्क्रीनशॉट को screen reader से उसी तरह browse नहीं किया जाता जैसे web page को — Apple screenshot alt text को user को सीधे expose नहीं करता। लेकिन visual accessibility नियम (contrast, text size, color independence) निश्चित रूप से लागू होते हैं, और ये वही नियम हैं जो thumbnail-size readability को govern करते हैं। दोनों के लिए काम करना उचित है क्योंकि यह एक ही काम है।
Contrast: WCAG AA को baseline के रूप में
WCAG AA contrast ratios:
- Normal text: background के विरुद्ध minimum 4.5:1।
- Large text (24pt+ regular या 18pt+ bold): minimum 3:1।
- Graphical elements / UI controls: 3:1।
हर कैप्शन को उस panel background के विरुद्ध contrast checker से जाँचें जिस पर वह बैठा है — कई मुफ्त tools उपलब्ध हैं। अगर आपका background gradient है, तो जहाँ कैप्शन बैठता है वहाँ gradient के सबसे dark और सबसे light points पर जाँचें।
सामान्य गलती: light-orange-to-dark-orange gradient पर white text। जहाँ कैप्शन light orange पर बैठता है, contrast 4.5:1 से नीचे गिर जाता है और thumbnail size पर text गायब हो जाता है।
Thumbnail पर text size
App Store स्क्रीनशॉट कई sizes पर render होते हैं:
- Product page पर full size (~1290 px चौड़ा)।
- Search-result प्रीव्यू (~600 px चौड़ा)।
- Search-result thumbnail (~300 px चौड़ा)।
अगर design file में 1290 × 2796 पर आपका कैप्शन 60px है, तो 300px search thumbnail में यह ~14px पर render होता है। 14px legibility के लिए recommended minimum size से नीचे है। समाधान: कैप्शन को 80-100px पर design करें ताकि thumbnails में 18-22px पर render हों। खास तौर पर panels 1-3 के लिए जो search में दिखते हैं।
Color independence
जानकारी देने के लिए सिर्फ रंग पर निर्भर न रहें। सबसे आम उल्लंघन: caption text ऐसे रंग में जो background से केवल hue से अलग दिखता है (हरे background पर लाल text, उदाहरण के लिए)। Red-green color blindness वाला कोई भी व्यक्ति इसे धुंधला देखता है।
टेस्ट: अगर आप अपने स्क्रीनशॉट को grayscale करें, तो क्या आप हर कैप्शन पढ़ सकते हैं? अगर हाँ, तो आप color-independent हैं। अगर नहीं, तो hue difference नहीं बल्कि luminance (lightness) का फर्क बढ़ाएं।
App Store Connect में Alt text
App Store Connect screenshot alt text उसी तरह expose नहीं करता जैसे web page alt attributes expose करता है। लेकिन App Store Connect में प्रति स्क्रीनशॉट एक "accessibility tags" field होता है जो App Store browse करने वाले VoiceOver users के लिए उपयोग किया जाता है। इसे भरें। स्क्रीनशॉट में क्या है इसका संक्षिप्त विवरण: "Screenshot 1" की बजाय "मासिक खर्च overview के साथ Home screen"।
यह सबसे बड़ी accessibility जीत है क्योंकि लगभग कोई developer यह नहीं करता। App Store browse करने वाले VoiceOver users को अधिकांश apps के लिए अभी "screenshot 1, screenshot 2" सुनाई देता है। प्रति panel कुछ वाक्यों का विवरण आपकी listing को उस audience के लिए काफी अधिक उपयोगी बनाता है।
"छोटा font, decorative type" anti-pattern
Decorative fonts (handwriting scripts, ultra-thin display fonts) लगभग हमेशा एक साथ accessibility और thumbnail tests में fail होते हैं। वे पतले strokes जो full size पर elegant दिखते हैं, 300px पर अपठनीय हो जाते हैं और low vision वाले users के लिए unreadable।
इन decorative styles को पूरे कैरोसेल में अधिकतम एक accent word के लिए उपयोग करें। Body कैप्शन और कोई भी ज़रूरी text के लिए ऐसा font चाहिए जिसका stroke weight उन sizes पर consistent हो जिनकी आपको परवाह है — अधिकांश modern grotesque sans-serifs (Inter, SF Pro, Roboto) काम करते हैं।
Caption position और safe areas
Apple कभी-कभी App Store कैरोसेल के ऊपर UI overlay करता है ("Get" button, age rating chip, install के बाद "Open" button)। अगर आपका कैप्शन उन areas में है, तो वह छुप जाता है। कैप्शन को safe zone में रखें: हर तरफ से 60px, ऊपर से 80px, App Store UI के लिए नीचे 200px clear।
Ship करने से पहले क्या टेस्ट करें
- हर कैप्शन को उसके panel background के विरुद्ध contrast checker से चलाएं।
- अपने स्क्रीनशॉट को thumbnail simulator में 300px चौड़ाई पर देखें (या Figma में resize करें)। हर कैप्शन अभी भी readable होना चाहिए।
- Color independence के लिए grayscale-test करें।
- App Store Connect में हर panel के लिए accessibility tags लिखें।
- अगर आपके testing pool में VoiceOver user है, तो उनसे आपकी listing browse करने और रिपोर्ट करने को कहें।
Accessibility से परे यह क्यों मायने रखता है
WCAG जो contrast और size नियम codify करता है वे human vision research से derived हैं। ये arbitrary नहीं हैं — ये वे thresholds हैं जिनके नीचे users का एक meaningful प्रतिशत text आराम से नहीं पढ़ सकता। AA के लिए design करने का मतलब है उस आबादी के लिए design करना जिसमें वृद्ध users, तेज़ outdoor screens पर users, mild uncorrected vision issues वाले users, और तेज़ी से search scroll करने वाले सभी लोग शामिल हैं।
वही नियम जो low vision वाले users को आपका स्क्रीनशॉट पढ़ने में मदद करते हैं, वही धूप वाली train में App Store scroll करने वाले users की भी मदद करते हैं। एक ही समस्या; एक ही समाधान।