सुलभ इंटरफेस का विकास

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

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

कैसे जल्दी और कुशलता से विकसित संसाधनों के बारे में आज के सेन्डी क्राइगर की फ़्रंटेंड कॉन्फ़ पर रिपोर्ट डिकोडिंग है।

वेब का उपयोग

हमारे स्पीकर सेर्नी क्राइगर , सिनस्क्राइडर वेब स्टूडियो के फ्रंट-एंड डेवलपर हैं, जो अलायंस, ऑडी और बीएमडब्ल्यू और अन्य कंपनियों के लिए वेब एप्लिकेशन बनाता है। सर्गेई के मुख्य हित हैं: जावास्क्रिप्ट, इंटरफ़ेस विकास और पहुंच। हम पहुँच क्षमता के बारे में अधिक बात करेंगे।

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

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

हमारी साइटों को सभी उपयोगकर्ताओं के लिए सुविधाजनक बनाने के लिए, हम सीखेंगे कि वास्तविक जीवन के उदाहरणों का उपयोग करके सुलभ वेब इंटरफेस कैसे विकसित किया जाए।

डिज़ाइन

सामान्य विकास प्रक्रिया कैसे बनाई जाती है?

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

अक्सर टीके में पहुंच के बारे में एक शब्द नहीं है और मेरा मानना ​​है कि यह एक समस्या है।

फेडरल स्टेट स्टैटिस्टिक्स सर्विस के अनुसार, दृष्टि समस्याओं के साथ लगभग 1,000,000 लोग हैं। हम ऐसे संसाधन बना रहे हैं, जो एक्सेसिबिलिटी पर ध्यान केंद्रित किए बिना, हम ऐसे संसाधन बना रहे हैं, जिन्हें 1 मिलियन उपयोगकर्ता उपयोग नहीं कर पाएंगे।

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

हम एक मौसम विजेट लगाएंगे जो वर्तमान मौसम और अगले 4 दिनों के लिए पूर्वानुमान दिखाता है। सेटिंग्स में तीन शहरों में से एक में मौसम को देखने का विकल्प होगा।

सुविधा के लिए, हम एक विजेट बनाने की प्रक्रिया को 4 भागों में विभाजित करेंगे:

• बटन लेआउट;
• मोडल विंडो;
• मेनू;
• विजेट विधानसभा।

बटन से शुरू करते हैं।

बटन

इंटरएक्टिव तत्वों में सबसे सरल: यह अत्यधिक स्टाइल है और जावास्क्रिप्ट के साथ अच्छी तरह से काम करता है।

डिजाइनर के लेआउट में, बटन इस तरह दिखता है:



बटन का सामान्य रूप और माध्यमिक।

नीचे पहला लेआउट विकल्प है:


नेत्रहीन, परिणाम लेआउट से मेल खाता है, लेकिन एक उपयोगकर्ता के लिए जो स्क्रीन को अच्छी तरह से नहीं देखता है, पृष्ठ धुंधला दिखाई देगा।

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

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

चरण 1. फोकस

तत्वों के कई राज्य हैं। उनके साथ काम करने के लिए छद्म वर्गों का एक पूरा सेट है, लेकिन हम 3 मुख्य बातों पर विचार करेंगे:

• : होवर - मार्गदर्शन;
• : फोकस - फोकस;
• : सक्रिय - क्लिक करें।

कार्य सरल लगता है - हमारे तत्वों में छद्म वर्गों को जोड़ने के लिए और यह तैयार है, लेकिन एक "लेकिन" है।

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

कभी-कभी ऐसा होता है कि लेआउट में सभी राज्य नहीं होते हैं। अक्सर हमारे पास केवल 2 प्रकार होते हैं: सामान्य और मार्गदर्शन की स्थिति।



पहुंच के लिए यह पर्याप्त नहीं है, लेकिन हम लापता राज्यों को अपने दम पर जोड़ सकते हैं। राज्य पारदर्शिता में भिन्न होते हैं: थोड़ा गहरा या हल्का। पहुंच की समस्या हल हो जाएगी।

यह समझना महत्वपूर्ण है कि पहुंच केवल विकास के बारे में नहीं है। एक्सेसिबिलिटी डिज़ाइन के बारे में और कंटेंट के बारे में और दुनिया की हर चीज़ के बारे में है और पूरी टीम को इससे निपटना चाहिए।

चरण 2. कीबोर्ड

पृष्ठ पर बटन सिर्फ नहीं हैं। जब आप एक बटन पर क्लिक करते हैं, तो एक घटना घटित होनी चाहिए।

