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

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

मैन्युअल रूप से टेस्ट करने का तरीका

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

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

कैसे ठीक करें

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

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

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

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

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

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

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

सुलभता समीक्षा करने का तरीका लेख में जाकर ज़्यादा जानें.

संसाधन