स्वागत! मेरी Vuejs एम्स्टर्डम सम्मेलन 2022 सारांश श्रृंखला के पांचवें भाग में आपको देखकर खुशी हुई, जिसमें मैं आपके साथ सभी वार्ताओं का सारांश साझा करता हूं।

आप मेरी जेएसवर्ल्ड सम्मेलन 2022 सारांश श्रृंखला (चार भागों में) यहां पढ़ सकते हैं, जहां मैंने पहले दिन की सभी वार्ताओं का सारांश दिया था। आप मेरे ब्लॉग में Vue एम्स्टर्डम सम्मेलन 2022 की पिछली वार्ता भी पा सकते हैं।

(आवर्ती) परिचय

ढाई साल के बाद, 1 और 3 जून के बीच JSWorld और Vue एम्स्टर्डम सम्मेलन थिएटर एम्स्टर्डम में वापस आ गए, और मुझे पहली बार इस सम्मेलन में भाग लेने का मौका मिला। मैंने बहुत सी चीजें सीखीं, कई अद्भुत लोगों से मुलाकात की, महान डेवलपर्स के साथ बात की, और बहुत अच्छा समय बिताया। पहले दिन JSWorld सम्मेलन आयोजित किया गया था, और दूसरे और तीसरे दिन, Vue एम्स्टर्डम।

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

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

एक बहुत ही महत्वपूर्ण बिंदु

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

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

यहां आप सम्मेलन का कार्यक्रम देख सकते हैं।

पुन: प्रयोज्य विजेट जो काम करते हैं!

मारिया लैमार्डो - सीवीएस हेल्थ में एक्सेसिबिलिटी ट्रेनिंग के प्रमुख और एक्सेसिबिलिटी इंजीनियरिंग के सीनियर मैनेजर

Vue.js एक अद्भुत ढांचा है जो आपको पुन: प्रयोज्य घटकों को जल्दी से बनाने की अनुमति देता है। हम ARIA (एक्सेसिबल रिच इंटरनेट एप्लिकेशन) की मदद से सुलभ पुन: प्रयोज्य विजेट बनाने के लिए इसका लाभ उठा सकते हैं। ARIA भूमिकाओं और विशेषताओं का उपयोग करके, हम अतिरिक्त शब्दार्थ प्रदान करके कुछ तत्वों की पहुंच में सुधार कर सकते हैं। इस वार्ता में, हम विनिर्देशों का पालन करने और सभी के लिए काम करने वाले सुलभ और पुन: प्रयोज्य टैब, अकॉर्डियन, टॉगल बटन और मोडल डायलॉग बनाने के तरीके के बारे में जानेंगे!

मॉडल

ARIA के बारे में वे सभी चीज़ें जो आपको जानने की ज़रूरत है, W3C में अच्छी तरह से प्रलेखित हैं और इसे पढ़ने की अनुशंसा की जाती है, लेकिन यहाँ इसका एक सार संस्करण है।

मॉडल डिजाइन विचार

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

मोडल ओपनिंग फोकस इंटरेक्शन

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

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

मोडल क्लोजिंग फोकस इंटरेक्शन

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

मोडल कीबोर्ड इंटरेक्शन

मॉडल तकनीकी विचार

डायलॉग कंटेनर में होना चाहिए:

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

संवाद को संचालित करने के लिए आवश्यक सभी तत्व उस तत्व के वंशज होने चाहिए जिसकी संवाद भूमिका है।

 <div role="dialog" aria-modal="true" aria-labelledby="title" aria-describedby="description" > <h2 id="title">Title of the dialog</h2> <p id="description">Information provided by the dialog.</p> <button aria-label="close">×</button> </div>

मैक पर, आप कमांड + F5 पर क्लिक करके वॉयस ओवर को सक्रिय कर सकते हैं जो कि डिफ़ॉल्ट मैक स्क्रीन रीडर है, और फिर आप अपने पेज पर जा सकते हैं और इसका परीक्षण कर सकते हैं।