एक सुलभ संसाधन पर, माउस के साथ जो कुछ भी किया जा सकता है, उसे कीबोर्ड द्वारा दोहराया जाना चाहिए।

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



प्रलेखन कहता है कि जब आप स्पेसबार दबाते हैं या कीबोर्ड पर एंटर करते हैं तो बटन सक्रिय हो जाता है।

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

नीचे की स्लाइड पर एक सरल काउंटर है, जिसमें दो बटन होते हैं और स्क्रीन पर परिणाम प्रदर्शित करने के लिए एक तत्व होता है।

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

हमने अपने बटनों को फोकस रखना और कीबोर्ड के साथ सही तरीके से काम करना सिखाया। आगे चलते हैं।

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

चरण 3. स्क्रीन रीडर

कल्पना कीजिए कि एक नेत्रहीन या नेत्रहीन व्यक्ति हमारे काउंटर का उपयोग करना चाहता है। वह स्क्रीन नहीं देखता है और उपयोगकर्ता जिस तरह से काउंटर के साथ बातचीत करता है वह एकमात्र स्क्रीन रीडर होगा।

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

हमारे बटन स्क्रीन रीडर के साथ ठीक से काम नहीं करते हैं, लेकिन हम इसे ठीक कर सकते हैं।

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

आइए जानने की कोशिश करते हैं कि अब ऐसा क्यों हो रहा है।

डिफ़ॉल्ट रूप से, स्क्रीन रीडर पाठ को पढ़ता है जो बटन के अंदर स्थित होता है। "रीसेट" बटन के लिए कोड में कोई पाठ नहीं है, लेकिन सिर्फ बटन ही और अंदर का तत्व एक SVG आइकन है।

<button> <svg> <use xlink:href=”#reset”></use> </svg> </button> 

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

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

बटन दबाने के बाद, स्क्रीन रीडर काउंटर के परिणाम को पढ़ेगा। जब हम रीसेट पर क्लिक करके इस मूल्य को फेंक देते हैं, तो हम सुनते हैं कि काउंटर का परिणाम अब 0. है। यह वही है जो हम प्राप्त करना चाहते थे।

इस सरल तरीके से, 3 चरणों के साथ, हमने अपने नियमित बटन उपलब्ध कराए।

मोडल खिड़की

लेआउट में खिड़की का दृश्य:



विंडो लेआउट सरल है: एक निश्चित तत्व, एक क्षैतिज पृष्ठभूमि के साथ क्षैतिज और लंबवत केंद्रित।

हमारे मामले में, मोडल विंडो में दो तत्व होते हैं:

• एक बटन जो एक मोडल विंडो को लाता है;
• सीधे खिड़कियां।

बटन से शुरू करते हैं। यहाँ हमारी मॉडल विंडो का पहला संस्करण है:

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

चरण 1. फोकस

धुंधली स्क्रीन को चालू करें और परीक्षण करें।


ध्यान की गति को ट्रैक करने के लिए आइकन से पहले और बाद में पाठ जोड़ा गया है।

• पहली बार टैब पर क्लिक करें - फोकस पहले तत्व पर जाता है।
• हम दूसरी बार क्लिक करते हैं - और फोकस, आइकन को दरकिनार करते हुए, दूसरी लिंक पर जाता है।

यह स्पष्ट नहीं है कि हमारी मोडल विंडो के साथ कैसे काम किया जाए। मोडल विंडो खोलने के लिए जिम्मेदार आइकन फोकस नहीं रखता है। चलो ठीक है।

हमारा आइकन एक नियमित svg तत्व है:

 <svg viewBox=”0 0 32 32”> <use xlink:href=”#gear”/> </svg> 

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

बटन के फायदे हैं कि यह डिफ़ॉल्ट रूप से फोकस रखता है और अतिरिक्त कार्यों के बिना सभी क्लिक और कीबोर्ड को संसाधित करता है।

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

हम बटन बाहर लगा। आइए परीक्षण करें कि मोडल विंडो फ़ोकस के साथ कैसे काम करती है।

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

समस्या को हल करने के लिए, प्रलेखन पढ़ें।



हरे रंग में फोकस के साथ मोडल विंडो का वर्णन है। पाठ विस्तृत है, लेकिन यहाँ महत्वपूर्ण बिंदु हैं:

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

इस व्यवहार को फ़ोकस-ट्रैप कहा जाता है और जेएस का उपयोग करके या तैयार पुस्तकालयों के साथ कॉन्फ़िगर किया जाता है:

• उडनेस पर मॉडल और कीबोर्ड ट्रैप ;
• पुस्तकालय github पर ।

संपादित विंडो की जाँच करें:

