अंधे उपयोगकर्ताओं के लिए ड्रॉप - ड्रॉप घटक? क्या तुम मजाक कर रहे हो?

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



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

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

स्लाइडर

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



हमारा काम यह कल्पना करना है कि हम इस साइट के डेवलपर हैं। आइए इन स्लाइडर्स को फिर से बनाने की कोशिश करें और देखें कि वे अलग-अलग मामलों में कैसे काम करते हैं।

देशी स्लाइडर

सोचने वाली पहली बात यह है कि क्या देशी तत्वों का उपयोग हमारी कार्यक्षमता के लिए किया जा सकता है? यदि ऐसा कोई अवसर है, तो हम इस तरह से चलते हैं, क्योंकि देशी तत्व बहुत समय बचाएंगे।

आइए एक सरल उदाहरण बनाते हैं: स्लाइडर ट्रैक के साथ चलता है और स्लाइडर का मूल्य बदलता है। स्लाइडर को दाईं ओर ले जाएं - स्क्रीन का रंग सफेद से चमकीले गुलाबी में बदल जाता है, यदि पीछे - फिर से सफेद।



स्लाइडर बस काम करता है - ट्रैक के साथ स्लाइडर स्लाइड और स्लाइडर कुछ मूल्य देता है।

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

: : -webkit-slider-runnable-track : : -webkit-sHder-thumb : : -moz-range-track : : -moz-range-thumb : : -ns-track :-ms-thumb : : -ms-fill-lower : : -ms-fill-upper 

आप गुणों का उपयोग मैन्युअल रूप से कर सकते हैं, लेकिन यह एक तुच्छ कार्य नहीं है। गुण विभिन्न ब्राउज़रों में काम करते हैं, और परीक्षण में बहुत समय लगेगा।

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

स्लाइडर परीक्षण

समस्या को अंत तक हल करने के लिए - हम परीक्षण करते हैं। इसके अलावा हम तीन मापदंडों में न केवल स्लाइडर, बल्कि अन्य तत्वों का भी परीक्षण करेंगे।

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

नोट: इसके बाद वीडियो रिकॉर्डिंग पर रीडिंग और व्यूइंग को मिलाना अधिक सुविधाजनक है - यह अधिक स्पष्ट है। स्लाइडर का परीक्षण करने वाला एक वीडियो सेगमेंट सही समय से शुरू होगा।


मूषक । हम स्लाइडर से चिपके रहते हैं, दाएं और बाएं खींचते हैं। अगर सब कुछ बदल जाता है - महान।

कीबोर्ड। स्लाइडर पर जाने के लिए टैब कुंजी का उपयोग करें, और इसे ट्रैक पर ले जाने के लिए तीरों का उपयोग करें।

स्क्रीन रीडर । यह यहाँ और अधिक जटिल है। कल्पना करें कि हम स्क्रीन नहीं देखते हैं - स्क्रीन पर प्रकाश बंद करें और स्क्रीन रीडर चालू करें। वह कहता है:

- Chrome में VoiceOver चालू है ।

टैब कुंजी का उपयोग करते हुए, स्लाइडर पर जाएं।

- शून्य। स्टाइलिस्ट स्लाइडर आवेदन।

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

- एक, दो, तीन, चार, पांच।

यदि हम उलटी गिनती सुनते हैं, तो सब कुछ काम करता है। प्रकाश चालू करें और परिणाम की जांच करें। परीक्षण खत्म हो गया है।

ऐसा लगता है कि हमने कुछ नहीं किया, लेकिन बस स्लाइडर को स्टाइल किया। एक्सेसिबिलिटी पर हमारा काम क्या है? इस तथ्य का तथ्य यह है कि कोई काम नहीं था - हमने मूल तत्व का उपयोग किया।

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

कस्टम स्लाइडर

मान लीजिए कि देशी स्लाइडर हमारा विकल्प नहीं है। आइए Aviasales कोड को देखें और देखें कि यहां वे स्लाइडर्स नहीं हैं जिन्हें हमने अभी परीक्षण किया है।