क्रोम देव-टूल्स में भी एक एक्सेसिबिलिटी टैब होता है जिसमें कुछ कूल एक्सेसिबिलिटी जानकारी होती है।

इसके साथ, आप इस उदाहरण को खोल सकते हैं और इसे देख सकते हैं, और यहां कोड है।

टॉगल बटन

यदि आप पूरी जानकारी चाहते हैं तो आप इसे W3C वेबसाइट पर पा सकते हैं।

बटन

एक बटन एक विजेट है जो उपयोगकर्ताओं को एक क्रिया या घटना को ट्रिगर करने में सक्षम बनाता है, जैसे कि एक फॉर्म जमा करना, एक संवाद खोलना, एक क्रिया को रद्द करना, या एक डिलीट ऑपरेशन करना।

सामान्य बटन विजेट के अलावा, WAI-ARIA 2 अन्य प्रकार के बटनों का समर्थन करता है:

• टॉगल बटन
• मेनू बटन

टॉगल बटन डिजाइन विचार

एक दो-राज्य बटन जिसे या तो बंद किया जा सकता है (दबाया नहीं जा सकता) या चालू (दबाया) जा सकता है।

सहायक तकनीकों को यह बताने के लिए कि एक बटन एक टॉगल बटन है, विशेषता aria-pressed के लिए एक मान निर्दिष्ट करें।

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

टॉगल बटन फोकस हैंडलिंग

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

टॉगल बटन कीबोर्ड इंटरेक्शन

टॉगल बटन तकनीकी विचार

• टॉगल बटन में बटन की भूमिका होनी चाहिए।

• सुनिश्चित करें कि बटन का एक सुलभ नाम है।

• आप किसी भी विवरण के लिए एरिया-डिस्क्राइब बाय सेट कर सकते हैं।

• यदि क्रिया अनुपलब्ध है, तो आप एरिया-अक्षम सेट को सत्य में जोड़ सकते हैं।

• टॉगल बटन में एरिया-प्रेस्ड अवस्था होती है।

  
  

 <button aria-pressed="false"> Mute </button>

यहां एक अच्छा उदाहरण है जिसे आप देख सकते हैं और यहां कोड है।

accordions

यहां पूरा दस्तावेज है। आइए एक नजर डालते हैं इसके मुख्य बिंदुओं पर।

Accordions डिजाइन विचार

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

अकॉर्डियन हैडर:

सामग्री के किसी अनुभाग का प्रतिनिधित्व करने वाला लेबल या थंबनेल जो सामग्री के अनुभाग को दिखाने के लिए और कुछ कार्यान्वयनों में नियंत्रण के रूप में भी कार्य करता है।

अकॉर्डियन पैनल:

एक अकॉर्डियन हेडर से संबद्ध सामग्री का अनुभाग।

अकॉर्डियन कीबोर्ड इंटरेक्शन

Accordions तकनीकी विचार

सुनिश्चित करें कि प्रत्येक अकॉर्डियन हेडर बटन में है:

• एक शीर्षक में लिपटे
• aria-नियंत्रण संबंधित अकॉर्डियन पैनल सामग्री की आईडी पर सेट है
• यदि संबंधित पैनल सामग्री दिखाई दे रही है तो एरिया-विस्तारित सत्य पर सेट करें
• यदि ढहने वाले अकॉर्डियन की अनुमति नहीं है तो aria-अक्षम सही पर सेट करें
• प्रत्येक पैनल सामग्री में संबंधित शीर्षलेख बटन के अनुसार भूमिका क्षेत्र और एरिया-लेबल होता है (वैकल्पिक)
• उन परिस्थितियों में क्षेत्र की भूमिका का उपयोग करने से बचें जो बहुत अधिक ऐतिहासिक क्षेत्र बनाती हैं