• हम कोड जोड़ते हैं और जांचते हैं कि बटन और मोडल विंडो कैसे काम करते हैं।
• बटन पर ध्यान दें और स्पेस बार पर क्लिक करें - मोडल विंडो खुलती है।
• हम Tab'om पर क्लिक करना जारी रखते हैं - फोकस अंदर रहता है।
• ओके बटन पर क्लिक करें: फोकस आइकन पर जाता है और सब कुछ काम करता है।

हमने अपनी मोडल विंडो को सही तरीके से फोकस के साथ काम करना सिखाया।

चरण 2. कीबोर्ड

यदि हम एक सुलभ मोडल विंडो को लेआउट करते हैं, तो हमें टैब या शिफ्ट + टैब का उपयोग करके इसे अंदर ले जाने में सक्षम होना चाहिए। यदि आप डिफ़ॉल्ट इंटरैक्टिव तत्वों का उपयोग करते हैं, तो आपको भागने से मोडल विंडो को बंद करने के अलावा कुछ भी जोड़ने की आवश्यकता नहीं है, जो हम अब करेंगे।

• हम आइकन पर ध्यान केंद्रित करते हैं।
• स्पेस बार पर क्लिक करें - सब कुछ काम करता है।
• मोडल विंडो के अंदर, काम का अनुकरण करें।
• एस्केप पर क्लिक करें और मोडल विंडो बंद हो जाती है।
• सब कुछ काम करता है।

हमने कीबोर्ड का पता लगाया।

चरण 3. स्क्रीन रीडर

स्क्रीन रीडर पर हमारी मोडल विंडो की जाँच करें:

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

हम अपनी मोडल विंडो को कैसे बेहतर बना सकते हैं? स्क्रीन रीडर के साथ काम करने के लिए प्रलेखन का उपयोग करना, जिसमें विस्तृत निर्देश हैं:



हमें क्या करने की आवश्यकता है:

• भूमिका = "संवाद" मोडल विंडो और aria-modal = "true" विशेषता जोड़ें।
• मोडल विंडो खोलने वाले बटन के लिए, परिचित एरिया-लेबल और एयरिया-विस्तारित विशेषता जोड़ें।

हम परिवर्तन जोड़ते हैं, स्क्रीन रीडर चालू करते हैं और मोडल विंडो का परीक्षण करते हैं:

• बटन पर क्लिक करें। स्क्रीन रीडर कहता है कि मोडल विंडो खुली है।
• यदि हम मोडल विंडो के अंदर टैब दबाते हैं, तो हम सुनेंगे कि हम बटन पर चले गए हैं, और यह बटन खोला गया कंटेंट अब बंद हो गया है।

नोट: यह समझना महत्वपूर्ण है कि संपादन करने के बाद बटन एक मोडल विंडो खोलने का कार्य करता है। पतन नामक एक अतिरिक्त विशेषता प्रकट हुई है, जो कहती है कि यह बटन कुछ ऐसी सामग्री को खोलेगा जो अब छिपी हुई है।

हमने प्रलेखन से निर्देशों का पालन करके एक साधारण मोडल विंडो को एक सुलभ में बदल दिया।

मेन्यू

तीनों के काम का सबसे कठिन हिस्सा जो हमने पहले लगाया था। मेनू लेआउट इस तरह दिखता है:



इससे पहले कि हम मेनू आइटम बनाना शुरू करें, हमें एक बात समझने की जरूरत है: ब्राउज़र में पहले से ही एक तत्व है जो बिल्कुल वैसा ही काम करता है - चुनें। तत्व बहुत अच्छी तरह से काम करता है, लेकिन यह अच्छी तरह से शैली नहीं करता है।

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

डिजाइन के दृष्टिकोण से, यह पूरी तरह से सही नहीं है। डिफ़ॉल्ट चयनित तत्व का लेआउट कस्टम एक के लेआउट की तुलना में कई गुना कम होगा। यदि डिजाइनर समझौता करने के लिए तैयार है, तो हमें डिफ़ॉल्ट को चुनना चाहिए, क्योंकि हमें कोई जेएस नहीं लिखना है, लेकिन केवल सीएसएस के माध्यम से ही स्टाइल करना है। औसत डेवलपर के लिए, यह परीक्षण के साथ-साथ 15-30 मिनट का काम है।

यदि डिजाइनर मेनू को ठीक वैसे ही देखना चाहता है, जैसा कि उसने इसे आकर्षित किया है, तो समस्या को हल करने का एकमात्र तरीका मैन्युअल टाइपसेट है।

विशेष कठिनाई के काम का प्रतिनिधित्व नहीं करता है:

• एक आइटम का चयन करें;
• हम पर क्लिक करें;
• मेनू समाप्त हो जाता है;
• कुछ चुनें और देखें कि अप / डाउन एरो बदल जाता है।

यह सुलभता के लिए पर्याप्त नहीं है। एक आइटम उपलब्ध कराने के लिए, हमें कुछ चीजों को फिर से जांचना होगा।

चरण 1. फोकस

चलिए शुरू करते हैं, हमेशा की तरह फोकस के साथ। स्क्रीन ब्लर चालू करें और प्रयास करें:

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

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

चयनित वर्ग के साथ ब्लॉक में है:

• चयन-बीटीएन वह तत्व है जिस पर हम मेनू खोलने के लिए क्लिक करेंगे।
• सूची ही, जो या तो खुली या बंद होगी।

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

हम उस तत्व को क्यों नहीं बनाते जो हम नियमित बटन के साथ बनाते हैं?

पिछले उदाहरणों से, हम जानते हैं कि इस स्थान पर बटन लगाने पर, हमें अतिरिक्त कार्यों के बिना फ़ोकस और कीबोर्ड दोनों मिलते हैं।

हम कोड को बदलते हैं, शैलियों को थोड़ा जोड़ते हैं, और हम देखते हैं कि अब हमारा मेनू आइटम फोकस के साथ काम कर सकता है।

चरण 2. कीबोर्ड

आइए आगे बढ़ते हैं और कीबोर्ड के साथ काम करने के लिए हमारे तत्व को सिखाते हैं।



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

• हैंडलर जोड़ें;
• बटन पर स्विच करें और स्पेसबार दबाएं - सब कुछ काम करता है।
• हम तीर दबाते हैं, किसी अन्य शहर को चुनते हैं - सब कुछ भी काम करता है।

कीबोर्ड समर्थन का कार्य हल किया गया है: जेएस-हैंडलर्स को तीर पर लटका दिया गया है।

चरण 3. स्क्रीन रीडर

स्क्रीन रीडर चालू करें और देखें कि इसकी मदद से हमारा मेनू कैसे पढ़ा जाएगा:

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

स्क्रीन रीडर के साथ काम करने के लिए मेनू के लिए, आपको हमारी मॉडल विंडो में कुछ विशेषताओं को जोड़ने की आवश्यकता है:

• भूमिका = "सूची बॉक्स" - यह चयन के समान है - सूची से कुछ का चयन करना संभव बनाता है;
• भूमिका = "विकल्प" - प्रत्येक मेनू आइटम के लिए विवरण;
• aria-live = "विनम्र" एक विशेषता है जिसे हम पहले से जानते हैं। सभी उपयोगकर्ताओं से छिपाएँ, लेकिन इसे स्क्रीन रीडर तक पहुँचा जा सकता है।

यदि आप सभी विशेषताओं को जोड़ते हैं, तो मेनू आइटम के माध्यम से आगे बढ़ने पर स्क्रीन रीडर हमें बताएगा कि हम किस तत्व पर हैं।

काम का सत्यापन:

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

मौसम विजेट विधानसभा

हमने सभी इंटरैक्टिव तत्वों को रखा जो हमारे मौसम विजेट में हैं और सब कुछ एक साथ रखा है। तो विजेट लेआउट में दिखता है:



कुछ तत्वों के लिए फ्लेक्स-बॉक्स या पूर्ण स्थिति पर प्रकार।

हमने पहले ही विजेट में लगभग सभी तत्वों पर काम किया है, और अधिकांश कोड पहले ही लिखे जा चुके हैं, इसे इकट्ठा करना बाकी है


जेएस के नजरिए से, हमें दो काम करने होंगे:

1. मौसम को सर्वर से लेने के लिए विजेट सिखाएं;
   
2. एक सफल सर्वर प्रतिक्रिया पर, DOM तत्वों को अपडेट करें।
   

सर्वर के साथ काम करना एक अलग मुद्दा है, लेकिन यह कोई समस्या नहीं है।

विजेट पूरी तरह से सुलभ होने के लिए, हमें कई बिंदुओं को ध्यान में रखना चाहिए।

माउस

हमें अपने आइकॉन को पढ़ने के लिए स्क्रीन रीडर सिखाना होगा, क्योंकि विजेट में जानकारी 3 भागों में होती है:

• हमारे द्वारा चुना गया स्थान इस मामले में बर्लिन शहर है;
• तापमान;
• मौसम का वर्णन , जो आइकन के रूप में स्क्रीन पर है। हम सूरज देखते हैं, और हम समझते हैं कि आज कोई बारिश नहीं है, लेकिन उपयोगकर्ता को यह नहीं पता है, क्योंकि स्क्रीन रीडर ऐसी जानकारी नहीं पढ़ता है।

