वेब पंचांग 2019: उपलब्धता

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

---

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

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

वेब कंटेंट एक्सेसिबिलिटी गाइडलाइंस (WCAG) आपकी साइट को सुलभ बनाने के बारे में सिफारिशें प्रदान करती हैं। इन सिफारिशों का उपयोग हमारे विश्लेषण के आधार के रूप में किया गया था। हालांकि, अक्सर ऐसी परिस्थितियां होती हैं जिनमें किसी वेबसाइट की उपलब्धता का प्रोग्राम विश्लेषण करना बहुत मुश्किल होता है। उदाहरण के लिए, एक वेब प्लेटफॉर्म समान कार्यात्मक परिणाम प्राप्त करने के कई तरीके प्रदान करता है, लेकिन अंतर्निहित कोड नाटकीय रूप से भिन्न हो सकते हैं। इसलिए, हमारा विश्लेषण केवल वेबसाइटों की समग्र उपलब्धता का एक मोटा अनुमान है।

हमने चार मुख्य श्रेणियों की पहचान की: वेब पर पठनीयता, मीडिया तत्व, पेज नेविगेशन में आसानी, और सहायक तकनीकों का उपयोग करके पहुंच।

परीक्षण के दौरान, हमें डेस्कटॉप और मोबाइल संस्करणों के बीच पहुंच में महत्वपूर्ण अंतर नहीं मिला। परिणामस्वरूप, हमारे द्वारा प्रस्तुत सभी परिणाम डेस्कटॉप संस्करणों से संबंधित हैं, जब तक कि अन्यथा संकेत न दिया गया हो।

पठनीयता

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

रंग विपरीत

ऐसे कई उदाहरण हैं जहां आगंतुक किसी साइट की सामग्री को स्पष्ट रूप से नहीं देख सकते हैं। वे रंग के अंधे हो सकते हैं, पाठ और पृष्ठ की पृष्ठभूमि (12 पुरुषों में से 1 और यूरोपीय मूल की 200 महिलाओं में से 1) के रंग को भेद करने में असमर्थ हैं। शायद उपयोगकर्ता बस उज्ज्वल सूरज की रोशनी में पाठ पढ़ता है, स्क्रीन पर बहुत अधिक चमक पैदा करता है, काफी दृश्यता बिगड़ा। या हो सकता है कि यह बिगड़ा हुआ दृष्टि वाला सिर्फ एक बुजुर्ग व्यक्ति है, जो पहले की तरह रंग भेद करने में असमर्थ था।

नतीजतन, यह सुनिश्चित करने के लिए कि आपकी साइट इन शर्तों के तहत पठनीय है, यह महत्वपूर्ण है कि पाठ का रंग पृष्ठभूमि के संबंध में पर्याप्त रूप से विपरीत है।


चित्र 1. अपर्याप्त रूप से विषम पाठ का एक उदाहरण। लुकजुक के सौजन्य से

केवल 22.04% साइटें ही सभी टेक्स्ट के रंग को पर्याप्त विपरीत बनाती हैं। या दूसरे शब्दों में, 5 में से 4 साइटों में पाठ होता है जो पृष्ठभूमि के साथ विलय होता है, जो इसके पढ़ने को जटिल बनाता है।

कृपया ध्यान दें कि हमारे पास छवियों के अंदर पाठ का विश्लेषण करने की क्षमता नहीं है, इसलिए हमने जो मूल्य कहा है वह उन साइटों के प्रतिशत की ऊपरी सीमा है जो परीक्षण पास कर चुके हैं

ज़ूम और पेज ज़ूम करें

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

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

इसलिए, डेवलपर्स व्यूपोर्ट मेटा टैग में निम्नलिखित दो गुणों में से एक को सेट करके इस फ़ंक्शन को अक्षम करने की क्षमता को ध्यान में रखते हैं:

1. उपयोगकर्ता-स्केलेबल 0 या नहीं पर सेट है
2. अधिकतम-स्केल 1, 1.0 पर सेट