यह प्रकार range साथ एक input नहीं है, लेकिन डिजाइनर द्वारा वांछित के रूप में div का एक सेट है। ऐसा लगता है कि कोई अंतर नहीं है, सब कुछ काम करता है।

हम इसकी जाँच करेंगे और इसी तरह मैन्युअल रूप से स्लाइडर बनाकर कार्य को जटिल करेंगे। ट्रैक के साथ स्लाइडर को स्थानांतरित करने की कुंजी पूर्ण स्थिति है:

 position: absolute 

हम स्लाइडर को ट्रैक के सापेक्ष स्थिति देते हैं और, इसकी स्थिति के आधार पर, स्लाइडर के मूल्य की गणना करते हैं।

माउस के साथ एक तत्व को पकड़ने के क्षण को निर्धारित करने के लिए, हम mousedown इवेंट का उपयोग करते हैं। घटना के आंदोलन को ट्रैक करने के लिए - mouseup , और mouseup हमें बताएगा कि हमने स्लाइडर जारी किया। टच स्क्रीन के लिए, हम कई घटनाओं का भी उपयोग करेंगे: touchstart , touchend और touchend ।

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

परीक्षण कस्टम स्लाइडर

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

"समूह" वह है जो स्क्रीन रीडर आवाज़ करता है जब यह एक div या अन्य तत्व को पढ़ता है जिसमें कोई शब्दार्थ भूमिका नहीं होती है। कोई भी शब्द जो स्लाइडर को संदर्भित नहीं करता है, कहता है कि पहुँच अभी तक प्राप्त नहीं हुई है। स्लाइडर को उपलब्ध करने के लिए, हम ARIA विशेषताओं का उपयोग करते हैं:

 <div class="thumb" tabindex="0"    role="slider"    aria-labl=""    aria-valuenow="5"    aria-valuemin="0"    aria-valuenax="10" ></div> 

हमें स्क्रीन रीडर को यह बताने की आवश्यकता है कि हमारा सामान्य शैली तत्व एक स्लाइडर है। हम मूल्य slider साथ role का उपयोग करके ऐसा करेंगे। फिर aria-labl का उपयोग करके स्लाइडर को नाम दें। हम स्लाइडर का वर्तमान मूल्य, स्लाइडर का न्यूनतम और अधिकतम मूल्य निर्धारित करते हैं। इन पांच ARIA विशेषताओं का उपयोग करके, हम स्लाइडर को एनिमेट करेंगे और स्क्रीन रीडर को कहेंगे कि हमें क्या चाहिए।

मार्कअप, जावास्क्रिप्ट और एआरआईए तत्वों का उपयोग करते हुए, हमने कस्टम स्लाइडर को सभी उपयोगकर्ताओं के लिए उपलब्ध कराया।

छंटाई

ड्रैग - एंड - ड्रॉप घटकों को लागू करने के लिए एक और तरीका है। अक्सर साइटों में उन वस्तुओं की सूची होती है जो क्रमबद्ध होती हैं।



ऊपर Google Keep वेबसाइट का एक स्क्रीनशॉट है - यह एक सेवा है जो आपको टू-डू सूची, टू-डू शीट बनाने की अनुमति देती है। ए-टू शीट में एक नाम, तत्वों की एक सूची, प्रत्येक तत्व को चिह्नित करने की क्षमता, इसे हटाने और एक नया जोड़ने की क्षमता है। हमारा कार्य इस कार्यक्षमता को फिर से बनाना है।

यह क्या करना है सूची विजेट की तरह दिखता है।



यह है:

• नाम - टू-डू सूची;
  
• तत्व: कुत्ते के साथ चलते हैं, डॉक्टर के साथ एक नियुक्ति करते हैं, जिसे नोट या हटाया जा सकता है;
  
• नए तत्वों को जोड़ने की क्षमता - एक कार्य जोड़ें।
  

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

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

