इंटरैक्टिव कंट्रोल, कीबोर्ड पर फ़ोकस करने लायक होते हैं

पब्लिश होने की तारीख: 2 मई, 2019

मैन्युअल तरीके से जांच करें कि सभी कस्टम कंट्रोल, कीबोर्ड से फ़ोकस किए जा सकते हैं या नहीं. साथ ही, यह भी देखें कि वे फ़ोकस इंडिकेटर दिखाते हैं या नहीं. एलिमेंट को फ़ोकस करने का क्रम, DOM के क्रम के मुताबिक होना चाहिए. अगर आपको यह नहीं पता कि किन एलिमेंट पर फ़ोकस करना चाहिए, तो web.dev पर सुलभता के बारे में जानें कोर्स में फ़ोकस मॉड्यूल देखें.

मैन्युअल तरीके से जांच करने का तरीका

यह जांच करने के लिए कि कस्टम कंट्रोल पर फ़ोकस किया जा सकता है और फ़ोकस इंडिकेटर दिखता है, अपनी साइट पर टैब करके देखें. एक कंट्रोल से दूसरे कंट्रोल पर जाने के लिए, TAB (या SHIFT + TAB) का इस्तेमाल करें. साथ ही, उनकी वैल्यू में बदलाव करने के लिए, ऐरो बटन, ENTER, और SPACE का इस्तेमाल करें (कीबोर्ड से ऐक्सेस करने के बारे में बुनियादी जानकारी भी देखें):

क्या आपको पेज पर मौजूद सभी इंटरैक्टिव कंट्रोल दिख रहे हैं? क्या हर इंटरैक्टिव कंट्रोल पर फ़ोकस इंडिकेटर मौजूद है?

कैसे ठीक करें

अगर किसी पेज पर मौजूद सभी एलिमेंट को टैब नहीं किया जा सकता, तो आपको उन कंट्रोल को फ़ोकस करने की सुविधा को बेहतर बनाने के लिए, tabindex का इस्तेमाल करना पड़ सकता है.

कस्टम कंट्रोल को फ़ोकस करने लायक बनाने के लिए, कस्टम कंट्रोल एलिमेंट को tabindex="0" का इस्तेमाल करके, नैचुरल टैब ऑर्डर में डालें (tabindex का इस्तेमाल करके कंट्रोल को फ़ोकस करना भी देखें). उदाहरण के लिए:

<div tabindex="0">Focus me with the TAB key</div>

आपको कस्टम कंट्रोल एलिमेंट में सही ARIA भूमिकाएं भी जोड़नी पड़ सकती हैं. कस्टम कंट्रोल में ARIA रोल होते हैं लेख पढ़ें.

अगर आपको फ़ोकस इंडिकेटर नहीं दिख रहा है, तो फ़ोकस इंडिकेटर को हमेशा दिखाने के लिए, :focus का इस्तेमाल करें. टैब करने के लिए माउस या कीबोर्ड का इस्तेमाल करने पर भी, बटन का फ़ोकस इंडिकेटर हमेशा एक जैसा दिखता है. स्टाइल फ़ोकस भी देखें.

यह ज़रूरी क्यों है

जो लोग माउस का इस्तेमाल नहीं कर सकते या नहीं करना चाहते उनके लिए, कीबोर्ड नेविगेशन ही स्क्रीन पर मौजूद हर चीज़ तक पहुंचने का मुख्य तरीका है. कीबोर्ड से बेहतर तरीके से नेविगेट करने के लिए, टैब का क्रम सही होना चाहिए और फ़ोकस स्टाइल को आसानी से पहचाना जा सकना चाहिए. अगर कीबोर्ड का इस्तेमाल करने वाला कोई व्यक्ति, फ़ोकस किए गए एलिमेंट को नहीं देख पाता या उसके बारे में नहीं जान पाता, तो उसके पास पेज से इंटरैक्ट करने का कोई तरीका नहीं होता.

Learn Accessibility में सुलभता के बारे में ज़्यादा जानें.

संसाधन