दुर्भाग्य से, डेवलपर्स ने अक्सर इसका दुरुपयोग किया, कि मोबाइल संस्करण में लगभग हर तीसरी साइट में यह सुविधा अक्षम है, और Apple (iOS 10 के साथ शुरू) अब डेवलपर्स को ज़ूम सुविधा को अक्षम करने की अनुमति नहीं देता है। सफारी मोबाइल ब्राउज़र इस टैग को अनदेखा करता है । सभी साइटों, कोई फर्क नहीं पड़ता जो नए iOS उपकरणों पर ज़ूम का उपयोग करके बढ़ाया जा सकता है।


चित्र 2. उपकरण प्रकार की साइटों का प्रतिशत, जिस पर स्केलिंग अक्षम है

भाषा की परिभाषा

वेब अद्भुत सामग्री से भरा है। हालांकि, एक पकड़ है: दुनिया में 1000 से अधिक विभिन्न भाषाएं हैं और आप जिस सामग्री की तलाश कर रहे हैं वह उस भाषा में उपलब्ध नहीं हो सकती है जो आप बोलते हैं। हाल के वर्षों में, हमने अनुवाद प्रौद्योगिकियों में महत्वपूर्ण प्रगति की है, और आपने शायद उनमें से एक का उपयोग किया है (उदाहरण के लिए, Google अनुवाद)।

इस अवसर को सुविधाजनक बनाने के लिए, अनुवाद प्रौद्योगिकियों को यह जानना होगा कि आपके पृष्ठों पर किस भाषा में पाठ लिखा गया है। यह लंग विशेषता का उपयोग करके किया जाता है। इसके बिना, कंप्यूटर को यह अनुमान लगाने के लिए मजबूर किया जाता है। जैसा कि आपने अनुमान लगाया होगा, इससे बहुत सी त्रुटियां होती हैं, खासकर जब पृष्ठ बहुभाषी होते हैं (उदाहरण के लिए, अंग्रेजी में आपके पृष्ठ को नेविगेट करना और जापानी में लेख की सामग्री)।

इससे भी अधिक हद तक, यह समस्या भाषण सिंथेसाइज़र तकनीकों का उपयोग करते समय ध्यान देने योग्य है, जैसे स्क्रीन रीडर, जो उपयोगकर्ता द्वारा डिफ़ॉल्ट रूप से निर्धारित भाषा में पाठ पढ़ने की कोशिश करते हैं, जब तक कि साइट पर किसी अन्य भाषा को निर्दिष्ट नहीं किया जाता है।

हमारे विश्लेषण से यह इस प्रकार है कि 26.13% पृष्ठ " लैंग " विशेषता का उपयोग करते हुए भाषा को निर्दिष्ट नहीं करते हैं। यह सभी पृष्ठों की इस तिमाही को संभावित रूप से ऊपर वर्णित समस्याओं से ग्रस्त बनाता है। अच्छी खबर यह है कि " लैंग " विशेषता का उपयोग करने वाली साइटों के बीच, 99.68% सही पृष्ठ भाषा मूल्य दर्शाते हैं

विचलित करने वाली सामग्री

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

दुर्भाग्य से, हमारे डेटा से संकेत मिलता है कि इंटरनेट पर अंतहीन दोहराए जाने वाले तत्व काफी सामान्य हैं: 21.04% पृष्ठ इसका उपयोग अंतहीन एनीमेशन के सीएसएस गुणों के साथ या <मार्की> और <ब्लिंक> तत्वों की मदद से करते हैं।

हालांकि, यह उल्लेखनीय है कि इनमें से अधिकांश घटनाओं का कारण कुछ लोकप्रिय तृतीय-पक्ष सीएसएस पुस्तकालय हैं, जो डिफ़ॉल्ट रूप से अंतहीन लूपिंग एनीमेशन प्लेबैक द्वारा निर्धारित किए जाते हैं

वेब मीडिया तत्व

छवियों के लिए वैकल्पिक पाठ