अकॉर्डियन कोड उदाहरण

 <h3> <button aria-expanded="true" class="Accordion-trigger" aria-controls="sect1" id="accordion1id" > Accordion 1 </button> </h3>

 <div id="sect1" role="region" aria-labelledby="accordion1id" class="Accordion-panel" > Content Placeholder </div>

यहां एक अच्छा उदाहरण और उसका कोड है।

टैब

आप W3C पर Tabs का पूरा दस्तावेज़ीकरण देख सकते हैं।

टैब डिजाइन विचार

टैब सामग्री के स्तरित अनुभागों का एक समूह है, जिसे टैब पैनल के रूप में जाना जाता है, जो एक समय में सामग्री के एक पैनल को प्रदर्शित करता है।

टैब सूची: एक टैबलिस्ट तत्व में निहित टैब तत्वों का एक सेट

टैब: टैब सूची में एक तत्व जो किसी एक टैब पैनल के लिए एक लेबल के रूप में कार्य करता है और उस पैनल को प्रदर्शित करने के लिए सक्रिय किया जा सकता है

टैब पैनल: वह तत्व जिसमें टैब से जुड़ी सामग्री होती है

यह अनुशंसा की जाती है कि टैब तब तक स्वचालित रूप से सक्रिय हो जाते हैं जब वे फ़ोकस प्राप्त करते हैं, जब तक कि उनके संबद्ध टैब पैनल ध्यान देने योग्य विलंबता के बिना प्रदर्शित होते हैं।

टैब कीबोर्ड इंटरेक्शन

टैब वैकल्पिक कीबोर्ड इंटरेक्शन

टैब तकनीकी विचार

टैबलिस्ट की भूमिका: टैब के सेट वाले तत्व में aria-labelledby या aria-label होना चाहिए।

टैब की भूमिका: एक टैब के रूप में कार्य करने वाले तत्व में संबद्ध टैबपैनल के साथ एरिया-कंट्रोल पेयर होना चाहिए, सक्रिय टैब में स्टेट एरिया-चयनित सही पर सेट होना चाहिए; अन्य सभी टैब झूठे पर सेट हैं।

और यदि टैब तत्व में पॉप-अप मेनू है तो इसमें aria-haspopup संपत्ति या तो मेनू या सत्य पर सेट होनी चाहिए।

Tabpanel की भूमिका: किसी टैब के लिए सामग्री पैनल वाले तत्व में aria-लेबल द्वारा संबद्ध टैब से युग्मित होना चाहिए, और aria-अभिविन्यास को लंबवत या क्षैतिज (डिफ़ॉल्ट) पर सेट करना चाहिए।

टैब कोड उदाहरण

 <div role="tablist" aria-label="Tabs Example"> <button role="tab" aria-selected="true" aria-controls="tab1-content" id="tab1" >Tab 1 </button> <button role="tab" aria-selected="false" aria-controls="tab2-content" id="tab2" tabindex="-1" >Tab 2</button> </div>

 <div tabindex="0" role="tabpanel" aria-labelledby="tab1" id="tab1-content"> <p>Content 1</p> </div> <div tabindex="0" role="tabpanel" aria-labelledby="tab2" id="tab2-content"> <p>Content 2</p> </div>

यहां एक अच्छा उदाहरण और उसका कोड है।

साधन

ARIA संलेखन अभ्यास मार्गदर्शिका

वेब सामग्री अभिगम्यता दिशानिर्देश (डब्ल्यूसीएजी) 2.1

आप यहां विभिन्न घटकों के साथ एक संपूर्ण Vue कोड उदाहरण पा सकते हैं:

https://github.com/mlama007/Widgets

पांचवीं वार्ता का अंत

मुझे आशा है कि आपने इस भाग का आनंद लिया और यह आपके लिए उतना ही मूल्यवान हो सकता है जितना कि यह मेरे लिए था।

अगले कुछ दिनों में, मैं बाकी की बातचीत आपके साथ साझा करूँगा। बने रहें…

यहाँ भी प्रकाशित हो चुकी है।.