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