लेकिन सभी तत्वों को draggable विशेषता की आवश्यकता नहीं है। चित्र और लिंक की आवश्यकता नहीं है - वे डिफ़ॉल्ट रूप से ड्रैग और ड्रॉप होते हैं।

केवल अगर हम इस कार्यक्षमता को रद्द करना चाहते हैं, तो हम false मान के साथ draggable करने योग्य सेट करेंगे।

डेटा ट्रांसफर

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



चित्र को पकड़ो और ड्रॉप-ज़ोन की ओर खींचें। यह परिचित कार्यक्षमता: हम चित्र को ड्रैग ज़ोन में दर्ज कर सकते हैं, जब बाहर निकलते हैं - चित्र अंदर होता है। हम अपनी टू-डू सूची में समान कार्यक्षमता चाहते हैं।



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

घसीटे गए आइटम पर तीन घटनाएं होती हैं।

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

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

जब हम माउस के साथ किसी आइटम को छोड़ते हैं, तो वह खींचता है ।

एक तत्व जो अन्य तत्वों को स्वीकार करता है, चार घटनाओं में आग लग जाती है।

ड्रैगेंटर - अलर्ट जब हम किसी आइटम को दूसरे आइटम के अंदर खींचते हैं।

ड्रैगओवर - कहते हैं जब हम इसे अंदर ले जाने लगते हैं।

ड्रैगलीव - जब हम माउस को छोड़े बिना एक तत्व को किसी अन्य तत्व की सीमाओं से परे ले जाते हैं ।

ड्रॉप सबसे महत्वपूर्ण घटना है जो जब हम प्राप्त तत्व के अंदर माउस को छोड़ते हैं तो आग लग जाती है।

ये सभी 4 घटनाएं केवल तत्व की गति के लिए पूर्वापेक्षाएँ हैं - वे स्वयं कुछ नहीं करते हैं। उनका उपयोग करके, आप एक तत्व के आंदोलन को तय कर सकते हैं। हम इसे इस तरह करते हैं:

 draggable.addEventListener("dragstart", e => { e.dataTransfer.setData("text/plain", e.target.id); }); dropZone.addEventListener("drop", e => { const id = e.dataTransfer.getData("text/plain"); const el = document.getElementById(id); }); 

हम मैन्युअल रूप से उस घटना में डेटा जोड़ सकते हैं जो उस तत्व पर शुरुआत में आग लगाती है जिसे हम खींच रहे हैं। dataTransfer.setData पद्धति का उपयोग करते dataTransfer.setData , हम उस आइटम के चयनकर्ता को जोड़ते हैं जिसे हम खींच रहे हैं। हमारे मामले में, यह id ।

अंत में, जब ड्रॉप इवेंट को प्राप्त करने वाले तत्व पर ट्रिगर किया जाता है, तो हमें यह डेटा dataTransfer.getData विधि का उपयोग करके मिलता है। यह पता चला है कि हमारे पास id तत्व की id होगी जिसे हम स्थानांतरित करना चाहते हैं। अगला, साधारण जावास्क्रिप्ट का उपयोग करते हुए, पृष्ठ पर इस तत्व का चयन करें और इसे कहीं भी स्थानांतरित करें। हम हाथ से चलते हैं। इसे संभव बनाने के लिए, हम ड्रैग और ड्रॉप एलिमेंट पर घटनाओं का उपयोग करते हैं।

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

