फॉर्म एक्सेसिबिलिटी पर हम जो छोटी सी श्रृंखला बना रहे हैं उसमें यह तीसरी पोस्ट है। यदि आप दूसरी पोस्ट से चूक गए हैं, तो देखें उपयोगकर्ता फोकस को :focus-visible के साथ प्रबंधित करना. इस पोस्ट में हम किसी फॉर्म को नेविगेट करते समय स्क्रीन रीडर का उपयोग करने और कुछ सर्वोत्तम प्रथाओं पर गौर करने जा रहे हैं।
स्क्रीन रीडर क्या है?
जब आप वेब पर घूम रहे होंगे तो आपने "स्क्रीन रीडर" शब्द सुना होगा। हो सकता है कि आप इस समय अपने द्वारा बनाए जा रहे अनुभवों पर मैन्युअल एक्सेसिबिलिटी परीक्षण चलाने के लिए स्क्रीन रीडर का उपयोग कर रहे हों। स्क्रीन रीडर एक प्रकार की AT या सहायक तकनीक है।
एक स्क्रीन रीडर डिजिटल टेक्स्ट को संश्लेषित भाषण या ब्रेल आउटपुट में परिवर्तित करता है, जिसे आमतौर पर ब्रेल रीडर के साथ देखा जाता है।
इस उदाहरण में, मैं Mac VO का उपयोग करूँगा। मैक वीओ (वॉयसओवर) सभी मैक उपकरणों में अंतर्निहित है; iOS, iPadOS और macOS सिस्टम। आप जिस प्रकार के डिवाइस पर macOS चला रहे हैं, उसके आधार पर VO को खोलना भिन्न हो सकता है। जिस मैकबुक प्रो पर वीओ चल रहा है, जिस पर मैं यह लिख रहा हूं, उसमें टच बार नहीं है, इसलिए मैं हार्डवेयर के अनुसार शॉर्टकट कुंजियों का उपयोग करूंगा।
MacOS पर VO को स्पिन करना
यदि आप अपडेटेड मैकबुक प्रो का उपयोग कर रहे हैं, तो आपकी मशीन का कीबोर्ड नीचे दी गई छवि जैसा दिखेगा।
आप इसे दबाकर शुरू करेंगे cmd
कुंजी और फिर टच आईडी को तीन बार तेजी से दबाएं।
यदि आप टचबार वाले एमबीपी (मैकबुक प्रो) पर हैं, तो आप शॉर्टकट का उपयोग करेंगे cmd+fn+f5
VO चालू करने के लिए. यदि आप अपने डेस्कटॉप या लैपटॉप के साथ पारंपरिक कीबोर्ड का उपयोग कर रहे हैं, तो कुंजियाँ समान होनी चाहिए या आपको एक्सेसिबिलिटी सेटिंग्स में VO को टॉगल करना होगा। एक बार VO चालू हो जाने पर, आपको इस संवाद के साथ-साथ स्वरबद्ध किया जाएगा। वीओ से परिचय.
यदि आप "वॉयसओवर का उपयोग करें" बटन पर क्लिक करते हैं तो आप अपनी वेबसाइटों और ऐप्स का परीक्षण करने के लिए वीओ का उपयोग करने की राह पर हैं। ध्यान रखने योग्य एक बात यह है कि VO को Safari के साथ उपयोग के लिए अनुकूलित किया गया है। ऐसा कहा जा रहा है कि, जब आप अपना स्क्रीन रीडर परीक्षण चला रहे हों तो सुनिश्चित करें कि सफारी वही ब्राउज़र है जिसका आप उपयोग कर रहे हैं। यही बात iPhone और iPad पर भी लागू होती है।
शुरुआत से ही आप दो मुख्य तरीकों से वीओ का उपयोग कर सकते हैं। जिस तरह से मैं व्यक्तिगत रूप से इसका उपयोग करता हूं वह एक वेबसाइट पर नेविगेट करके और इसके संयोजन का उपयोग करके होता है tab, control, option, shift
और तीर कुंजियाँ, मैं अकेले इन कुंजियों के साथ अनुभव को कुशलतापूर्वक नेविगेट कर सकता हूँ।
अनुभव को नेविगेट करने का एक और सामान्य तरीका इसका उपयोग करना है वॉयसओवर रोटर. रोटर एक ऐसी सुविधा है जिसे सीधे उस स्थान पर नेविगेट करने के लिए डिज़ाइन किया गया है जहां आप अनुभव करना चाहते हैं। रोटर का उपयोग करके, आप पूरी साइट को पार करने की आवश्यकता से छुटकारा पा लेते हैं, इसे "अपना खुद का साहसिक कार्य चुनें" के रूप में सोचें।
संशोधक कुंजियां
संशोधक कुंजियाँ वह तरीका है जिससे आप VO में विभिन्न सुविधाओं का उपयोग करते हैं। डिफ़ॉल्ट संशोधक कुंजी या VO
is control
+ option
लेकिन आप इसे कैप्स लॉक में बदल सकते हैं या परस्पर उपयोग करने के लिए दोनों विकल्प चुन सकते हैं।
रोटर का उपयोग करना
रोटर का उपयोग करने के लिए आपको अपनी संशोधक कुंजी(कुंजियों) और अक्षर "U" के संयोजन का उपयोग करना होगा। मेरे लिए, मेरी संशोधक कुंजी है caps lock
. मैं दबाता हूँ caps lock
+ U
और रोटर मेरे लिए घूमता है। एक बार जब रोटर आ जाता है तो मैं बाएँ और दाएँ तीरों का उपयोग करके अनुभव के किसी भी हिस्से पर नेविगेट कर सकता हूँ जो मैं चाहता हूँ।
शीर्षक स्तर के अनुसार नेविगेट करना
अनुभव को नेविगेट करने का एक और अच्छा तरीका शीर्ष स्तर पर है। यदि आप अपनी संशोधक कुंजियों के संयोजन का उपयोग करते हैं + cmd
+ H
आप शीर्षक स्तरों के आधार पर दस्तावेज़ संरचना को पार कर सकते हैं। आप दबाकर दस्तावेज़ को वापस ऊपर भी ले जा सकते हैं shift
इस क्रम में, संशोधक कुंजियाँ + shift
+ cmd
+ H
.
इतिहास और सर्वोत्तम प्रथाएँ
HTML में फॉर्म सबसे शक्तिशाली मूल तत्वों में से एक है। चाहे आप किसी पृष्ठ पर कुछ खोज रहे हों, कुछ खरीदने के लिए फ़ॉर्म सबमिट कर रहे हों या कोई सर्वेक्षण सबमिट कर रहे हों। प्रपत्र वेब की आधारशिला हैं, और एक उत्प्रेरक थे जिसने हमारे अनुभवों में अन्तरक्रियाशीलता का परिचय दिया।
वेब फॉर्म का इतिहास सितंबर 1995 से शुरू होता है जब इसे पेश किया गया था एचटीएमएल 2.0 विशिष्टता. कुछ लोग कहते हैं कि वेब के अच्छे दिन आ गए हैं, कम से कम मैं तो यही कहता हूँ। स्टेफ़नी स्टिमक ने एक अद्भुत लेख लिखा स्मैशिंग पत्रिका शीर्षक दिया, "चयन और परे का मानकीकरण: मूल HTML फॉर्म नियंत्रण का अतीत, वर्तमान और भविष्य".
वेब के लिए एक सुलभ फ़ॉर्म बनाते समय अनुसरण करने योग्य 5 सर्वोत्तम प्रथाएँ निम्नलिखित हैं।
- सुनिश्चित करें कि आप फॉर्म तत्व का उपयोग कर रहे हैं। फ़ॉर्म डिफ़ॉल्ट रूप से पहुंच योग्य होते हैं और इन्हें हर समय div पर उपयोग किया जाना चाहिए।
<form>
<!-- Form controls are nested here. -->
</form>
- का उपयोग अवश्य करें
for
औरid
गुण परlabel
'रेतinput
'ताकि वे जुड़े रहें। इस तरह, यदि आप लेबल पर क्लिक/टैप करते हैं, तो फोकस इनपुट पर स्थानांतरित हो जाएगा और आप टाइप करना शुरू कर सकते हैं।
<label for="name">Name:</label>
<input type="text" id="name" name="name" required aria-required/>
- यदि फॉर्म को पूरा करने के लिए किसी फ़ील्ड की आवश्यकता है, तो आवश्यक विशेषता और एरिया-आवश्यक विशेषता का उपयोग करें। ये फ़ॉर्म को सबमिट करने से प्रतिबंधित कर देंगे. एरिया-आवश्यक विशेषता सहायक तकनीक को स्पष्ट रूप से बताती है कि फ़ील्ड आवश्यक है.
<input type="text" id="name" name="name" required aria-required/>
- उपयोग,
:focus
,:focus-within
और:focus-visible
उपयोगकर्ता द्वारा फोकस प्राप्त करने के तरीके को प्रबंधित और अनुकूलित करने के लिए सीएसएस छद्म कक्षाएं।
form:focus-within {
background-color: #cfffcf;
}
input:focus-within {
border: 10px solid #000000;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid crimson;
border-radius: 3px;
}
- A
button
इसका उपयोग किसी कार्रवाई को शुरू करने के लिए किया जाता है, जैसे फ़ॉर्म सबमिट करना। इसका इस्तेमाल करें! का उपयोग करके बटन न बनाएंdiv
'एस। एdiv
परिभाषा के अनुसार एक विभाजक है. इसमें कोई अंतर्निहित पहुंच गुण नहीं है।
डेमो
यदि आप कोड की जांच करना चाहते हैं, तो नेविगेट करें वॉयसओवर डेमो गिटहब रेपो. यदि आप अपनी पसंद के स्क्रीन रीडर के साथ उपरोक्त डेमो आज़माना चाहते हैं, तो देखें वॉयसओवर के साथ वेब फॉर्म को नेविगेट करना.
स्क्रीन रीडर सॉफ्टवेयर
नीचे विभिन्न प्रकार के स्क्रीन रीडर सॉफ़्टवेयर की सूची दी गई है जिनका उपयोग आप अपने दिए गए ऑपरेटिंग सिस्टम पर कर सकते हैं। यदि मैक आपकी पसंद की मशीन नहीं है, तो विंडोज़ और लिनक्स के साथ-साथ एंड्रॉइड डिवाइस के लिए भी विकल्प उपलब्ध हैं।
एनवीडीए
एनवीडीए, एनवी एक्सेस का एक स्क्रीन रीडर है। यह वर्तमान में केवल Microsoft Windows 7 SP1 और बाद के संस्करण चलाने वाले PC पर समर्थित है। अधिक पहुंच के लिए, इसे देखें एनवी एक्सेस वेबसाइट पर एनवीडीए संस्करण 2024.1 डाउनलोड पृष्ठ!
जबड़े
यदि आप उपरोक्त संदर्भ को समझ गए हैं, तो आप अच्छी कंपनी में हैं। JAWS वेबसाइट के अनुसार, संक्षेप में यह है:
अपने लिए JAWS की जाँच करें और यदि वह समाधान आपकी आवश्यकताओं के अनुरूप है, तो निश्चित रूप से इसे आज़माएँ!
वर्णनकर्ता
नैरेटर एक अंतर्निर्मित स्क्रीन रीडर समाधान है जो विंडोज़ 11 के साथ आता है। यदि आप इसे अपनी पसंद के स्क्रीन रीडर के रूप में उपयोग करना चुनते हैं, तो नीचे दिया गया लिंक इसके उपयोग पर समर्थन दस्तावेज़ के लिए है।
रेसिंग
ओर्का एक स्क्रीन रीडर है जिसका उपयोग गनोम चलाने वाले विभिन्न लिनक्स वितरणों पर किया जा सकता है।
TalkBack
Google TalkBack एक स्क्रीन रीडर है जिसका उपयोग Android उपकरणों पर किया जाता है। इसे चालू करने और उपयोग करने के बारे में अधिक जानकारी के लिए, एंड्रॉइड एक्सेसिबिलिटी सपोर्ट साइट पर इस आलेख को देखें.
ब्राउज़र का समर्थन
यदि आप HTML तत्वों और ARIA (एक्सेसिबल रिच इंटरनेट एप्लिकेशन) विशेषताओं के लिए वास्तविक ब्राउज़र समर्थन की तलाश में हैं, तो मेरा सुझाव है HTML के लिए caniuse.com और ARIA के लिए अभिगम्यता समर्थन ब्राउज़र समर्थन पर नवीनतम 4-1-1 प्राप्त करने के लिए। याद रखें, यदि ब्राउज़र तकनीक का समर्थन नहीं करता है, तो संभावना है कि स्क्रीन रीडर भी नहीं करेगा।
डिजिटलए11वाई अपने लेख के साथ ब्राउज़र और स्क्रीन रीडर जानकारी को सारांशित करने में सहायता कर सकते हैं, स्क्रीन रीडर और ब्राउज़र! अभिगम्यता परीक्षण के लिए सर्वोत्तम संयोजन कौन सा है?
लिंक
https://support.apple.com/guide/voiceover/with-the-voiceover-rotor-mchlp2719/mac
https://www.w3.org/TR/wai-aria/
https://www.w3.org/WAI/standards-guidelines/aria/
https://support.google.com/accessibility/android/answer/6283677?hl=en
https://support.google.com/accessibility/android/answer/6283677?hl=en
- एसईओ संचालित सामग्री और पीआर वितरण। आज ही प्रवर्धित हो जाओ।
- प्लेटोडेटा.नेटवर्क वर्टिकल जेनरेटिव एआई। स्वयं को शक्तिवान बनाएं। यहां पहुंचें।
- प्लेटोआईस्ट्रीम। Web3 इंटेलिजेंस। ज्ञान प्रवर्धित। यहां पहुंचें।
- प्लेटोईएसजी. कार्बन, क्लीनटेक, ऊर्जा, पर्यावरण, सौर, कचरा प्रबंधन। यहां पहुंचें।
- प्लेटोहेल्थ। बायोटेक और क्लिनिकल परीक्षण इंटेलिजेंस। यहां पहुंचें।
- स्रोत: https://css-tricks.com/demystifying-screen-readers-accessible-forms-best-practices/