सही सिमैंटिक एचटीएमएल एलिमेंट का इस्तेमाल करके, हो सकता है कि आप कीबोर्ड ऐक्सेस करने की अपनी ज़्यादातर या सभी
ज़रूरतों को पूरा कर पाएं. इसका मतलब है कि 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 का इस्तेमाल करके, कस्टम इंटरैक्टिव कंट्रोल में कीबोर्ड की सुविधा जोड़ने का तरीका जानने के लिए आगे पढ़ें.