यदि हम दूसरों को स्वीकार करने के लिए तत्व को सिखाना चाहते हैं, तो हमें dragenter और dragenter पर dragenter e.preventDefault() विधि का उपयोग करके इस मान को रद्द करना होगा, जो dropZone तत्व पर आग dropZone है।

 dropZone.addEventListener("dragenter", e => { e.preventDefault(); }); dropZone.addEventListener("dragover«, e => { e.preventDefault(); }); 

मैंने विभिन्न ब्राउज़रों में इस संयोजन का परीक्षण किया। उदाहरण के लिए, क्रोम में केवल dragenter काम करता है, इसलिए क्रॉस-ब्राउज़र समाधान के लिए dragenter और dragenter दोनों का उपयोग करें।

आइए देखें कि यह टू-डू सूची पर कैसे काम करता है।



हमारा काम परिचित आइटम को अंतिम स्थिति में पहली स्थिति में खींचना है। एक तत्व पर होवर और 6 ऊर्ध्वाधर डॉट्स वाला एक तत्व बाईं ओर दिखाई देता है। UX की दुनिया में, इसका मतलब है कि आप इसे खींच सकते हैं।



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



अब हम कीबोर्ड को सिखाएंगे, और फिर स्क्रीन रीडर को सही तरीके से प्रोसेस करने के लिए जो हमने अभी किया है।

कीबोर्ड

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

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

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



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

स्क्रीन रीडर

कीबोर्ड के साथ सब कुछ स्पष्ट है। हमने समस्या को लगभग हल कर दिया है। यह स्क्रीन रीडर को क्रियाओं का उच्चारण करना सिखाता है। सभी की जरूरत है कि निर्देश जोड़ना है ताकि स्क्रीन रीडर को पता हो कि क्या हो रहा है: यह कहां है और क्या करना है।

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

 <div class="live-region visually-hidden"    aria-live="polite"    role="status" ></div> 

 const liveRegion = document.querySelector(".live-region«); liveRegion.textContent = ' '; 

मैंने aria-live विशेषता को polite मूल्य के साथ polite नियमित रूप से खाली div और एक status मान के साथ role निर्धारित किया है। स्क्रीन रीडर के लिए, यह एक तत्व को सुनने के लिए एक संकेत है। जब आप स्क्रीन रीडर को कुछ कहना चाहते हैं, तो जावास्क्रिप्ट का उपयोग करके सामग्री को अपडेट करें, और स्क्रीन रीडर उस सामग्री को कहेगा।

आइए देखें कि यह कैसे काम करता है।


हमारा काम पहले तत्व को अंतिम स्थिति में ले जाना है। स्क्रीन पर प्रकाश बंद करें, स्क्रीन रीडर चालू करें।

- Chrome में VoiceOver चालू है।

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

- हेडिंग लेवल दो। करने के लिए सूची।

मिल गया। हम टैब कुंजी पर क्लिक करना जारी रखते हैं।

- ऑब्जेक्ट सूची 3. तत्व "कुत्ते के साथ चलो" का चयन करने के लिए "एंटर" कुंजी दबाएं। समूह।

सबसे पहले, स्क्रीन-रीडर सूची में तत्वों की संख्या का उच्चारण करता है, ताकि उपयोगकर्ता समझ सकें कि सूची में कितने तत्व हैं। फिर वह एक निर्देश देता है - किसी आइटम का चयन करने के लिए क्या करना है: "Enter कुंजी और इस घटक का नाम दबाएं। यह स्पष्ट हो गया कि क्या करना है - Enter कुंजी दबाएं।

- "कुत्ते के साथ चलो" तत्व चुना गया है। ले जाने के लिए ऊपर और नीचे कुंजियों का उपयोग करें। अचयनित करने के लिए Esc कुंजी का उपयोग करें।

यह इन निर्देशों के बारे में था जो मैंने बात की थी: जब आप एक तत्व का चयन करते हैं, तो स्क्रीन रीडर उन निर्देशों को देता है जो हम साथ आए थे। हम स्क्रीन रीडर को अपडेट करते हैं और यह उस टेक्स्ट का उच्चारण करता है जिसे हमने लाइव रीजन एलिमेंट में रखा है। निर्देशों के साथ, यह स्पष्ट है कि क्या करना है - रद्द करने के लिए ऊपर / नीचे और Esc कुंजियों का उपयोग करें। एक स्थिति नीचे ले जाएँ।

- तत्व "कुत्ते के साथ चलो" को स्थिति 2 में ले जाया जाता है।

एक बार और।

- तत्व "कुत्ते के साथ चलो" को स्थिति 3 में ले जाया जाता है।

आइटम सूची के अंत में है। प्रकाश चालू करें और जांचें कि क्या तत्व वास्तव में अंतिम स्थिति में है।

प्रेस "Esc" को अचयनित करें।

- "कुत्ते के साथ सैर करें" आइटम का चयन रद्द कर दिया गया है।

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

विस्थापन

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



इस घटक को कैसे उपलब्ध कराया जाए, यह जानने के लिए ट्रेलो के सरलीकृत संस्करण का अनुकरण करें। मेरे संस्करण में तीन कॉलम हैं: "मैं करूंगा", "मैं करता हूं", "पूरा"।



कार्य को एक स्थान से दूसरे स्थान पर खींचा जा सकता है: माउस के साथ घटक को पकड़ो, इसे अगले कॉलम पर खींचें, इसे जारी करें - यह वहीं रहता है।

कीबोर्ड

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

हम अन्यथा करेंगे। टैब कुंजी दबाएं, फोकस पहले तत्व पर जाता है। कुंजी को फिर से दबाएं, और एक नया तत्व दिखाई देता है जो तब तक छिपा हुआ था जब तक कि इसमें ध्यान केंद्रित नहीं हुआ।



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

हम जावास्क्रिप्ट का उपयोग करके समस्या को हल करेंगे, लेकिन उपयोगकर्ताओं को यह चुनने का अवसर देंगे कि वे किस स्तंभ को इस या उस कार्य को स्थानांतरित करना चाहते हैं।



हम अंतिम कॉलम पर जाते हैं, "एंटर" दबाएं, और सब कुछ काम किया - तत्व जहां हम चाहते थे, वहां चले गए।

स्क्रीन रीडर

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


स्क्रीन पर प्रकाश बंद करें, स्क्रीन रीडर चालू करें।

- Chrome में VoiceOver चालू है।

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

- "बनाओ": "प्ले सॉकर" बटन, समूहों के ध्वस्त पॉप-अप बटन का चयन करें।

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

हमारा काम सूची से वांछित कॉलम का चयन करना है।

- शून्य नहीं, करो। कॉलम पॉप-अप, बटन का चयन करें। स्क्रीन पर आपकी वर्तमान स्थिति ... "डूइंग।" "हो गया" ... आइटम "फ़ुटबॉल" को कॉलम "डन" पर ले जाया गया है।

यह वह पाठ है जिसे हमने उपयोगकर्ताओं को सूचित करने के लिए मैन्युअल रूप से जोड़ा है कि हमने यह किया। इसी तरह से हमारा टास्क बोर्ड काम करता है।

फाइलें अपलोड करें

फ़ाइल अपलोड की कार्यक्षमता साइटों पर भी पाई जाती है, उदाहरण के लिए, ईमेल को फाइलें संलग्न करने के लिए। इसलिए, मेरे उदाहरण में, ईमेल जीमेल है।



स्क्रीन पर धराशायी लाइन के साथ एक तत्व है। यह वह जगह है जहाँ हम अपनी फ़ाइलों को खींचेंगे।



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

कीबोर्ड

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



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

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

स्क्रीन रीडर

"चयन" तत्व काम करेगा और हम अभी भी ओएस के साथ एक संवाद बॉक्स खोल सकते हैं। , screen reader .


screen reader. , .

— button application.

screen reader.

— button. … image.png. 31 … 0%… 16% … 73% … 100% . image.png .

? , , . , screen reader , . , , .

, screen reader . — 10%, 20%...100%. , , , .

Live region, . screen reader, , ARIA Live, screen reader . .

सारांश

. — . , , screen reader. , , .

HTML + JavaScript + ARIA . Drag-&-Drop , JavaScript ARIA. , .

« » . , « »: , , , , .

. : , , .

, W3.org — . .

, , inclusive-components.design . . , , , , , .

. , , « ». — . .

. , — Medium . , . , . , , . . , .

. FrontendConf ++ . FrontendConf 2019 Leonie Watson — , W3C W3C -. Leonie screen reader. , , , , .

FrontendConf , . , .