छवियाँ आधुनिक वेब का एक महत्वपूर्ण हिस्सा हैं। वे दिलचस्प कहानियां बता सकते हैं, ध्यान आकर्षित कर सकते हैं और भावनाओं को उकसा सकते हैं। लेकिन हर कोई इन छवियों को नहीं देख सकता है। सौभाग्य से, 1995 में, HTML संस्करण 2.0 ने इस समस्या का समाधान प्रदान किया - "ऑल्ट" विशेषता । यह वेब डेवलपर्स को हमारे द्वारा उपयोग की जाने वाली छवियों के पाठ विवरण को जोड़ने की क्षमता प्रदान करता है, इसलिए जब कोई इस छवि को नहीं देख सकता है (या छवि लोड नहीं हुई), तो वैकल्पिक विवरण पाठ पढ़ने का अवसर रहता है।

इस तथ्य के बावजूद कि सर्वोच्च विशेषता 25 साल पहले शुरू की गई थी, यह अभी भी 49.91% द्वारा कुछ छवियों के लिए उपयोग नहीं की जाती है, और यह 8.68% पृष्ठों पर बिल्कुल भी नहीं होती है।

ऑडियो और वीडियो कैप्शन

चूंकि चित्र कहानी कहने के लिए अच्छे हैं, इसलिए ऑडियो और वीडियो सामग्री भी ध्यान आकर्षित करने और विचारों को व्यक्त करने में अच्छी है। जब ऑडियो और वीडियो पर हस्ताक्षर नहीं किए जाते हैं, तो उपयोगकर्ता जो किसी कारण से वर्तमान में इसे नहीं सुन सकते हैं, सामग्री के सार का काफी हिस्सा खो देते हैं। यह ऑडियो और वीडियो के लिए हस्ताक्षरों को शामिल करने की आवश्यकता के बारे में है जो हम अक्सर बहरे से शिकायत सुनते हैं या लोगों को सुनने में कठिन होते हैं।

<ऑडियो> या <वीडियो> टैग का उपयोग करने वाली साइटों की पूरी सूची में से केवल 0.54% हस्ताक्षर (माप मानदंड <ट्रैक> तत्व की उपस्थिति थी)।

सुविधाजनक पृष्ठ नेविगेशन

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

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

सुर्खियों में

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

स्क्रीन रीडर उपयोगकर्ताओं को भ्रमित करने से बचने के लिए, हेडर स्तरों को छोड़ना सुनिश्चित न करें। उदाहरण के लिए, H1 से सीधे H3 से कूदें नहीं, H2 को छोड़ दें। यह महत्वपूर्ण क्यों है? क्योंकि यह अप्रत्याशित परिवर्तन स्क्रीन रीडर उपयोगकर्ताओं को यह सोचने के लिए प्रेरित कर सकता है कि वे कुछ सामग्री से चूक गए थे। इससे वे कुछ ऐसी सामग्री की तलाश शुरू कर सकते हैं, जिन्हें उन्होंने छोड़ दिया हो, भले ही वह वास्तव में न हो। इसके अलावा, आप केवल पाठकों की मदद करेंगे यदि आप किसी एक शैली का पालन करते हैं।

उस परिणाम के साथ, हमें निम्नलिखित परिणाम मिले:

1. 89.36% पृष्ठ किसी भी तरह शीर्षकों का उपयोग करते हैं। breathtakingly
2. 38.6% पृष्ठ शीर्ष स्तर छोड़ते हैं
3. अजीब, लेकिन एच 2 हेडिंग एच 1 (अनुवादक के नोट से अधिक सामान्य हैं: सबसे अधिक संभावना है, हम एक निश्चित स्तर के हेडिंग का उपयोग करने के तथ्य के बारे में बात कर रहे हैं, और पृष्ठ पर उनकी संख्या के बारे में नहीं)

चित्र 3. हेडर स्तरों का प्रचलन

"मुख्य" सामग्री का सूचकांक

"मुख्य" सामग्री का एक सूचकांक ऑन-स्क्रीन पाठकों को यह निर्धारित करने में मदद करता है कि वेब पेज की मुख्य सामग्री कहाँ से शुरू होती है, ताकि उपयोगकर्ता सीधे उस पर जा सकें। इसके बिना, स्क्रीन पाठकों के उपयोगकर्ताओं को प्रत्येक बार मजबूर किया जाता है कि वे साइट के अगले पृष्ठ पर स्विच करने के दौरान मैन्युअल रूप से नेविगेशन के सभी वर्गों से गुजरें। जाहिर है, यह बहुत थका देने वाला है।

