जनरेटिव डेटा इंटेलिजेंस

कोड

रहस्योद्घाटन स्क्रीन रीडर्स: सुलभ फॉर्म और सर्वोत्तम अभ्यास

प्लेटो द्वारा पुनर्प्रकाशित
प्लेटो द्वारा पुनर्प्रकाशित

दिनांक:

दृश्य: 0

फॉर्म एक्सेसिबिलिटी पर हम जो छोटी सी श्रृंखला बना रहे हैं उसमें यह तीसरी पोस्ट है। यदि आप दूसरी पोस्ट से चूक गए हैं, तो देखें उपयोगकर्ता फोकस को :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 सर्वोत्तम प्रथाएँ निम्नलिखित हैं।

  1. सुनिश्चित करें कि आप फॉर्म तत्व का उपयोग कर रहे हैं। फ़ॉर्म डिफ़ॉल्ट रूप से पहुंच योग्य होते हैं और इन्हें हर समय div पर उपयोग किया जाना चाहिए।
<form>
  <!-- Form controls are nested here. -->
</form>
  1. का उपयोग अवश्य करें for और id गुण पर label'रेत input'ताकि वे जुड़े रहें। इस तरह, यदि आप लेबल पर क्लिक/टैप करते हैं, तो फोकस इनपुट पर स्थानांतरित हो जाएगा और आप टाइप करना शुरू कर सकते हैं।
<label for="name">Name:</label>
<input type="text" id="name" name="name" required aria-required/>
  1. यदि फॉर्म को पूरा करने के लिए किसी फ़ील्ड की आवश्यकता है, तो आवश्यक विशेषता और एरिया-आवश्यक विशेषता का उपयोग करें। ये फ़ॉर्म को सबमिट करने से प्रतिबंधित कर देंगे. एरिया-आवश्यक विशेषता सहायक तकनीक को स्पष्ट रूप से बताती है कि फ़ील्ड आवश्यक है.
<input type="text" id="name" name="name" required aria-required/>
  1. उपयोग, :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;
}
  1. A button इसका उपयोग किसी कार्रवाई को शुरू करने के लिए किया जाता है, जैसे फ़ॉर्म सबमिट करना। इसका इस्तेमाल करें! का उपयोग करके बटन न बनाएं div'एस। ए div परिभाषा के अनुसार एक विभाजक है. इसमें कोई अंतर्निहित पहुंच गुण नहीं है।

डेमो

[एम्बेडेड सामग्री]
वॉयसओवर के साथ वेब फॉर्म को नेविगेट करना

यदि आप कोड की जांच करना चाहते हैं, तो नेविगेट करें वॉयसओवर डेमो गिटहब रेपो. यदि आप अपनी पसंद के स्क्रीन रीडर के साथ उपरोक्त डेमो आज़माना चाहते हैं, तो देखें वॉयसओवर के साथ वेब फॉर्म को नेविगेट करना.

स्क्रीन रीडर सॉफ्टवेयर

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

एनवीडीए

एनवीडीए, एनवी एक्सेस का एक स्क्रीन रीडर है। यह वर्तमान में केवल Microsoft Windows 7 SP1 और बाद के संस्करण चलाने वाले PC पर समर्थित है। अधिक पहुंच के लिए, इसे देखें एनवी एक्सेस वेबसाइट पर एनवीडीए संस्करण 2024.1 डाउनलोड पृष्ठ!

जबड़े

"हमें एक बेहतर स्क्रीन रीडर की आवश्यकता है"

- अनाम

यदि आप उपरोक्त संदर्भ को समझ गए हैं, तो आप अच्छी कंपनी में हैं। JAWS वेबसाइट के अनुसार, संक्षेप में यह है:

“JAWS, जॉब एक्सेस विद स्पीच, दुनिया का सबसे लोकप्रिय स्क्रीन रीडर है, जो उन कंप्यूटर उपयोगकर्ताओं के लिए विकसित किया गया है जिनकी दृष्टि हानि उन्हें स्क्रीन सामग्री देखने या माउस के साथ नेविगेट करने से रोकती है। JAWS आपके पीसी पर सबसे लोकप्रिय कंप्यूटर अनुप्रयोगों के लिए भाषण और ब्रेल आउटपुट प्रदान करता है। आप अपने कार्यालय, दूरस्थ डेस्कटॉप या घर से इंटरनेट नेविगेट करने, दस्तावेज़ लिखने, ईमेल पढ़ने और प्रस्तुतियाँ बनाने में सक्षम होंगे।

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

स्पॉट_आईएमजी

नवीनतम खुफिया

स्पॉट_आईएमजी

कॉपीराइट @ 2024 प्लेटो टेक्नोलॉजीज इंक।

हमारे साथ चैट करें

नमस्ते! मैं आपकी कैसे मदद कर सकता हूँ?