संक्षिप्त रूपों

मौसम के पूर्वानुमान के माध्यम से चलते समय, संक्षिप्तीकरण जिसे हम बिना किसी कठिनाई के पढ़ सकते हैं, उदाहरण के लिए, बुधवार - WED - बुधवार को कानों से खराब माना जाता है। आपकी सुविधा के लिए, हमने सप्ताह के पूरे दिनों को हमारे संक्षिप्त रूपों में जोड़ दिया है।

शहर लोडिंग

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

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

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

सुधार की सामान्य सूची

• H3 - नेविगेशन के लिए शीर्षक;
• आरिया-लेबल - तत्वों के लिए आवश्यक विवरण;
• आरिया-लाइव - एक विशेषता जिसे हमने मेनू आइटम में पहले से ही उपयोग किया था ताकि स्क्रीन रीडर को अनुरोध की स्थिति का उच्चारण करने के लिए सिखाया जा सके: लोड करना, या तो यह विफल हो गया या विफल हो गया।

आइए देखें कि स्क्रीन विजेट के साथ हमारे विजेट का वर्तमान संस्करण कैसे काम करता है:

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

हमने एक ऐसा विजेट बनाया, जो न केवल स्क्रीन को देखने वाले उपयोगकर्ताओं के लिए अच्छा है और काम करता है, बल्कि विकलांग लोगों के लिए कीबोर्ड या स्क्रीन रीडर का उपयोग करके भी सुलभ है।

निष्कर्ष

अभिगम्यता के लिए 3 कदम। विजेट को सामान्य से उपलब्ध में स्थानांतरित करने के लिए, हमने मानक लेआउट लेआउट प्रक्रिया में 3 चरण जोड़े:

1. हमने विज़ुअल एलिमेंट्स को विज़िबल होना सिखाया, यानी दृष्टिबाधित उपयोगकर्ताओं के लिए फोकस के साथ काम करना।
   
2. दूसरे चरण में, हमने कीबोर्ड के साथ काम करने के लिए विजेट सिखाया, ताकि मोटर की समस्या वाले उपयोगकर्ता मौसम का भी पता लगा सकें।
   
3. अंतिम चरण - हमने उन लोगों के लिए स्क्रीन रीडर के साथ काम करने के लिए विजेट को प्रशिक्षित किया, जो स्क्रीन को बिल्कुल नहीं देखते हैं।
   

डिजाइन, सामग्री और यौगिक शब्द। पहुंच का विषय फोकस, कीबोर्ड और स्क्रीन रीडर के साथ काम करने तक सीमित नहीं है - यह बहुत व्यापक है। पहुंच का विषय है:

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

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

प्रलेखन। मैं आपको साइट w3.org पर एक्सेसिबिलिटी पर विस्तृत दस्तावेज का उपयोग करने की सलाह देता हूं। प्रत्येक तत्व के लिए प्रलेखन में, एक्सेसिबिलिटी के लिए आवश्यकताएं निर्धारित हैं। साइट को संदर्भ के रूप में इस्तेमाल किया जा सकता है, लेकिन, दुर्भाग्य से, सभी जानकारी अंग्रेजी में है।



रूसी भाषा के खंड में एक समान वेबसाइट weblind.ru है ।



साइट सार्वजनिक डोमेन में है और यदि आपके पास पहुंच के विषय पर जोड़ने के लिए कुछ है, तो आप गिटहब पर जा सकते हैं और इस जानकारी को साइट पर जोड़ सकते हैं।

सर्गेई क्राइगर के संपर्क और रिपोर्ट में एक इंटरैक्टिव प्रस्तुति का लिंक ।

महत्वपूर्ण!

हमारे यूट्यूब चैनल पर, हमने RIT ++ त्योहार के हिस्से के रूप में फ्रंटेंड कॉन्फ की सभी रिपोर्टों का एक वीडियो खोला - यहां उनमें से सबसे अच्छा के साथ एक प्लेलिस्ट है।

फ्रंट-एंड डेवलपर्स के लिए हमारा अगला सम्मेलन मई में RIT ++ उत्सव के भाग के रूप में आयोजित किया जाएगा। उसकी प्रतीक्षा करते हुए, समाचार पत्र की सदस्यता लें और हम आपको नई सामग्री, 2018 के लिए सर्वश्रेष्ठ रिपोर्ट, साथ ही भाषणों की घोषणाओं और आगामी सम्मेलन की अन्य खबरें भेजेंगे।

सदस्यता लें और हमारे साथ रहें, यह दिलचस्प होगा :)