किसी फ़ॉर्म को कई तरीकों से भरा जा सकता है. ऐसा हो सकता है कि लोग आपके फ़ॉर्म का इस्तेमाल किसी भीड़-भाड़ वाली बस में, स्क्रीन रीडर के साथ या किसी पुराने लैपटॉप से करते हुए अपने स्मार्टफ़ोन पर करें. चलिए, देखते हैं कि कैसे पक्का किया जा सकता है कि आपका फ़ॉर्म अलग-अलग डिवाइसों पर और अलग-अलग कॉन्टेक्स्ट में काम करे.
पक्का करें कि आपका फ़ॉर्म, कीबोर्ड का इस्तेमाल करने वाले लोगों के लिए सही हो
आपके फ़ॉर्म को ऐक्सेस किया जा सकता है या नहीं, यह पक्का करने के लिए पहला तरीका यह है कि फ़ॉर्म को सिर्फ़ कीबोर्ड का इस्तेमाल करके भरें.
अपना फ़ॉर्म खोलें और tab बटन की मदद से नेविगेट करें.
क्या यह साफ़ है कि फ़िलहाल कौनसा फ़ॉर्म फ़ील्ड ऐक्टिव है?
फ़ोकस इंडिकेटर का इस्तेमाल करके, उपयोगकर्ताओं को फ़ॉर्म का कौनसा फ़ील्ड
चालू है, यह समझने में उनकी मदद की जा सकती है.
इसे आज़माएं.
इनपुट पर जाने के लिए, tab बटन का इस्तेमाल करें.
क्या इनपुट चालू होने पर आपको आउटलाइन दिखती है?
यह फ़ोकस इंडिकेटर है.
:focus सीएसएस स्यूडो-क्लास का इस्तेमाल करके, फ़ोकस इंडिकेटर जोड़े जा सकते हैं.
input:focus {
outline: 4px solid #222;
}
ऐक्सेस किए जा सकने वाले फ़ोकस इंडिकेटर डिज़ाइन करने के बारे में ज़्यादा जानें.
फ़ॉर्म पर नेविगेट करने में उपयोगकर्ताओं की मदद करें
उपयोगिता और सुलभता का एक और अच्छा टेस्ट यह पक्का करना है कि लॉजिकल टैब ऑर्डर विज़ुअल टैब के क्रम का पालन करता है. टैब ऑर्डर की जांच कैसे की जा सकती है? अपने फ़ॉर्म में पूरी तरह से टैब करें. क्या आपको कोई अस्पष्ट नेविगेशन जंप दिखा? पक्का करें कि डीओएम क्रम, विज़ुअल ऑर्डर से मेल खाता हो.
इस बारे में ज़्यादा जानें कि पेज पर विज़ुअल का क्रम, DOM के मुताबिक कैसे दिखता है.
टच डिवाइसों पर फ़ॉर्म पूरा करने में उपयोगकर्ताओं की मदद करें
बढ़िया! आपने यह पक्का कर लिया है कि आपका फ़ॉर्म, कीबोर्ड के साथ काम करता हो. चलिए देखते हैं कि इसे कैसे पक्का किया जा सकता है कि यह मोबाइल फ़ोन जैसे टच डिवाइसों पर भी काम करता है या नहीं.
अपने फ़ॉर्म को अपने टच डिवाइस पर खोलें,
सभी फ़ील्ड भरें, और फ़ॉर्म सबमिट करें.
क्या आपको फ़ॉर्म कंट्रोल चुनने के लिए, कई बार टैप करना पड़ा?
समस्या यह हो सकती है कि टैप करने वाले हिस्से बहुत छोटे हों.
पक्का करें कि
बटन का टैप टारगेट साइज़ कम से कम 48 पिक्सल है.
साथ ही, हर <input> और <select> इतने बड़े हों कि उन्हें टैप किया जा सके.
फ़ॉर्म कंट्रोल के बीच ज़रूरत के मुताबिक स्पेस जोड़कर, टच डिवाइसों पर फ़ॉर्म पर नेविगेट करने में उपयोगकर्ताओं की मदद की जा सकती है.
पक्का करें कि लोगों को ऑप्टिमाइज़ किया गया कीबोर्ड मिले
पिछले मॉड्यूल में, आपने type या inputmode एट्रिब्यूट का इस्तेमाल करके, किसी दूसरे ऑन-स्क्रीन कीबोर्ड को चालू करने का तरीका सीखा.
अपने फ़ोन पर
डेमो खोलें और टेलीफ़ोन नंबर फ़ील्ड पर टैप करें.
ध्यान दें कि नंबर, ऑन-स्क्रीन कीबोर्ड पर डिफ़ॉल्ट रूप से दिखते हैं.
साथ ही, टेलीफ़ोन नंबर के लिए जिन अन्य वर्णों की ज़रूरत पड़ सकती है वे भी दिखते हैं.
टेलीफ़ोन नंबर डालने के लिए ऑप्टिमाइज़ किए गए ऑन-स्क्रीन कीबोर्ड को पाने के लिए, type="tel" का इस्तेमाल करें.
इसे खुद आज़माकर देखें और फ़ोन नंबर भरने के लिए, फ़ोन का इस्तेमाल करें.
अगर आपको यह जानना है कि ऑन-स्क्रीन कीबोर्ड, दूसरे type के साथ कैसे काम करता है, तो डेमो में type="email" को आज़माएं.
पक्का करें कि फ़ॉर्म बटन छिपे नहीं हैं
मान लें कि आपने एक लंबा फ़ॉर्म भरा है और
अब आप उसे सबमिट करने के लिए तैयार हैं. लेकिन सबमिट करें बटन कहां है?
यह, स्क्रीन पर सबसे नीचे मौजूद ब्राउज़र टूलबार के पीछे हो सकता है.
बटन दिख रहे हैं या नहीं, यह पक्का करने के लिए env() सीएसएस फ़ंक्शन का इस्तेमाल करें.
बटन, डिवाइस के यूज़र इंटरफ़ेस से छिप न जाएं, यह पक्का करने का तरीका जानें.
पक्का करें कि आपका फ़ॉर्म अलग-अलग प्लैटफ़ॉर्म पर काम करता हो
अपने फ़ॉर्म की जांच, ज़्यादा से ज़्यादा डिवाइसों पर करने की कोशिश करें. क्या आपके पास पुराना लैपटॉप है? इस पर डिफ़ॉल्ट ब्राउज़र खोलें और अपने फ़ॉर्म की जांच करें. क्या आपके दोस्त के पास टैबलेट है? इसे उधार लें और वहां अपना फ़ॉर्म भी टेस्ट करें.
क्या एक ब्राउज़र में कुछ स्टाइल अलग-अलग दिखते हैं? बाद के मॉड्यूल में, यह पक्का किया जा सकता है कि आपकी स्टाइल सभी प्लैटफ़ॉर्म पर कैसे काम करे.
BrowserStack ओपन सोर्स प्रोजेक्ट के लिए मुफ़्त टेस्ट खाते देता है. साथ ही, Browserling अलग-अलग ब्राउज़र, डिवाइसों, और ऑपरेटिंग सिस्टम पर टेस्ट करने के लिए, मुफ़्त में आज़माने की सुविधा देता है.
लोगों को अलग-अलग कॉन्टेक्स्ट में फ़ॉर्म भरने में मदद करें
लोग अलग-अलग ब्राउज़र, डिवाइस, और ऑपरेटिंग सिस्टम का इस्तेमाल ही नहीं करते. लोग अलग-अलग कॉन्टेक्स्ट में भी आपके फ़ॉर्म का इस्तेमाल करते हैं. इसे आज़माकर देखें! क्या इस समय बाहर सूरज चमक रहा है? अपना फ़ोन लेकर बाहर निकलें. तेज़ रोशनी में अपने फ़ॉर्म का इस्तेमाल करके, यह पता लगाया जा सकता है कि कंट्रास्ट रेशियो का इस्तेमाल किया जा सकता है या नहीं.
रंग और कंट्रास्ट से जुड़ी सुलभता के बारे में ज़्यादा जानें.
पक्का करें कि आपका फ़ॉर्म, कनेक्टिविटी खराब होने पर भी काम करता हो
मान लें कि आप ट्रेन में कहीं यात्रा करते हैं. जब आपने फ़ोन पर कोई वेब पेज खोला हो. आप सोच रहे हैं कि किसी वेबसाइट को लोड होने में इतना समय लग सकता है ना.
WebPageTest या DevTools का इस्तेमाल करके, धीमे कनेक्शन और अलग-अलग नेटवर्क टाइप को सिम्युलेट किया जा सकता है.
कम बैंडविड्थ और ज़्यादा इंतज़ार के समय की जांच के बारे में ज़्यादा जानें.
लोगों को कभी भी, कहीं भी अपना फ़ॉर्म इस्तेमाल करने में मदद करें
मान लें कि आप एक अपॉइंटमेंट पर चल रहे हैं. अचानक आपके फ़ोन की घंटी बजती है, आप कॉल का जवाब देते हैं, और उसी समय आपकी बीमा कंपनी से एक सूचना मिलती है, जिसमें शुरू किया गया आवेदन फ़ॉर्म भरने के लिए कहा जाता है. फ़ॉर्म खोलते समय, आपने उसे भरने की कोशिश करते हुए, चलते समय और बात करते हुए भी फ़ॉर्म खोला होता है.
याद रखें कि लोग आपके फ़ॉर्म का इस्तेमाल कई अलग-अलग कॉन्टेक्स्ट में करेंगे. तनाव की स्थिति में होने पर, कभी भी दूसरे काम करते हुए. लोगों की मदद करने के लिए, यह पक्का करें कि आपका फ़ॉर्म आसानी से इस्तेमाल किया जा सके.
फ़ॉर्म भरने के लिए, एक समयसीमा तय करें. कोशिश करें कि आप किसी ऐसी जगह पर अपने फ़ॉर्म की जांच कर सकें जहां फ़ॉर्म न दिखाया जा सके.
जांच के नतीजे शेयर करना न भूलें
सभी जांचों का रिकॉर्ड रखें और अपनी टीम के साथ नतीजे शेयर करें. इससे ऐक्शन आइटम को प्राथमिकता देने में मदद मिलेगी, ताकि आपकी टीम में सभी लोगों को अहम टास्क की जानकारी हो.
जांच के नतीजे शेयर करने के बारे में ज़्यादा जानें.
जांचें कि आपको कितना समझ आया
क्रॉस-प्लैटफ़ॉर्म टेस्टिंग के बारे में अपनी जानकारी को परखें
क्या फ़ोकस इंंडिकेटर को सिर्फ़ कीबोर्ड का इस्तेमाल करने वालों को दिखाया जा सकता है?
:focus-visible का इस्तेमाल करके.:focus-detected का इस्तेमाल करके.:focus-shown का इस्तेमाल करके.रिसॉर्स
- WebPageTest: वेबसाइट की परफ़ॉर्मेंस और ऑप्टिमाइज़ेशन की जांच
- कम बैंडविड्थ और ज़्यादा इंतज़ार के समय की वजह से जांच
- जांच के नतीजे शेयर करना