उपलब्धता के लिए हिचहाइकिंग: नेविगेशन और अनुभाग छोड़ने के लिए लिंक

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

स्किपिंग नेविगेशन के लिए लिंक (इसके बाद के स्काइपलिंक ) हर स्वाभिमानी सुलभ वेबसाइट और वेब एप्लिकेशन के अनसुने नायक हैं। असंगत, लेकिन बहुत उपयोगी यूएक्स सहायकों और गैर-मान्यता प्राप्त यूआई जीनियस, एक अवधारणा के रूप में स्काइपलिंक नए नहीं हैं, वे दशकों से विकलांग समुदायों द्वारा आभारी हैं। यदि आपने अभिव्यक्ति "छोटी चीजें सब कुछ तय करती हैं" सुना है, तो यह अभिव्यक्ति सिर्फ स्किपपिंक्स के बारे में है।

आम धारणा के विपरीत, कंप्यूटर पहले एक माउस के साथ संयोजन में उपयोग नहीं किए गए थे। कई सालों के लिए, माउस सिर्फ एक माउस था, एक प्यारे कृंतक, कोई फर्क नहीं पड़ता कि वह कहाँ रहता था - आपके अटारी में, वॉल्ट डिज़नी की कल्पना में या डबलिन की गलियों में। अधिकांश उपयोगकर्ताओं के लिए कीबोर्ड एक प्राथमिकता थी, जो मुझे कीबोर्ड के साथ नेविगेशन के महत्व के बारे में सोचने के लिए प्रेरित करता है।

कीबोर्ड नेविगेशन को लागू करना और उपयोग करना आसान है। मुख्य चाबियां हैं: टैब, ऊपर-नीचे-दाएं तीर, अंतरिक्ष और दर्ज करें। बस एक पेज लिखा है, जो आपको सही तरीके से HTML में लिखा है, आपको एक वेब एप्लिकेशन में पूरी तरह से कीबोर्ड नेविगेशन के लिए ले जाना चाहिए, और यह बहुत अच्छा है। ऐसा नहीं है कि उत्साहजनक तथ्य यह है कि आधुनिक वेब अनुप्रयोग सरल एचटीएमएल की तुलना में बहुत अधिक हैं, और उनके पास जटिल नेविगेशन है। इस तरह के डिजाइन सिस्टम कीबोर्ड उपयोगकर्ताओं के लिए एक गंभीर और कष्टप्रद समस्या पैदा करते हैं: तत्वों और सामग्री को दोहराते हुए।

इसका मुख्य कारण एप्लिकेशन में नेविगेशन है। जब भी कोई उपयोगकर्ता किसी नए पृष्ठ पर जाता है, तो वही नेविगेशन बार-बार दिखाई देता है, और उपयोगकर्ता को उसकी रुचि की सामग्री खोजने के लिए पृष्ठ को स्क्रॉल करना चाहिए। उदाहरण के लिए, बीबीसी की वेबसाइट पर, मुख्य नेविगेशन में 28 से अधिक बिंदु हैं:

आप तुरंत देखते हैं कि यह एक प्रमुख समाचार साइट है, क्योंकि इसमें 28 मेनू आइटम हैं!

अब कल्पना कीजिए कि पार्किंसंस रोग से पीड़ित एक बूढ़ी महिला लगभग एक समाचार लेख में जाने पर 28 तत्वों में से प्रत्येक के माध्यम से स्विच करने के लिए एक कीबोर्ड (माउस के बारे में कोई सवाल नहीं है) का उपयोग करना जानता है। यह उसे नैतिक और शारीरिक रूप से समाप्त कर देता है! लेकिन हमने गरीब दादी को इस दर्द से नहीं गुजरने दिया? वह किस तरह लड़ती है, इसका नजारा दिल दहला देने वाला होगा। एक अच्छा यूएक्स पेशेवर और डेवलपर यह जानता है, इसलिए वह उद्योग को क्या कहता है, इसे लागू करता है। बीबीसी ने ऐसा ही किया। जैसे न्यूयॉर्क टाइम्स और एनबीसी। अपनी उंगलियों को पार करें ताकि आरटीई सूट का पालन करे ...

हम क्या याद कर रहे हैं?

स्किप्पिंक्स का एक बड़ा पहलू यह है कि वे उन सभी के जीवन को बढ़ाते हैं जो अक्सर कीबोर्ड या ब्रेल डिस्प्ले का उपयोग करते हैं। उदाहरण के लिए, वेब प्रारूप में अमेरिकी ध्वज ( एटिलवैगो । Github.io/fun-with-flags/usa पर ) लें। मैं जल्दी से इस पृष्ठ के सबसे प्रासंगिक अनुभाग पर जा सकता हूं, चाहे मैं कीबोर्ड या ब्रेल डिस्प्ले का उपयोग करूं। कल्पना कीजिए कि आपको हर बार 50 ध्वज सितारों से गुजरने की आवश्यकता है! कोई फर्क नहीं पड़ता कि आप अंकल सैम को कैसे प्यार करते हैं, आप पागल होंगे।

सरल शब्दों में, स्काइपलिंक छिपे हुए और सरल हैं, लेकिन प्रभावी हैं, उनकी मदद से लोगों को सर्वश्रेष्ठ यूआई में जाने की संभावना है।