हमने निर्धारित किया कि चार (26.03%) पृष्ठों में से केवल एक में यह सूचकांक है। और आश्चर्यजनक रूप से, 8.06% पृष्ठों में गलती से एक से अधिक मुख्य सूचकांक शामिल थे, जिसके कारण उपयोगकर्ताओं को यह अनुमान लगाने के लिए मजबूर किया गया कि कौन सा सूचकांक वास्तव में मुख्य सामग्री को दर्शाता है।


चित्रा 4. मुख्य अनुक्रमित की संख्या से पृष्ठों का प्रतिशत

अनुभागीय HTML तत्व

चूंकि HTML5 2008 में पेश किया गया था और 2014 में आधिकारिक मानक बन गया था, इसलिए कई HTML तत्व कंप्यूटर और स्क्रीन पाठकों को वेब पेज के लेआउट और संरचना को समझने में मदद करने के लिए दिखाई दिए।

<शीर्ष लेख> , <पाद> , <नौसेना> , और <मुख्य> जैसे तत्व इंगित करते हैं कि किस प्रकार का एक विशेष प्रकार की सामग्री स्थित है और उपयोगकर्ताओं को पृष्ठ को जल्दी से नेविगेट करने की अनुमति देता है। वे व्यापक रूप से विकास में उपयोग किए जाते हैं, जिनमें से अधिकांश का उपयोग 50% से अधिक पृष्ठों पर किया जा रहा है (<मुख्य> टैग एक अपवाद है)।

अन्य टैग, जैसे <लेख> , <hr> और <अलग>, उपयोगकर्ताओं को पृष्ठ की मुख्य सामग्री को समझने में मदद करते हैं। उदाहरण के लिए, यह रिपोर्ट करता है कि एक लेख कहां समाप्त होता है और दूसरा शुरू होता है। इन वस्तुओं का उपयोग अक्सर नहीं किया जाता है। प्रत्येक में 20% की दर है। वे पृष्ठ का अभिन्न हिस्सा नहीं हैं, इसलिए यह जरूरी नहीं कि एक अलार्म हो।

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


चित्र 5. विभिन्न अर्थ संबंधी HTML तत्वों का उपयोग करना

अन्य नेविगेशनल HTML तत्व

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

चित्रा 6. अन्य नेविगेशनल HTML तत्व

लिंक छोड़ें

छोड़ें लिंक पृष्ठ के शीर्ष पर स्थित लिंक हैं और स्क्रीन पाठकों या उपयोगकर्ताओं को केवल मुख्य सामग्री पर सीधे जाने के लिए कीबोर्ड का उपयोग करने की अनुमति देते हैं। वे आपको पृष्ठ के शीर्ष पर सभी नेविगेशन लिंक और मेनू को छोड़ देने की अनुमति देते हैं। स्किप लिंक विशेष रूप से कीबोर्ड उपयोगकर्ताओं के लिए उपयोगी होते हैं, जो ऑन-स्क्रीन पाठकों का उपयोग नहीं करते हैं, क्योंकि ये उपयोगकर्ता आमतौर पर अन्य तेज़ नेविगेशन मोड (उदाहरण के लिए, हेडिंग) तक पहुंच नहीं रखते हैं। यह पाया गया कि हमारे अध्ययन में 14.19% ऐसे लिंक हैं।

यदि आप यह देखना चाहते हैं कि ऐसा लिंक कैसे काम करता है, तो बस Google पर खोज करें और परिणाम पृष्ठ पर "टैब" पर क्लिक करें। इससे पहले छिपा हुआ एक लिंक दिखाई देगा, जैसा कि नीचे दिए गए आंकड़े में है


चित्र 7. उदाहरण Google पर लिंक छोड़ें

