सही सिमेंटिक एचटीएमएल एलिमेंट का इस्तेमाल करके, कीबोर्ड ऐक्सेस करने से जुड़ी ज़्यादातर या सभी ज़रूरतों को पूरा किया जा सकता है. इसका मतलब है कि 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>का इस्तेमाल करें. इसमें ऐसे सिंगल पेज वेब ऐप्लिकेशन शामिल हैं जो नया कॉन्टेंट लोड करते हैं और History API का इस्तेमाल करके यूआरएल को अपडेट करते हैं.
इसकी वजह यह है कि स्क्रीन रीडर, बटन और लिंक को अलग-अलग तरीके से पढ़ते हैं. सही एलिमेंट का इस्तेमाल करने से, स्क्रीन रीडर इस्तेमाल करने वाले लोगों को यह पता चलता है कि उन्हें क्या दिखेगा.
TODO: DevSite - Think and Check assessment
शैलीकृत करना
पहले से मौजूद कुछ एलिमेंट, खास तौर पर <input> को स्टाइल करना मुश्किल हो सकता है.
थोड़ी सी चतुराई से सीएसएस का इस्तेमाल करके, इनमें से कुछ सीमाओं को कम किया जा सकता है. WTFForms प्रोजेक्ट (इसका नाम बहुत मज़ेदार है) में एक उदाहरण वाली स्टाइलशीट है. इसमें, पहले से मौजूद कुछ मुश्किल एलिमेंट को स्टाइल करने के लिए कई तकनीकें दिखाई गई हैं.
अगले चरण
पहले से मौजूद एचटीएमएल एलिमेंट का इस्तेमाल करने से, आपकी साइट को ऐक्सेस करना काफ़ी आसान हो जाता है. साथ ही, आपका काम भी कम हो जाता है. अपनी साइट पर टैब करके, ऐसे कंट्रोल ढूंढें जिन पर कीबोर्ड काम नहीं करता. अगर हो सके, तो उन्हें स्टैंडर्ड एचटीएमएल विकल्पों के लिए बदलें.
कभी-कभी आपको ऐसा एलिमेंट मिल सकता है जिसका एचटीएमएल में कोई दूसरा एलिमेंट न हो.
कोई बात नहीं! tabindex का इस्तेमाल करके, कस्टम इंटरैक्टिव कंट्रोल में कीबोर्ड की सुविधा जोड़ने का तरीका जानने के लिए, आगे पढ़ें.