सही सिमैंटिक एचटीएमएल एलिमेंट का इस्तेमाल करके, हो सकता है कि आप कीबोर्ड से जुड़ी अपनी ज़्यादातर या सभी ज़रूरतों को पूरा कर पाएं. इसका मतलब है कि tabindex के साथ कम समय बिताना और
ज़्यादा खुश उपयोगकर्ता!
कीबोर्ड मुफ़्त सहायता (और बेहतर मोबाइल अनुभव)
इसमें ऐसे कई पहले से मौजूद इंटरैक्टिव एलिमेंट हैं जो सही सिमेंटिक्स और कीबोर्ड की सुविधा देते हैं. सबसे ज़्यादा डेवलपर, इन ऐप्लिकेशन का इस्तेमाल करते हैं:
इसके अलावा, कभी-कभी contenteditable एट्रिब्यूट वाले एलिमेंट का इस्तेमाल, फ़्रीफ़ॉर्म टेक्स्ट एंट्री के लिए किया जाता है.
इन एलिमेंट में पहले से मौजूद कीबोर्ड की सुविधा को नज़रअंदाज़ किया जा सकता है.
एक्सप्लोर करने के लिए, नीचे उदाहरण के तौर पर कुछ एलिमेंट दिए गए हैं. उन्हें चलाने के लिए,
अपने माउस का इस्तेमाल करने के बजाय, कीबोर्ड का इस्तेमाल करें. एक कंट्रोल से दूसरे कंट्रोल पर जाने के लिए, TAB या SHIFT +
TAB का इस्तेमाल किया जा सकता है. साथ ही, उनकी वैल्यू में बदलाव करने के लिए, ऐरो बटन और ENTER और SPACE जैसी कुंजियों का इस्तेमाल किया जा सकता है.
अगर आपके पास कोई फ़ोन है, तो कई बार मोबाइल पर इन बिल्ट-इन एलिमेंट के यूनीक इंटरैक्शन होते हैं. इन मोबाइल इंटरैक्शन को फिर से बनाने की कोशिश करना बहुत मुश्किल काम है! जब भी मुमकिन हो, बिल्ट-इन एलिमेंट से जुड़े रहने की यह एक और अच्छी वजह है.
div के बजाय, button का इस्तेमाल करें
सुलभता के लिए आम तौर पर इस्तेमाल होने वाले एंटी-पैटर्न में div या span जैसे नॉन-इंटरैक्टिव एलिमेंट को बटन के तौर पर इस्तेमाल किया जाता है. इसके लिए, उस एलिमेंट में एक क्लिक हैंडलर जोड़ा जाता है.
हालांकि, ऐक्सेस बटन को ऐक्सेस करने के लिए ज़रूरी है कि:
- कीबोर्ड की मदद से फ़ोकस करने लायक होना
- सहायता बंद की जा रही है
- कोई कार्रवाई करने के लिए,
ENTERयाSPACEकुंजियों के साथ काम करता है - स्क्रीन रीडर की मदद से, आवाज़ सही तरीके से सुनाई दे
div बटन पर इनमें से कोई चीज़ नहीं होती. इसका मतलब है कि आपको एक और कोड लिखना होगा. इससे यह समझने में मदद मिलेगी कि button एलिमेंट से आपको क्या मुफ़्त में मिलता है!
उदाहरण के लिए, button एलिमेंट में एक बढ़िया ट्रिक होती है, जिसे *सिंथेटिक क्लिक ऐक्टिवेशन* कहते हैं. अगर button में "क्लिक" हैंडलर जोड़ा जाता है, तो यह उपयोगकर्ता के ENTER या SPACE दबाने पर चलेगा. div बटन में यह सुविधा मौजूद नहीं है. इसलिए, आपको keydown इवेंट सुनने के लिए अतिरिक्त कोड लिखना होगा. यह जांच लें कि कीकोड ENTER या SPACE है या नहीं. इसके बाद, क्लिक हैंडलर चलाएं. आउच! | ओह
यह बहुत ज़्यादा काम है!
इस उदाहरण में अंतर की तुलना करें. कंट्रोल करने के लिए TAB और ENTER और SPACE का इस्तेमाल करके, उन पर क्लिक करें.
अगर आपकी मौजूदा साइट या ऐप्लिकेशन में div बटन हैं, तो उन्हें button एलिमेंट की जगह रखें. button को आसानी से स्टाइल किया जा सकता है. साथ ही, इसमें कई सुलभता सुविधाएं मौजूद हैं!
लिंक बनाम बटन
एक और आम एंटी-पैटर्न यह है कि लिंक को बटन के तौर पर इस्तेमाल किया जाए. इसके लिए, उस लिंक में JavaScript को शामिल किया जाता है.
<a href="#" onclick="// perform some action">
दोनों बटन और लिंक, किसी तरह से सिंथेटिक क्लिक ऐक्टिवेशन के साथ काम करते हैं. तो आपको कौनसा चुनना चाहिए?
- अगर एलिमेंट पर क्लिक करने से, पेज पर कोई कार्रवाई होगी, तो
<button>का इस्तेमाल करें. - अगर एलिमेंट पर क्लिक करने से, उपयोगकर्ता नए पेज पर जाएं, तो
<a>का इस्तेमाल करें. इसमें एक पेज वाले वेब ऐप्लिकेशन शामिल हैं, जो नया कॉन्टेंट लोड करते हैं और इतिहास एपीआई का इस्तेमाल करके यूआरएल को अपडेट करते हैं.
इसकी वजह यह है कि स्क्रीन रीडर, बटन और लिंक को अलग-अलग तरीके से बोलते हैं. सही एलिमेंट का इस्तेमाल करने से, स्क्रीन रीडर का इस्तेमाल करने वालों को यह जानने में मदद मिलती है कि किस तरह के नतीजे की उम्मीद की जा सकती है.
TODO: DevSite - आकलन के बारे में सोचें और उसकी जांच करें
शैलीकृत करना
पहले से मौजूद कुछ एलिमेंट को स्टाइल करना मुश्किल हो सकता है. खास तौर पर, <input> में.
समझदारी से इस्तेमाल किए जाने वाले सीएसएस की मदद से, इनमें से कुछ सीमाओं से बचा जा सकता है. WTFForms प्रोजेक्ट का नाम मज़ेदार है. इसमें एक स्टाइलशीट का उदाहरण है. इसमें, पहले से मौजूद मुश्किल एलिमेंट को स्टाइल देने के लिए कई तकनीकें दिखाई गई हैं.
अगले चरण
बिल्ट-इन एचटीएमएल एलिमेंट का इस्तेमाल करने से, आपकी साइट को इस्तेमाल करना काफ़ी आसान हो सकता है. साथ ही, आपका वर्कलोड कम हो जाता है. अपनी साइट पर टैब करके देखें और ऐसे कंट्रोल ढूंढें जिनमें कीबोर्ड की सुविधा नहीं है. अगर हो सके, तो स्टैंडर्ड एचटीएमएल के विकल्पों में इनका इस्तेमाल करें.
कभी-कभी आपको ऐसा एलिमेंट मिल सकता है जिसका एचटीएमएल में कोई मिलता-जुलता एलिमेंट न हो.
कोई बात नहीं! tabindex का इस्तेमाल करके कस्टम इंटरैक्टिव कंट्रोल में कीबोर्ड की सुविधा जोड़ने का तरीका जानने के लिए आगे पढ़ें.