फ़ोकस होने तक दृश्य रूप से छिपा हुआ

Skip link आवश्यक हैं, फिर भी कई टीमों को चिंता रहती है कि वे लेआउट को अव्यवस्थित कर देंगे। सामान्य समाधान है: इसे दृष्टि से छिपाएँ, लेकिन कीबोर्ड उपयोगकर्ताओं के लिए तैयार रखें।

display none या visibility hidden का उपयोग न करें। ये लिंक को अभिगम्यता ट्री से हटा देते हैं, इसलिए कोई भी उस पर फ़ोकस नहीं कर सकता।

लक्ष्य ऐसी दृष्टि से छिपी स्थिति बनाना है: स्क्रीन पर अदृश्य, लेकिन कीबोर्ड और स्क्रीन रीडर के लिए पूरी तरह मौजूद।

एक सामान्य तरकीब लिंक को एक पिक्सेल तक छोटा करके क्लिप कर देती है। वह DOM और फ़ोकस क्रम में बना रहता है, बस दिखाई नहीं देता।

इसका मुख्य बिंदु फ़ोकस की स्थिति है। जब Tab लिंक पर पहुँचता है, तो आपका CSS उसका आकार बहाल कर उसे फिर से दृश्य क्षेत्र में ले आता है।

फ़ोकस का उपयोग करें, hover का नहीं। कीबोर्ड उपयोगकर्ता hover नहीं कर सकता, इसलिए केवल hover पर दिखने वाला लिंक उसके लिए हमेशा अदृश्य रहेगा।

दिखाई देने पर इसे ठोस पृष्ठभूमि और padding दें। यह स्पष्ट बटन जैसा दिखना चाहिए, न कि ऐसा हल्का पाठ जिसे उपयोगकर्ता नज़रअंदाज़ कर दे।

दिखाए गए लिंक की फ़ोकस रूपरेखा न हटाएँ। उपयोगकर्ताओं को ठीक-ठीक दिखाई देना चाहिए कि फ़ोकस कहाँ पहुँचा है।

अक्सर छिपा हुआ लिंक नकारात्मक top मान के साथ स्क्रीन से बाहर रहता है और फ़ोकस होने पर top zero पर आ जाता है। यह स्लाइड दिखने की प्रक्रिया को जानबूझकर किया गया बदलाव महसूस कराती है।

दृष्टि से छिपाने का यह पैटर्न इतना उपयोगी है कि अधिकांश टीमें इसे किसी भी sr-only सामग्री के लिए साझा उपयोगिता क्लास के रूप में रखती हैं।

नया पृष्ठ लोड होने के बाद Tab दबाएँ। Skip link तुरंत दिखाई देना चाहिए। Tab से आगे बढ़ने पर उसे फिर से गायब हो जाना चाहिए। ✅

Skip link को क्लिपिंग से छिपाएँ, कभी display none न करें और स्पष्ट रूपरेखा के साथ फ़ोकस होने पर दिखाएँ। आवश्यकता होने तक अदृश्य रखें। 🎯