पृष्ठ कोड को पार्स करते समय, यह काफी कठिन है कि स्किप लिंक क्या है। इस अध्ययन में, अगर हमें एक पृष्ठ पर पहले तीन लिंक के बीच एक लंगर ( href = # शीर्ष 1 ) के साथ एक लिंक मिला, तो हमने इसे इस तत्व के साथ एक पृष्ठ के रूप में परिभाषित किया। इस प्रकार, 14.19% ऐसे लिंक का उपयोग करने वाले पृष्ठों की हिस्सेदारी की ऊपरी सीमा है।

शॉर्टकट

Aria-keyshortcuts या accesskey विशेषताओं के माध्यम से सेट की गई गर्म कुंजियों को दो तरीकों में से एक में इस्तेमाल किया जा सकता है:

1. किसी लिंक या बटन जैसे पृष्ठ पर एक तत्व सक्रिय करना
2. एक विशिष्ट पृष्ठ तत्व पर ध्यान दें। उदाहरण के लिए, किसी पृष्ठ पर किसी विशिष्ट इनपुट फ़ील्ड पर फ़ोकस ले जाने से उपयोगकर्ता उसके ठीक बाद लिखना प्रारंभ कर सकता है।

हमारे शोध के परिणामस्वरूप, हम यह निष्कर्ष निकाल सकते हैं कि aria-keyshortcuts विशेषता व्यावहारिक रूप से उपयोग नहीं की जाती है, क्योंकि यह 4 मिलियन से अधिक में से केवल 159 साइटों पर पाई गई थी। एक्सेसरी विशेषता का अधिक बार उपयोग किया जाता है - 2.47% पृष्ठों पर (साइटों के मोबाइल संस्करणों पर 1.74%)। हम यह मानते हैं कि साइटों के डेस्कटॉप संस्करणों पर इसका अधिक लगातार उपयोग इस तथ्य के कारण है कि डेवलपर्स का मानना ​​है कि उपयोगकर्ता केवल टच स्क्रीन वाले उपकरणों से साइटों के मोबाइल संस्करणों का उपयोग करते हैं और कीबोर्ड का उपयोग नहीं करते हैं।

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

टेबल

टेबल्स बड़ी मात्रा में डेटा को व्यवस्थित और प्रस्तुत करने के मुख्य तरीकों में से एक हैं। कई सहायक प्रौद्योगिकियां, जैसे स्क्रीन रीडर और स्विच (जो बिगड़ा हुआ मोटर कौशल वाले उपयोगकर्ताओं के लिए उपयोगी हो सकते हैं), विशेष कार्य हो सकते हैं जो उन्हें सारणीबद्ध डेटा को अधिक कुशलता से नेविगेट करने की अनुमति देते हैं।

सुर्खियों में

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

टेबल हेडर बाहर रखने के लिए, बस <th> टैग ( <td> के बजाय ) का उपयोग करें, या ARIA भूमिका स्तंभकार या rowheader। तालिका के पन्नों में से केवल 24.5% को संकेतित विधियों में से एक का उपयोग करके चिह्नित किया गया था। नतीजतन, पन्नों के शेष तीन तिमाहियों पर, डेवलपर्स ने शीर्षकों के बिना तालिकाओं को रखा, स्क्रीन पाठकों के उपयोगकर्ताओं के लिए अतिरिक्त कठिनाइयों का निर्माण किया। टेबल हेडर को चिह्नित करने के लिए <th> और <td>

टैग का उपयोग करना अधिक सामान्य तरीका था। स्तंभकार और रोवाडर की भूमिका व्यावहारिक रूप से उपयोग नहीं की जाती है: चूंकि वे केवल 677 साइटों (0.058%) पर मिले थे।

हस्ताक्षर

सभी प्रकार के पाठकों के लिए अधिक वर्णनात्मक संदर्भ प्रदान करने के लिए <कैप्शन> तत्व का उपयोग करते हुए तालिका कैप्शन उपयोगी हैं। हस्ताक्षर पाठक को उस जानकारी की धारणा के लिए तैयार कर सकते हैं जिसमें तालिका शामिल है, और यह उन लोगों के लिए विशेष रूप से उपयोगी हो सकता है जो आसानी से विचलित या बाधित हो सकते हैं। वे ऐसे लोगों के लिए भी उपयोगी हैं जो एक बड़ी तालिका के अंदर खो सकते हैं, जैसे कि स्क्रीन रीडर उपयोगकर्ता या सीखने की अक्षमता या बुद्धि वाले व्यक्ति। पाठकों के लिए यह समझना जितना आसान है कि उनके लिए कौन सा डेटा प्रस्तुत किया गया है, बेहतर है।

इसके बावजूद, तालिका में केवल 4.32% पृष्ठों पर हस्ताक्षर हैं।

सहायक प्रौद्योगिकी संगतता

ARIA का उपयोग करना

सबसे लोकप्रिय और व्यापक रूप से उपयोग किए जाने वाले वेब एक्सेसिबिलिटी विनिर्देशों में से एक एक्सेसिबल रिच इंटरनेट एप्लिकेशन (ARIA) मानक है । यह मानक किसी तत्व की भूमिका को दर्शाने के लिए कई अतिरिक्त HTML विशेषताएँ प्रदान करता है, इसके दृश्य प्रतिनिधित्व (अर्थात, उनके अर्थ अर्थ) के बावजूद और वे किस प्रकार के कार्यों के लिए डिज़ाइन किए गए हैं।

ARIA का उचित उपयोग चुनौतीपूर्ण हो सकता है। उदाहरण के लिए, हमने ARIA विशेषताओं के लिए अमान्य मानों का उपयोग करते हुए 12.31% पृष्ठ पाए। यह एक जरूरी समस्या है, क्योंकि ARIA विशेषताओं का उपयोग करते समय त्रुटियां दृष्टिगोचर नहीं होती हैं। इनमें से कुछ त्रुटियों को स्वचालित सत्यापन उपकरण का उपयोग करके पता लगाया जा सकता है, लेकिन आमतौर पर इसके लिए सहायक उपकरणों (जैसे स्क्रीन रीडर) का उपयोग करके मैन्युअल सत्यापन की आवश्यकता होती है। यह खंड परिभाषित करता है कि वेब पर ARIA का उपयोग कैसे किया जाता है और विशेष रूप से मानक का कौन सा भाग सबसे आम है।


चित्र 8। पृष्ठों का उपयोग करने के बीच ARIA की लोकप्रियता का वर्णन

भूमिका विशेषता

पूरे ARIA विनिर्देशन में भूमिका विशेषता सबसे महत्वपूर्ण है। इसका उपयोग इस HTML तत्व के उद्देश्य के बारे में ब्राउज़र को सूचित करने के लिए किया जाता है (अर्थात अर्थ अर्थ के बारे में)। उदाहरण के लिए, एक बटन के रूप में CSS के माध्यम से स्टाइल वाले तत्व को ARIA भूमिका " बटन " प्राप्त करनी चाहिए ।

वर्तमान में, 46.91% पृष्ठ कम से कम ARIA विशेषता " भूमिका " का उपयोग करते हैं। नीचे दिए गए चित्र 9 में, हमने ARIA भूमिकाओं के दस सबसे अधिक इस्तेमाल किए जाने वाले मूल्यों की एक सूची संकलित की है।


चित्र 9। शीर्ष 10 aria भूमिकाएँ

चित्र 9 में परिणामों को देखते हुए, दो दिलचस्प बिंदुओं पर प्रकाश डाला जा सकता है:

• यूआई फ्रेमवर्क को अपडेट करने से वेब एक्सेसिबिलिटी पर बड़ा असर पड़ सकता है
• एक प्रभावशाली संख्या में साइटें मोडल विंडो उपलब्ध कराने की कोशिश कर रही हैं

UI फ्रेमवर्क अपडेट करना पूरे वेब में पहुंच बढ़ाने का एक तरीका हो सकता है

शीर्ष 5 भूमिकाएँ, सभी 11% या अधिक पृष्ठों पर दिखाई देती हैं और ऐतिहासिक भूमिकाएँ हैं। उनका उपयोग नेविगेशन की सहायता के लिए किया जाता है, न कि ड्रॉप-डाउन सूची जैसे तत्वों की कार्यक्षमता का वर्णन करने के लिए। यह एक अप्रत्याशित परिणाम है, क्योंकि ARIA का मुख्य उद्देश्य डेवलपर्स को सामान्य HTML तत्वों (उदाहरण के लिए, <div>) से बने तत्वों की कार्यक्षमता का वर्णन करने का अवसर देना था।

हमें संदेह है कि सबसे लोकप्रिय यूआई फ्रेमवर्क में से कुछ ने अपने टेम्पलेट्स में नेविगेशन भूमिका को शामिल किया है। यह लैंडमार्क विशेषताओं के व्यापक उपयोग की व्याख्या करेगा। यदि यह सिद्धांत सही है, तो बेहतर एक्सेसिबिलिटी सपोर्ट वाले लोकप्रिय यूआई फ्रेमवर्क को अपडेट करने से वेब एक्सेसिबिलिटी पर भारी असर पड़ सकता है।

इस निष्कर्ष की ओर इशारा करते हुए एक और परिणाम यह है कि अधिक "उन्नत" लेकिन समान रूप से महत्वपूर्ण एआरआईए विशेषताओं का उपयोग बिल्कुल नहीं लगता है। ऐसी विशेषताओं को केवल यूआई फ्रेमवर्क के माध्यम से लागू नहीं किया जा सकता है, क्योंकि उन्हें किसी विशेष साइट की संरचना और उपस्थिति के आधार पर कॉन्फ़िगर करने की आवश्यकता हो सकती है। उदाहरण के लिए, हमने पाया कि पॉज़िनेट और सेटिस्लेट विशेषताओं का उपयोग केवल 0.01% पृष्ठों पर किया गया था। ये विशेषताएँ स्क्रीन रीडर उपयोगकर्ता को बताती हैं कि मेनू सूची में कितने आइटम हैं और वर्तमान में किसे चुना गया है। इस प्रकार, यदि कोई नेत्रहीन उपयोगकर्ता मेनू को नेविगेट करने की कोशिश करता है, तो उसे एक घोषणा सुननी चाहिए, उदाहरण के लिए: "होम, 5 में से 1", "उत्पाद, 5 में से 2", "डाउनलोड, 5 में से 3", आदि।

कई साइटें मोडल विंडो उपलब्ध कराने का प्रयास करती हैं।

संवाद की भूमिका अपेक्षाकृत लोकप्रिय है, क्योंकि मोडल विंडोज़ को स्क्रीन पाठकों के लिए सुलभ बनाना बहुत मुश्किल है। यही कारण है कि यह बहुत प्रभावशाली है कि विश्लेषण किए गए 8% पृष्ठों ने यह सब समान किया। फिर, हमें संदेह है कि इस मीट्रिक को कुछ विशिष्ट यूआई फ्रेमवर्क के उपयोग के माध्यम से प्राप्त किया जा सकता है।

इंटरैक्टिव तत्वों के लिए पाठ लेबल

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

केवल एक चौथाई (24.39%) पृष्ठों में बटन या लिंक का उपयोग होता है जिसमें पाठ लेबल शामिल होते हैं। यदि तत्व में ऐसा कोई टेक्स्ट लेबल नहीं है, तो स्क्रीन रीडर उपयोगकर्ता सामान्य रूप से कुछ पढ़ सकता है, उदाहरण के लिए, शब्द "बटन" और अधिक विशिष्ट "खोज" के बजाय।

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

फार्म तत्वों की उपलब्धता

फॉर्म भरना एक ऐसा काम है जो हम में से कई लोग रोज करते हैं। भले ही हम खरीदारी करते हों, टिकट खरीदते हों या रिज्यूम भेजते हों, लेकिन फॉर्म वेबसाइट पर सूचना प्रसारित करने का मुख्य जरिया हैं। इस वजह से, रूपों को सुलभ बनाना अविश्वसनीय रूप से महत्वपूर्ण है। इसे प्राप्त करने का सबसे आसान तरीका है कि प्रत्येक इनपुट फ़ील्ड के लिए एक नाम निर्दिष्ट करना है <लेबल> टैग या एयरिया -लेबल या एयरिया-लैब्डब्बी विशेषताओं के माध्यम से । दुर्भाग्य से, केवल 22.33% पृष्ठों को सभी फॉर्म इनपुट फ़ील्ड के नाम दिए गए हैं, जिसका अर्थ है कि 5 में से 4 पृष्ठों में ऐसे फ़ॉर्म हैं जिन्हें भरना मुश्किल है

अनिवार्य और गलत तरीके से भरे हुए फील्ड पॉइंटर्स

जब हम एक बड़े लाल तारांकन वाले क्षेत्र से मिलते हैं, तो हम जानते हैं कि इसकी आवश्यकता है। या जब हम "सबमिट" पर क्लिक करते हैं और हमें एक संदेश मिलता है कि गलत डेटा दर्ज किया गया है, तो अलग-अलग रंग में हाइलाइट किए गए सभी फ़ील्ड को सही किया जाना चाहिए, और फॉर्म फिर से भेजा जाएगा। हालाँकि, दृष्टिहीन या नेत्रहीन लोग इन दृश्य संकेतों पर भरोसा नहीं कर सकते हैं, यही कारण है कि HTML विशेषता " आवश्यक " या ARIA विशेषता aria- आवश्यक और aria- अमान्य बहुत महत्वपूर्ण हैं । वे रेड स्टार और फील्ड हाइलाइटिंग के विकल्प के साथ स्क्रीन रीडर प्रदान करते हैं। एक अच्छा बोनस के रूप में, जब आप ब्राउज़र को बताते हैं कि किन फ़ील्ड्स की आवश्यकता है, तो वे स्वयं , जावास्क्रिप्ट का सहारा लिए बिना, भरे हुए खेतों की शुद्धता की जांच करेंगे।

सभी पृष्ठ जिनमें से प्रपत्र मौजूद हैं, 21.73% आवश्यक फ़ील्ड को चिह्नित करते समय आवश्यक या aria- आवश्यक विशेषताओं का उपयोग करते हैं। पांच में से केवल एक ही साइट इसका उपयोग करती है। यह आपकी साइट को सुलभ बनाने और सभी उपयोगकर्ताओं के लिए उपयोगी ब्राउज़र सुविधाओं को अनलॉक करने के लिए एक आसान कदम है।

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

डुप्लीकेशन आई.डी.

दो तत्वों को जोड़ने के लिए आईडी HTML में उपयोगी हो सकती है। उदाहरण के लिए, <लेबल> तत्व इस तरह से काम करता है । आप उस इनपुट फ़ील्ड की आईडी निर्दिष्ट करते हैं जिसे यह लेबल वर्णन करता है और ब्राउज़र उन्हें संबद्ध करता है। परिणाम क्या है? अब उपयोगकर्ता इनपुट क्षेत्र पर ध्यान केंद्रित करने के लिए इस लेबल पर क्लिक कर सकते हैं, और स्क्रीन रीडर इसे विवरण के रूप में उपयोग करेंगे।

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

यह समस्या स्क्रीन पाठकों के लिए और भी अधिक स्पष्ट है, क्योंकि हो सकता है कि उनके उपयोगकर्ता नेत्रहीन जांच न कर सकें कि वास्तव में क्या चुना गया है। इसके अलावा, कई ARIA विशेषताएँ, जैसे कि aria -byby और aria-labelledby , इसी तरह काम करते हैं <लेबल> तत्वऊपर वर्णित है। इस प्रकार, अपनी साइट को सुलभ बनाने के लिए, सभी डुप्लिकेट आईडी को हटाना एक अच्छा पहला कदम है।

निष्कर्ष

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

इसी तरह, सहायक सॉफ्टवेयर न केवल विकलांग लोगों के लिए डिज़ाइन किया गया है, बल्कि रोजमर्रा के काम की सुविधा बढ़ाने के लिए भी बनाया गया है:

• , , , . ,
• , , , . ,
• , ,

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

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

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