कोडिंग के संदर्भ में, उनकी कठिनाई का स्तर क्रिसमस के लिए बारह पब के बाद जूते बांधने और अंधेरे में बाथरूम खोजने के बीच कहीं है। यह वास्तव में एक सरल टेम्पलेट है। यदि आपने इसे कई बार लागू किया है, तो भविष्य में आपके गलत होने की संभावना नहीं है। पहली बार मैंने उन्हें UI में देखा था, मुझे जावास्क्रिप्ट स्ट्रिंग के दर्जनों भ्रमित होने की उम्मीद थी, और मैं आपको बताऊंगा कि यह नहीं है। आपका HTML कुछ इस तरह दिखाई देगा:

<ul class="skip"> <li><a href="#stars">skip to Stars</a></li> <li><a href="#shortStripes">skip to Short Stripes</a></li> <li><a href="#longStripes">skip to Long Stripes</a></li> </ul> 

जबकि आपका CSS कुछ इस तरह होगा:

 .skip { position: absolute; top: 0; left: 0; width: 100%; } .skip a { position: absolute; left: -9999px; background: #b22234; color: white; text-decoration: none; font-weight: 600; width: fit-content; } .skip a:focus { display: block; position: static; left: 0; padding: .25em 1em; } 

यह परिणाम है। जाहिर है, यदि आप अभ्यास करना चाहते हैं, तो आपको इसे सेवा में लेने की आवश्यकता है। अपनी पसंदीदा सामग्री पर स्विच करें।

Attilavago.imtqy.com/fun-with-flags/usa पर Screengrab का उपयोग करके नेविगेशन को छोड़ने के लिए लिंक का चित्रण

और फिर वर्गों के बारे में क्या?

अनुभाग एक प्रकार के बच्चे वेब यूआई हैं। कोई भी वास्तव में उनके बारे में नहीं बोलता है, वे किसी भी तरह से बाहर नहीं खड़े होते हैं, लेकिन हर कोई उनसे अपेक्षा करता है कि वे अपने स्थानों पर रहें और अपने गंदे काम करें, बदले में किसी मान्यता की उम्मीद नहीं करें। कभी नहीं!

आपको शायद याद होगा कि इस लेख की शुरुआत में मैंने शब्दार्थ HTML का उल्लेख किया था। मानो या न मानो, लेकिन यह बात है। यदि आपके UI आर्किटेक्चर को शब्दार्थ से सोचा जाए तो अनुभाग आसानी से डिज़ाइन किए गए हैं। यहाँ कुछ अच्छे उदाहरण हैं:

 <header> <main> <nav> <aside> <section> <article> <footer> 

और यहां दिए गए कुछ ARIA विशेषताओं के साथ एक अधिक दृश्य उदाहरण:

यह समझना महत्वपूर्ण है कि एचटीएमएल 5 में कई सेक्शनिंग तत्व, उदाहरण के लिए, मुख्य, नौसेना, एक तरफ, डिफ़ॉल्ट रूप से एआरआईए सेक्शन को परिभाषित करते हैं। यदि संबंधित संकेत संरचना को समझे बिना HTML5 सेक्शनिंग तत्वों का उपयोग किया जाता है, तो सहायक तकनीकों का उपयोग करने वाले लोग सामग्री तक पहुंच और वेब पृष्ठों के साथ बातचीत करने में भ्रमित और सीमित होने की अधिक संभावना रखते हैं। विकास और उपयोगकर्ता के अनुभव में भ्रम से बचने के लिए, वर्गों पर इस श्वेत पत्र पर एक नज़र डालें। इसका सार यह है कि आपको अपने शब्दार्थ कोड को साफ रखने की जरूरत है, और सब कुछ अपने आप गिर जाएगा।
ध्यान रखने के लिए एक महत्वपूर्ण विवरण यह है कि वेब पेज के अनुभाग स्किंलिंक को प्रतिस्थापित नहीं करते हैं। बेशक, ब्रेल डिस्प्ले उपयोगकर्ता को पेज के वर्गों के बीच नेविगेट और नेविगेट करने के लिए तंत्र देगा, लेकिन कीबोर्ड उपयोगकर्ताओं के लिए समान तंत्र उपलब्ध नहीं है।

मुझे उम्मीद है कि अब आप स्किप्पिंक्स और अनुभागों के साथ-साथ उनके कार्यान्वयन के लिए महत्वपूर्ण अंतरों को समझेंगे। स्काइपलिंक कीबोर्ड नेविगेशन और ब्रेल डिस्प्ले दोनों के लिए बढ़िया हैं , जबकि सेक्शन केवल ब्रेल डिस्प्ले के लिए बढ़िया हैं, लेकिन उनमें से कोई भी दूसरे को रिप्लेस नहीं करता है। उनमें से किसी का कार्यान्वयन सरल है, इसलिए, यदि आप वास्तव में अपनी वेबसाइट या एप्लिकेशन की उपलब्धता से निपटना चाहते हैं, तो आपको यह सुनिश्चित करने की आवश्यकता है कि आप दोनों के साथ सामना कर सकते हैं। यह इतना मुश्किल नहीं है, है ना?