Landing page accessibility की checklist

accessible landing page वो है जिसे कोई इंसान बिना mouse और बिना एकदम साफ़ नज़र के भी पढ़ सके, Tab से चला सके और भरकर भेज सके। यह landing page accessibility checklist उन चार जाँचों से शुरू होती है जो ज़्यादातर गड़बड़ियाँ पकड़ लेती हैं: text का contrast कम से कम 4.5:1, interactive controls कम से कम 24 गुणा 24 CSS pixel, हर control पर दिखने वाला focus state, और हर form field पर असली label. चारों को design के समय ठीक करना सस्ता है और बाद में जोड़ना महंगा।

ज़्यादातर landing pages contrast पर ही फेल होते हैं

WCAG level AA पर आम text के लिए उसके background के मुक़ाबले कम से कम 4.5:1 का contrast माँगता है। बड़े text के लिए 3:1 चलता है। बड़ा यानी कम से कम 18 point, या 14 point bold, जो CSS में करीब 24px या 18.5px bold बैठता है। ये values गोल नहीं की जातीं, इसलिए 4.499:1 भी फेल है। सफ़ेद पर हल्के grey वाली body copy सबसे आम वजह है। उसके बाद आता है photo के ऊपर सफ़ेद text, जहाँ image के ऊपरी हिस्से में contrast टिका रहता है और नीचे जाकर बिखर जाता है।

buttons और icons को भी contrast चाहिए

बात सिर्फ़ text की नहीं है। WCAG level AA पर user interface components और मतलब रखने वाली graphical चीज़ों के लिए भी, उनके बगल के रंगों के मुक़ाबले, 3:1 माँगता है। इसमें input की border, button की outline, checkbox, rating का star, और हर वो icon आता है जो अकेले कोई मतलब बताता है। सफ़ेद card पर हल्के grey वाली input outline landing page की सबसे आम चूक है। और यही वो चीज़ है जो लोगों को convert होने से पहले दिखनी चाहिए।

हर tap target को 24 गुणा 24 pixel दीजिए

WCAG 2.2 ने level AA पर target size का नियम जोड़ा। interactive targets कम से कम 24 गुणा 24 CSS pixel के होने चाहिए। इससे छोटे targets तभी चलते हैं जब वो इतनी दूर-दूर हों कि हर एक के बीच में रखा 24 pixel का गोला किसी दूसरे target से न टकराए। वाक्य के बीच में आए links इस नियम से बाहर हैं। असल में यह नियम icon वाले buttons, modal के close button, footer के social icons, और page के नीचे legal वाली line में ठुँसे हुए links पर लगता है।

keyboard से चलाकर देखना पाँच मिनट की जाँच है

mouse छोड़िए और page के ऊपर से Tab दबाना शुरू कीजिए। हर link, button, input और menu control को उसी क्रम में focus मिलना चाहिए जिस क्रम में वो दिखता है, और आपको हर वक़्त पता होना चाहिए कि आप कहाँ हैं। यहाँ सबसे ज़्यादा custom components फेल होते हैं। div से बना slider आपको वहीं फँसा लेता है। video वाला modal focus पकड़कर बैठ जाता है। sticky header उसी element को ढँक देता है जिस पर आप अभी-अभी पहुँचे थे। अगर keyboard से अपने main button तक पहुँचकर उसे दबा नहीं सकते, तो page टूटा हुआ है।

हर form field को असली label दीजिए

जैसे ही कोई टाइप करता है, placeholder ग़ायब हो जाता है, इसलिए जिसका ध्यान भटक जाए उसके पास मिलाने को कुछ बचता ही नहीं। screen readers placeholder को हर बार एक जैसा नहीं पढ़ते। हर field के ऊपर दिखने वाला label लगाइए। example format दिखाने के लिए placeholder रखना हो तो रखिए, और label को input से ठीक से जोड़िए, ताकि label पर tap करने से field पर focus आ जाए। error message शब्दों में बताए कि ग़लती क्या हुई। अकेला रंग यह नहीं बता सकता कि कोई field ग़लत भरी गई है।

2025 में आए EU के नियम

European Accessibility Act 28 जून 2025 से लागू हुआ। यह EU में consumers को बेची जाने वाली services पर लगता है, जिसमें ecommerce, banking और transport की booking भी आती है। यह EN 301 549 को मानता है, जो WCAG level AA पर बना है। अगर आप यूरोप के consumers को बेचते हैं, तो accessibility अच्छी आदत से आगे बढ़कर कानूनी ज़रूरत बन चुकी है। इसे लागू करने का काम किसी एक संस्था के बजाय सदस्य देश करते हैं, जिससे ख़तरे का अंदाज़ा लगाना और मुश्किल हो जाता है, और वो ख़तरा छोटा भी नहीं होता।

यह landing page accessibility checklist बीस मिनट में चलाइए

शुरुआत किसी automated checker से कीजिए, फिर उसका score भूल जाइए, क्योंकि automated tools असली दिक्कतों का एक हिस्सा ही पकड़ते हैं। पूरे page पर Tab चलाइए। हर text और button के रंग को contrast checker में जाँचिए। browser को 200% zoom कीजिए और देखिए कि कुछ भी एक-दूसरे पर चढ़ या कट तो नहीं रहा। अपने operating system का screen reader चालू कीजिए और hero और form को सुनिए। contrast की values एक-एक page पर ठीक करने के बजाय अपने design tokens में ठीक कीजिए, वरना अगले page पर वही चूक दोबारा चली जाएगी।