आसानी से ऐक्सेस किए जा सकने वाले Angular ऐप्लिकेशन बनाएं

1. शुरू करने से पहले

वेब डेवलपमेंट में ऐक्सेसिबिलिटी एक अहम हिस्सा है. इससे यह पक्का किया जाता है कि उपयोगकर्ता ऐप्लिकेशन को समझ सकें, उससे इंटरैक्ट कर सकें, और उसे नेविगेट कर सकें. दरअसल, अमेरिका में हर चार में से एक वयस्क को कोई ऐसी विकलांगता है जिससे उसकी रोज़मर्रा की गतिविधियों पर असर पड़ता है. दुनिया भर में, करीब 15 प्रतिशत आबादी यानी कि 100 करोड़ से ज़्यादा लोग किसी न किसी तरह की दिव्यांगता से जूझ रहे हैं. इनमें से करीब 2 से 4 प्रतिशत लोगों को काफ़ी मुश्किलों का सामना करना पड़ता है.

वेब का इस्तेमाल करने में लोगों को कई तरह की समस्याओं का सामना करना पड़ता है. जैसे, अंधापन या कम दृष्टि, बहरापन या सुनने में परेशानी, चलने-फिरने में समस्या, संज्ञानात्मक अक्षमता, और कलर ब्लाइंडनेस. यह सिर्फ़ कुछ समस्याएं हैं.

इस कोर्स में, a11y का मतलब सुलभता है. ध्यान दें कि a के बाद 11 वर्ण और एक y है.

सुलभता के लिए डिज़ाइन किए गए ऐप्लिकेशन से जुड़ी समस्याओं और तकनीकों के बारे में ज़्यादा जानने के लिए, सुलभता देखें.

आपको क्या बनाने को मिलेगा

• डेमो Dumpling Shop Angular ऐप्लिकेशन में, वेब ऐक्सेसिबिलिटी से जुड़ी सामान्य समस्याओं को हल करने के लिए, सबसे सही तरीकों और पहले से मौजूद तकनीकों का इस्तेमाल करना
• सभी ऐक्सेसिबिलिटी गाइडलाइन, WCAG 2.0, और ARIA 1.2 का पालन करता हो. साथ ही, ऐक्सेसिबिलिटी की जांच करने वाले टूल axe और Lighthouse की ऑडिट पास करता हो.

आपको क्या सीखने को मिलेगा

आपको Angular ऐप्लिकेशन में सुलभता से जुड़ी आठ आम समस्याओं के बारे में पता चलता है. इनसे उपयोगकर्ताओं पर असर पड़ता है. साथ ही, आपको इन समस्याओं की पहचान करने और उन्हें ठीक करने का तरीका भी पता चलता है. खास तौर पर, आपको:

• अपने ऐप्लिकेशन की सुलभता की जांच करने के लिए, Google Chrome डेवलपर टूल, Lighthouse, और axe का इस्तेमाल करना
• एक पेज वाले ऐप्लिकेशन (एसपीए) की समस्याओं को यूनीक पेज टाइटल की मदद से हल करना
• कम दृष्टि वाले लोगों के लिए, कम कंट्रास्ट में रंग दिखने की समस्याएं ठीक करना
• यह पक्का करने के लिए कि स्क्रीन रीडर, पेज पर सही तरीके से नेविगेट कर सकें, सिमेंटिक एचटीएमएल का इस्तेमाल करें
• स्क्रीन रीडर को सभी कंट्रोल ऐक्सेस करने की अनुमति देने के लिए, Angular Material का इस्तेमाल करें और कंट्रोल को अननेस्ट करें
• स्क्रीन रीडर के लिए ARIA की सुविधा जोड़ना
• Angular CDK a11y पैकेज इंपोर्ट करना और उसका इस्तेमाल करना
• कस्टम कॉम्पोनेंट के स्क्रीन-रीडर नेविगेशन के लिए FocusTrap का इस्तेमाल करना
• सीडीके LiveAnnouncer की मदद से सूचनाएँ पढ़कर सुनाना
• ज़्यादा कंट्रास्ट वाले मोड का इस्तेमाल करने वाले उपयोगकर्ताओं का पता लगाना और ज़्यादा कंट्रास्ट वाली थीम लागू करना

आपको इन चीज़ों की ज़रूरत होगी

• Angular, SCSS, Typescript, git, और Chrome डेवलपर टूल के बारे में जानकारी

2. सेट अप करें

कोड पाएं

इस प्रोजेक्ट के लिए ज़रूरी सभी चीज़ें, GitHub रिपॉज़िटरी में मौजूद हैं. शुरू करने के लिए, कोड को क्लोन करें और इसे अपने पसंदीदा डेवलपमेंट एनवायरमेंट में खोलें.

रिपॉज़िटरी को क्लोन करना और ऐप्लिकेशन को उपलब्ध कराना

इस कोडलैब को पूरा करने के लिए, VSCode या लोकल आईडीई का इस्तेमाल करने का सुझाव दिया जाता है.

1. एक नया ब्राउज़र टैब खोलें और https://github.com/googlecodelabs/angular-accessibility पर जाएं.
2. रिपॉज़िटरी को फ़ोर्क और क्लोन करें. इसके बाद, रिपॉज़िटरी में cd angular-accessibility/ करें.
3. स्टार्टर कोड ब्रांच git checkout get-started देखें.
4. कोड को VSCode या अपने पसंदीदा IDE में खोलें.
5. सर्वर चलाने के लिए ज़रूरी डिपेंडेंसी इंस्टॉल करने के लिए, npm install चलाएं.
6. सर्वर चलाने के लिए, ng serve चलाएं.
7. http://localhost:4200 पर जाने के लिए, ब्राउज़र टैब खोलें.

3. बेसलाइन सेट अप करना

आपको कहां से शुरू करना है?

इस कोडलैब के लिए, रेस्टोरेंट का एक बुनियादी ऐप्लिकेशन बनाया गया है. आपको इसी ऐप्लिकेशन से शुरुआत करनी है. इस कोड को आसान बनाया गया है, ताकि इस कोडलैब में कॉन्सेप्ट दिखाए जा सकें. इसमें कुछ ही फ़ंक्शन हैं.

डेमो देखें

शुरू करने के लिए, अपने ऐप्लिकेशन की इन तीन सुविधाओं के बारे में जानें:

1. नेविगेशन बार का इस्तेमाल करके, हमारी दुकान, हमारी कहानी, और हमें ढूंढें रास्तों को देखें. साथ ही, डंपलिंग कंपनी के बारे में जानकारी देखें.
2. हल्के और गहरे रंग वाले मोड के बीच टॉगल करने के लिए, थीम बदलें.
3. अपने ऑर्डर में, पकौड़ी के अंदर भरे जाने वाले मसाले, उनकी संख्या, और रंग को पसंद के मुताबिक बनाएं.
4. कंसोल में अपनी पसंद के मुताबिक बनाए गए ऑर्डर को लॉग करने के लिए, खरीदारी करें को चुनें.

वेब ऐक्सेसिबिलिटी से जुड़ी सामान्य समस्याओं को हल करने के लिए, Angular का इस्तेमाल करना

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

आपको कैसे पता चलेगा कि क्या ठीक करना है?

हर उदाहरण में, मैन्युअल और ऑटोमेटेड टेस्टिंग का इस्तेमाल करके, सुलभता से जुड़ी समस्या की पहचान करें.

वेब की मौजूदा स्थिति में, सुलभता की मैन्युअल तरीके से जांच करना ज़रूरी है.

आपके पास ऐसे टूल हैं जो सुलभता से जुड़ी समस्याओं का पता लगा सकते हैं. हालांकि, कोई भी टूल यह सर्टिफ़िकेट नहीं दे सकता कि कोई ऐप्लिकेशन पूरी तरह से सुलभ है. मैन्युअल टेस्टिंग से यह पक्का किया जाता है कि आपने सुलभता से जुड़े कई कॉन्सेप्ट की जांच की हो. इनमें कॉन्टेंट का लॉजिकल ऑर्डर और फ़ीचर पैरिटी शामिल है.

मैन्युअल टेस्टिंग

इस कोर्स में, मैन्युअल तरीके से ऐक्सेसिबिलिटी की जांच करने के लिए, कंप्यूटर में पहले से मौजूद स्क्रीन रीडर को चालू करें. इसके बाद, कीबोर्ड नेविगेशन की मदद से अपने ऐप्लिकेशन में नेविगेट करें. ज़्यादा जानकारी के लिए, सिमैंटिक्स और स्क्रीन रीडर लेख पढ़ें.

स्क्रीन रीडर चालू करके और स्क्रीन पर नेविगेट करके, इसका इस्तेमाल करने का तरीका जानें.

MacOS में पहले से मौजूद VoiceOver का इस्तेमाल किया जा सकता है. सिस्टम की सेटिंग > सुलभता > VoiceOver > VoiceOver चालू करने के लिए इसे चालू करें पर क्लिक करें. VoiceOver को टॉगल करने के लिए, Command बटन को दबाकर रखते हुए, TouchID को तीन बार तेज़ी से दबाएं.

इस कोर्स में, आपको मुख्य रूप से समस्याओं की जांच मैन्युअल तरीके से करनी होती है. साथ ही, ऑटोमेटेड टूल का इस्तेमाल करके, ऑटोमेट की जा सकने वाली सुविधाओं की जांच करनी होती है.

ऑटोमेटेड टेस्टिंग

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

Lighthouse और Chrome डेवलपर टूल

1. Chrome डेवलपर टूल खोलें.
2. Lighthouse टैब को चुनें. इसके बाद, Accessibility चेकबॉक्स को चुनें.
3. एक्सेसिबिलिटी से जुड़ी लाइटहाउस ऑडिट चलाने के लिए, रिपोर्ट जनरेट करें पर क्लिक करें.

कुल्हाड़ी

1. axe DevTools एक्सटेंशन इंस्टॉल करें. एक्सटेंशन देखने के लिए, आपको अपना ब्राउज़र रीस्टार्ट करना पड़ सकता है.
2. Chrome डेवलपर टूल खोलें.
3. axe DevTools स्कैन चलाने के लिए, axe DevTools टैब चुनें. इसके बाद, मेरे पूरे पेज को स्कैन करें को चुनें.

लिंटिंग

अपने-आप लागू होने वाले a11y एट्रिब्यूट के लिए, अपने कोड की जांच करने के लिए Angular ESLint के नियमों का इस्तेमाल किया जा सकता है.

eslint.json में, सुलभता से जुड़ी ये चीज़ें जोड़ें:

"@angular-eslint/template/accessibility-alt-text": 2,
"@angular-eslint/template/accessibility-elements-content": 2,
"@angular-eslint/template/accessibility-label-for": 2,
"@angular-eslint/template/no-positive-tabindex": 2,
"@angular-eslint/template/accessibility-table-scope": 2,
"@angular-eslint/template/accessibility-valid-aria": 2,
"@angular-eslint/template/click-events-have-key-events": 2,
"@angular-eslint/template/mouse-events-have-key-events": 2,
"@angular-eslint/template/no-autofocus": 2,
"@angular-eslint/template/no-distracting-elements": 2

ज़्यादा जानकारी के लिए, GitHub पर ESLint के नए नियम देखें.

आपके कारोबार की पुष्टि करने की शुरुआत

टेस्टिंग के नए तरीकों का इस्तेमाल करके, अपने ऐप्लिकेशन में इन समस्याओं का पता लगाया जा सकता है. इसके लिए, Lighthouse और axe ऑडिट के साथ-साथ मैन्युअल VoiceOver का इस्तेमाल करें:

सुलभता ऑडिट:

• 🛑 सभी पेजों का टाइटल एक जैसा है
• 🛑 एलिमेंट में रंगों का कंट्रास्ट सही होना चाहिए
• 🛑 एचटीएमएल में लॉजिकल ऑर्डर, नाम, और भूमिका होनी चाहिए
• 🛑 स्क्रीन रीडर के लिए, नेस्ट किए गए चेकबॉक्स नहीं चुने जा सकते
• 🛑 स्क्रीन रीडर, स्लाइडर की वैल्यू नहीं पढ़ता
• 🛑 कलर पिकर में स्क्रीन रीडर का फ़ोकस, डायलॉग से बाहर निकल जाता है
• 🛑 बदलावों, गड़बड़ियों, और सूचनाओं के बारे में नहीं बताया जाता
• 🛑 हाई कंट्रास्ट मोड चालू नहीं है

4. पेज के लिए यूनीक टाइटल तय करना

पेज के यूनीक और छोटे टाइटल देने से, सुलभता सेवाओं का इस्तेमाल करने वाले लोगों को वेब पेज के कॉन्टेंट और मकसद को तुरंत समझने में मदद मिलती है. देखने में परेशानी वाले लोगों के लिए पेज के टाइटल बहुत ज़रूरी होते हैं. ऐसा इसलिए, क्योंकि स्क्रीन रीडर सॉफ़्टवेयर, पेज के टाइटल को सबसे पहले पढ़ता है.

Angular एक सिंगल-पेज ऐप्लिकेशन है. इसलिए, ज़्यादातर ट्रांज़िशन में पेज रीलोड नहीं होता. जैसे, किसी नए पेज पर जाना. हाल ही में, इसका मतलब यह था कि हर पेज का टाइटल एक जैसा होता था. इससे पेज के कॉन्टेंट या मकसद को समझने में कोई मदद नहीं मिलती थी.

Angular v14 में, राउटर ने एक इन-बिल्ट तरीका जोड़ा है, ताकि बॉक्स से बाहर यूनीक पेज टाइटल तय किए जा सकें. इससे, डेवलपर के लिए पेज के टाइटल से जुड़े सबसे सही तरीकों का पालन करना आसान हो जाता है.

इस सेक्शन के आखिर तक, आपका ऐप्लिकेशन इन ऑडिट को पास कर लेगा:

• 🛑 सभी पेजों का टाइटल एक जैसा है

आपको ये सभी चरण, टिप्पणी के नीचे दिखेंगे: TODO: #4. Define unique page titles.

समस्या का पता लगाना

इस समस्या का पता लगाने के लिए, स्क्रीन रीडर चालू करें. इसके बाद, पेज के टाइटल देखने के लिए, हमारी दुकान, हमारी कहानी, और हमसे संपर्क करें टैब के बीच नेविगेट करें:

1. VoiceOver चालू करें.
2. एक पेज से दूसरे पेज पर जाने के लिए, टैब नेविगेशन का इस्तेमाल करें.
3. पुष्टि करें कि Angular में पेज का टाइटल हमेशा a11y होता है.

यह एक समस्या है, क्योंकि आपके पेज का टाइटल यूनीक होना चाहिए, ताकि कोई व्यक्ति पेज पर नेविगेट किए बिना ही यह समझ सके कि पेज किस बारे में है.

पेज के ऐसे टाइटल जोड़ें जो उपयोगकर्ताओं को आसानी से समझ में आ जाएं

अगर किसी पेज या व्यू में बदलाव होता है, तो आपको पेज के टाइटल को सही तरीके से मैनेज करना होगा. इसे ठीक करने के लिए, Angular की बिल्ट-इन Router.title प्रॉपर्टी का इस्तेमाल करके, अपने हर पेज के लिए यूनीक टाइटल तय करें.

1. तय किए गए तीनों रास्तों में से हर एक के लिए, यूनीक टाइटल जोड़ें:

src/app/app-routing.module.ts

const routes: Routes = [
  { path: 'shop', component: ShopComponent, title: 'Our Shop – a11y in Angular' },
  { path: 'about', component: AboutComponent, title: 'Our Story - a11y in Angular' },
  { path: 'locate', component: LocationComponent, title: 'Find Us - a11y in Angular' },
  { path: '',   redirectTo: '/shop', pathMatch: 'full' },
  { path: '**', component: ShopComponent },
];

यह सुविधा, नेविगेशन के दौरान पेज का टाइटल बदलने के लिए, बैकग्राउंड में Router's Title Service का इस्तेमाल करती है. इससे, पेज का टाइटल हमारी राउटिंग में तय की गई टाइटल प्रॉपर्टी से मैच हो जाता है. कस्टम TitleStrategy का इस्तेमाल करके, ज़्यादा मुश्किल पेज टाइटल भी मैनेज किए जा सकते हैं.

बदलावों की पुष्टि करें

स्क्रीन रीडर को फिर से चालू करें और अपने बदलावों की पुष्टि करें. अब पेजों के टाइटल यूनीक होने चाहिए!

सुलभता ऑडिट:

• ✅ सभी पेजों के लिए यूनीक पेज टाइटल मौजूद हैं
• 🛑 एलिमेंट में रंगों का कंट्रास्ट सही होना चाहिए
• 🛑 एचटीएमएल में लॉजिकल ऑर्डर, नाम, और भूमिका होनी चाहिए
• 🛑 स्क्रीन रीडर के लिए, नेस्ट किए गए चेकबॉक्स नहीं चुने जा सकते
• 🛑 स्क्रीन रीडर, स्लाइडर की वैल्यू नहीं पढ़ता
• 🛑 कलर पिकर में स्क्रीन रीडर का फ़ोकस, डायलॉग से बाहर निकल जाता है
• 🛑 बदलावों, गड़बड़ियों, और सूचनाओं के बारे में नहीं बताया जाता
• 🛑 हाई कंट्रास्ट मोड चालू नहीं है

5. पक्का करें कि रंगों का कंट्रास्ट सही हो

आपका डिज़ाइन देखने में अच्छा लग सकता है, लेकिन यह तब तक अच्छा नहीं है, जब तक कि दृष्टिबाधित लोग (जैसे, रंगों की पहचान न कर पाने वाले लोग) आपके कॉन्टेंट को पढ़ न पाएं. वेब कॉन्टेंट ऐक्सेसबिलिटी गाइडलाइंस (डब्ल्यूसीएजी 2.0) में, कलर कंट्रास्ट रेशियो की एक सीरीज़ तय की गई है. इससे यह पक्का किया जाता है कि कॉन्टेंट ऐक्सेस किया जा सके. Angular और वेब पर, कलर पैलेट तय किए जा सकते हैं. इससे यह पक्का किया जा सकता है कि आपके कॉम्पोनेंट इन स्टैंडर्ड के मुताबिक हों. साथ ही, वे कम रोशनी में देखने और कलर ब्लाइंडनेस की समस्या वाले लोगों को दिखें.

इस सेक्शन के आखिर तक, आपका ऐप्लिकेशन इन ऑडिट को पास कर लेगा:

• 🛑 एलिमेंट में रंगों का कंट्रास्ट सही होना चाहिए

इन सभी चरणों के बारे में जानकारी, टिप्पणियों में दी गई है: TODO: #5. Ensure adequate color contrast.

कम कंट्रास्ट की समस्याओं का पता लगाने के लिए, Chrome डेवलपर टूल का इस्तेमाल करना

इस समस्या का पता लगाने के लिए, Chrome डेवलपर टूल का इस्तेमाल करके अपने ऐप्लिकेशन के एलिमेंट की जांच करें.

1. मेन्यू आइकॉन बटन देखने के लिए, जांच करने वाले टूल का इस्तेमाल करें. इसमें देखा जा सकता है कि कंट्रास्ट 1.85 है, जो WCAG की ज़रूरी शर्तों से काफ़ी कम है.

2. कंट्रास्ट रेशियो से जुड़ी इन समस्याओं को देखने के लिए, Lighthouse में सुलभता ऑडिट या axe का स्कैन चलाएं.

मटीरियल थीम का रंग बदलना

आपके कॉम्पोनेंट की कलर स्कीम, कस्टम मटीरियल थीम में तय की जाती है. आपने थीम की वैल्यू को अपडेट किया है, ताकि वह कलर-कंट्रास्ट रेशियो के दिशा-निर्देशों का पालन कर सके.

टेक्स्ट के लिए गहरे रंग का इस्तेमाल करने के लिए, अपनी मटीरियल थीम अपडेट करें. इससे आपके आइकॉन का कंट्रास्ट रेशियो बढ़ जाएगा:

src/styles.scss

$light-primary: mat.define-palette(mat.$pink-palette, $default: A100, $lighter: 100, $text: 900);

Chrome डेवलपर टूल में सुलभता से जुड़े टूल पहले से मौजूद होते हैं. इनका इस्तेमाल करके, ऐसे रंग का पता लगाया जा सकता है जो मानकों के मुताबिक हो. इसके अलावा, Sass में अलग-अलग रंग की वैल्यू अपडेट की जा सकती हैं.

बदलावों की पुष्टि करें

अपने एलिमेंट की फिर से जांच करें और बदलावों की पुष्टि करें. अब हमारी थीम में, रंगों के कंट्रास्ट का अनुपात सही होना चाहिए!

सुलभता ऑडिट

• ✅ सभी पेजों के लिए यूनीक पेज टाइटल मौजूद हैं
• ✅ रंगों का कंट्रास्ट अनुपात काफ़ी है
• 🛑 एचटीएमएल में लॉजिकल ऑर्डर, नाम, और भूमिका होनी चाहिए
• 🛑 स्क्रीन रीडर के लिए, नेस्ट किए गए चेकबॉक्स नहीं चुने जा सकते
• 🛑 स्क्रीन रीडर, स्लाइडर की वैल्यू नहीं पढ़ता
• 🛑 कलर पिकर में स्क्रीन रीडर का फ़ोकस, डायलॉग से बाहर निकल जाता है
• 🛑 बदलावों, गड़बड़ियों, और सूचनाओं के बारे में नहीं बताया जाता
• 🛑 हाई कंट्रास्ट मोड चालू नहीं है

6. सिमेंटिक एचटीएमएल का इस्तेमाल करना

नेटिव एचटीएमएल एलिमेंट, इंटरैक्शन के कई स्टैंडर्ड पैटर्न कैप्चर करते हैं. ये पैटर्न, सुलभता के लिए ज़रूरी होते हैं. किसी पैराग्राफ़ को स्पैन के तौर पर स्टाइल किया जा सकता है और किसी div को बटन के तौर पर स्टाइल किया जा सकता है. हालांकि, सिमैंटिक एचटीएमएल एलिमेंट यह पक्का करता है कि स्क्रीन रीडर और कीबोर्ड नेविगेशन को आपके एचटीएमएल के इंटरैक्शन और कंट्रोल समझ में आएं.

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

इस सेक्शन के आखिर तक, आपका ऐप्लिकेशन इन ऑडिट को पास कर लेगा:

• 🛑 एचटीएमएल में लॉजिकल ऑर्डर, नाम, और भूमिका होनी चाहिए

इन सभी चरणों के बारे में जानकारी, टिप्पणियों में दी गई है: TODO: #6. Use Semantic HTML.

समस्या का पता लगाना

1. VoiceOver चालू करें.
2. टैब नेविगेशन का इस्तेमाल करके, हमारी कहानी टैब पर क्लिक करें.
3. ध्यान दें कि टैब का क्रम एक जैसा नहीं है.
4. Purchas पर क्लिक करें.
5. ध्यान दें कि बटन को बटन के तौर पर नहीं पहचाना गया है.

<div> को <button> में बदलना

कस्टम <div> को Material बटन से बदलें:

src/app/shop/shop.component.html

<button mat-flat-button 
  color="primary" 
  class="purchase-button"
  (click)="fauxPurchase()">
  Purchase
</button>

हेडिंग एलिमेंट का क्रम से इस्तेमाल करना

सिमेंटिक एचटीएमएल का इस्तेमाल करने के लिए, टेक्स्ट का क्रम बदलें. साथ ही, Angular Material typography का इस्तेमाल करके स्टाइलिंग लागू करें:

src/app/about/about.component.html

<h2>Who are we?</h2>
<p class="mat-subheading-2">Have you ever thought, "wow, I love dumplings"?</p>
<p class="right mat-subheading-1">Who hasn't.</p>
<p class="center mat-subheading-1">We took it one step further and created Dumpling Dumpling,</p> 
<p class="center mat-subheading-1">double the dumpling, double the fun.</p>
<div class="spacer"></div>
<h2>How are we different?</h2>
<p class="mat-subheading-2">Handmade in San Francisco, California, we craft fully customizable dumplings. Glitter? Rainbows? Vegan? We do it all.</p>
<p class="right mat-subheading-2">This shop is concept only.</p>

बदलावों की पुष्टि करें

स्क्रीन रीडर को फिर से चालू करें और अपने बदलावों की पुष्टि करें. VoiceOver अब बटन को पहचानता है और टेक्स्ट को सही क्रम में पढ़ता है!

सुलभता ऑडिट:

• ✅ सभी पेजों के लिए यूनीक पेज टाइटल मौजूद हैं
• ✅ रंगों का कंट्रास्ट अनुपात काफ़ी है
• ✅ सिमेंटिक एचटीएमएल से लॉजिकल इंटरैक्शन पक्का होता है
• 🛑 स्क्रीन रीडर के लिए, नेस्ट किए गए चेकबॉक्स नहीं चुने जा सकते
• 🛑 स्क्रीन रीडर, स्लाइडर की वैल्यू नहीं पढ़ता
• 🛑 कलर पिकर में स्क्रीन रीडर का फ़ोकस, डायलॉग से बाहर निकल जाता है
• 🛑 बदलावों, गड़बड़ियों, और सूचनाओं के बारे में नहीं बताया जाता
• 🛑 हाई कंट्रास्ट मोड चालू नहीं है

7. Angular Material की मदद से, चुने जा सकने वाले कंट्रोल बनाना

सुलभता सेवाओं के लिए, इंटरैक्शन का एक मुश्किल पैटर्न नेस्ट किए गए कंट्रोल हैं. मेन्यू के सब-आइटम या नेस्ट किए गए चेकबॉक्स के बारे में सोचें. किसी उपयोगकर्ता को यह कैसे पता चलेगा कि विकल्पों का कोई सबग्रुप चुना जा सकता है या मुख्य मेन्यू आइटम पर जाया जा सकता है?

Angular में, मेन्यू और कंट्रोल को आसान बनाएं, ताकि नेविगेट किए जा सकने वाले कॉम्पोनेंट बनाए जा सकें. इसके लिए, कंट्रोल को जितना हो सके उतना आसान बनाएं. इस उदाहरण में, Angular Material के लिस्टबॉक्स का इस्तेमाल करके, इस इंटरैक्शन पैटर्न का एक उदाहरण बनाया गया है.

इस सेक्शन के आखिर तक, आपका ऐप्लिकेशन इन ऑडिट को पास कर लेगा:

• 🛑 स्क्रीन रीडर के लिए, नेस्ट किए गए चेकबॉक्स नहीं चुने जा सकते

इन सभी चरणों के बारे में जानकारी, टिप्पणियों में दी गई है: TODO: #7. Create selectable controls with Angular Material.

समस्या का पता लगाना

इस समस्या की पहचान करने के लिए, हम स्क्रीन रीडर को चालू करेंगे और नेस्ट किए गए चेकबॉक्स को चुनने की कोशिश करेंगे.

1. VoiceOver चालू करें.
2. अलग-अलग तरह के फ़्लेवर चुनें.
3. ध्यान दें कि VoiceOver से पढ़े जाने पर, माता-पिता के चेकबॉक्स में बच्चों के बारे में जानकारी नहीं दी जाती है. आपको कैसे पता चला कि Bok Choy चेकबॉक्स से चुने गए का निशान हटाने के बाद, Vegan चेकबॉक्स से भी चुने गए का निशान हट गया है?

ऐंगुलर मटीरियल में A11y

सिमेंटिक चेकबॉक्स को Angular Material चेकबॉक्स से बदलें. इसमें इंटरैक्शन के इस पैटर्न की जानकारी पहले से मौजूद होती है. यह ध्यान रखना ज़रूरी है कि कॉम्पोनेंट को Material से बदलने पर, सुलभता की गारंटी नहीं मिलती. किसी अन्य कॉम्पोनेंट की तरह, आपको इसे मैन्युअल तरीके से टेस्ट करना होगा. ऐसा इसलिए, क्योंकि Material को ऐक्सेस न किया जा सकने वाले कई तरीकों से लागू किया जा सकता है.

चेकबॉक्स को Material चेकबॉक्स से बदलना

1. सबसे पहले, फ़िलिंग की नई सूची और चुने गए फ़िलिंग फ़्लेवर को सेव करने के लिए एक वैरिएबल जोड़ें:

src/app/shop/shop.component.ts

@Component(...)
export class ShopComponent implements OnInit {
  fillings: string[] = ['Bok Choy & Chili Crunch', 'Tofu & Mushroom', 'Chicken & Ginger', 'Impossible Meat & Spinach'];
  selectedFillings: string[] = [];

  fauxPurchase(): void {
    let flavor = '';
    this.selectedFillings.forEach(filling => {
      flavor = flavor + " " + filling
    })
  }
}

2. एचटीएमएल चेकबॉक्स के इस गड़बड़ ग्रुप को बदलने के लिए, <mat-selection-list> जोड़ें:

src/app/shop/shop.component.html

<mat-selection-list [(ngModel)]="selectedFillings" 
  aria-label="Dumpling fillings">
  <mat-list-option *ngFor="let flavor of fillings" 
    [value]="flavor" 
    color="primary">
    {{ flavor }}
  </mat-list-option>
</mat-selection-list>

आपके TODO में की गई टिप्पणियों में यह भी दिखता है कि स्टाइलिंग को बेहतर बनाने के लिए, src/app/shop/shop.component.scss में इस्तेमाल न किए गए कुछ Sass को कहां हटाया जा सकता है.

बदलावों की पुष्टि करें

स्क्रीन रीडर को फिर से चालू करें और अपने बदलावों की पुष्टि करें. अब आपके चेकबॉक्स चुने जा सकते हैं. साथ ही, स्क्रीन रीडर की मदद से इन्हें आसानी से नेविगेट किया जा सकता है!

सुलभता ऑडिट:

• ✅ सभी पेजों के लिए यूनीक पेज टाइटल मौजूद हैं
• ✅ रंगों का कंट्रास्ट अनुपात काफ़ी है
• ✅ सिमेंटिक एचटीएमएल से लॉजिकल इंटरैक्शन पक्का होता है
• ✅ सभी कंट्रोल को स्क्रीन रीडर से ऐक्सेस किया जा सकता है
• 🛑 स्क्रीन रीडर, स्लाइडर की वैल्यू नहीं पढ़ता
• 🛑 कलर पिकर में स्क्रीन रीडर का फ़ोकस, डायलॉग से बाहर निकल जाता है
• 🛑 बदलावों, गड़बड़ियों, और सूचनाओं के बारे में नहीं बताया जाता
• 🛑 हाई कंट्रास्ट मोड चालू नहीं है

8. ARIA के साथ कंट्रोल लेबल उपलब्ध कराना

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

वेब ऐक्सेसिबिलिटी इनिशिएटिव के ऐक्सेसिबल रिच इंटरनेट ऐप्लिकेशन स्पेसिफ़िकेशन (WAI-ARIA या ARIA) से, उन समस्याओं को हल करने में मदद मिलती है जिन्हें नेटिव एचटीएमएल से मैनेज नहीं किया जा सकता. इसकी मदद से, ऐसे एट्रिब्यूट तय किए जा सकते हैं जो यह तय करते हैं कि किसी एलिमेंट को ऐक्सेसिबिलिटी ट्री में कैसे ट्रांसलेट किया जाए.

इस सेक्शन के आखिर तक, आपका ऐप्लिकेशन इन ऑडिट को पास कर लेगा:

• 🛑 स्क्रीन रीडर, स्लाइडर की वैल्यू नहीं पढ़ता

इन सभी चरणों के बारे में जानकारी, टिप्पणियों में दी गई है: TODO: #8. Provide control labels with ARIA.

समस्या का पता लगाना

इस समस्या का पता लगाने के लिए, अपना स्क्रीन रीडर चालू करें और स्लाइडर को इस तरह से घुमाएं:

1. VoiceOver चालू करें.
2. क्वांटिटी स्लाइडर पर जाएं और वैल्यू बदलें.
3. ध्यान दें कि वैल्यू का लेबल मौजूद नहीं है.

ARIA एट्रिब्यूट का इस्तेमाल करना

aria-label से <mat-slider> तक लेबल कंट्रोल करने के लिए:

src/app/shop/shop.component.html

<mat-slider
  aria-label="Dumpling order quantity slider"
  id="quantity"
  name="quantity"
  color="primary"
  class="quantity-slider"
  [max]="13"
  [min]="1"
  [step]="1"
  [tickInterval]="1"
  thumbLabel
  [(ngModel)]="quantity">
</mat-slider>

बदलावों की पुष्टि करें

स्क्रीन रीडर को फिर से चालू करें और अपने बदलावों की पुष्टि करें. अब स्लाइडर को आगे-पीछे किया जा सकता है!

सुलभता ऑडिट:

• ✅ सभी पेजों के लिए यूनीक पेज टाइटल मौजूद हैं
• ✅ रंगों का कंट्रास्ट अनुपात काफ़ी है
• ✅ सिमेंटिक एचटीएमएल से लॉजिकल इंटरैक्शन पक्का होता है
• ✅ सभी कंट्रोल को स्क्रीन रीडर से ऐक्सेस किया जा सकता है
• ✅ स्लाइडर में ARIA एट्रिब्यूट का इस्तेमाल करके लेबल दिया गया हो
• 🛑 कलर पिकर में स्क्रीन रीडर का फ़ोकस, डायलॉग से बाहर निकल जाता है
• 🛑 बदलावों, गड़बड़ियों, और सूचनाओं के बारे में नहीं बताया जाता
• 🛑 हाई कंट्रास्ट मोड चालू नहीं है

9. @angular/cdk/a11y की सुविधाओं का इस्तेमाल करना

अब तक, आपने सुलभता से जुड़ी सामान्य समस्याओं को ठीक करने के लिए, Angular में पहले से मौजूद टूल का इस्तेमाल किया है. अब, आइए सीडीके के a11y मॉड्यूल पर एक नज़र डालते हैं. साथ ही, यह देखते हैं कि यह Angular से जुड़ी ज़्यादा मुश्किल समस्याओं को हल करने में हमारी कैसे मदद कर सकता है.

इस सेक्शन के आखिर तक, Angular a11y मॉड्यूल टूलिंग के साथ इस कोर्स को जारी रखें.

आपको ये चरण, टिप्पणी के नीचे दिखेंगे: TODO: #9. Add the power of @angular/cdk/a11y.

मॉड्यूल इंपोर्ट करना

अपने ऐप्लिकेशन में मॉड्यूल जोड़ें:

src/app/app.module.ts

import { A11yModule } from '@angular/cdk/a11y';

@NgModule({
  declarations: [...],
  imports: [
    A11yModule
  ],
  providers: [...],
  bootstrap: [...]
})

'@angular/cdk/a11y' क्या करता है?

a11y मॉड्यूल, ऐक्सेसिबिलिटी को बेहतर बनाने के लिए कई टूल उपलब्ध कराता है. यह कॉम्पोनेंट के लेखकों के लिए खास तौर पर फ़ायदेमंद है.

यहां दिए गए सेक्शन में, तीन सामान्य सेवाएं जोड़ी जाती हैं: FocusTrap, LiveAnnouncer, और HighContrast.

@angular/cdk/a11y की ओर से उपलब्ध कराई जाने वाली अन्य सभी सेवाओं के बारे में ज़्यादा जानने के लिए, सुलभता पर जाएं.

10. FocusTrap की मदद से फ़ोकस कंट्रोल करना

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

Angular में, cdkTrapFocus डायरेक्टिव, किसी एलिमेंट में tab-की फ़ोकस को ट्रैप करता है. इसका इस्तेमाल, कॉम्पोनेंट के लिए ऐक्सेस किया जा सकने वाला अनुभव बनाने के लिए किया जाता है. जैसे, मोडल डायलॉग, जहां फ़ोकस को सीमित करना ज़रूरी है.

इस सेक्शन के आखिर तक, आपका ऐप्लिकेशन इन ऑडिट को पास कर लेगा:

• 🛑 कलर पिकर में स्क्रीन रीडर का फ़ोकस, डायलॉग से बाहर निकल जाता है

आपको ये चरण, टिप्पणियों में दिखेंगे: TODO: #10. Control focus with FocusTrap.

समस्या का पता लगाना

इस समस्या की पहचान करने के लिए, स्क्रीन रीडर चालू करें और कलर-पिकर डायलॉग खोलें.

1. VoiceOver चालू करें.
2. रंग बदलने के लिए, टैब नेविगेशन का इस्तेमाल करें.
3. कलर पिकर में, फ़ोकस के क्रम और फ़ोकस ट्रैपिंग की सुविधा को आसानी से इस्तेमाल किया जा सकता है.

Add FocusTrap

cdkFocusTrap का इस्तेमाल, कस्टम कॉम्पोनेंट में फ़ोकस के क्रम को ट्रैप और कंट्रोल करने के लिए किया जा सकता है. mat-dialog-content का इस्तेमाल करके, डायलॉग में फ़ोकस को ट्रैप करके ज़्यादातर समस्याओं को हल किया जा सकता है. कलर पिकर डायलॉग में, डंपलिंग रैपर के रंग <mat-selection-list> पर फ़ोकस करने के लिए, cdkFocusInitial एट्रिब्यूट जोड़ें.

src/app/shop/color-picker/color-picker-dialog/color-picker-dialog.component.html

<mat-selection-list #colors aria-label="Dumpling wrapper color" multiple="false" cdkFocusInitial>
  ...
</mat-selection-list>

बदलावों की पुष्टि करें

स्क्रीन रीडर को फिर से चालू करें और अपने बदलावों की पुष्टि करें. डायलॉग बॉक्स में, अब फ़ोकस रंग बदलें पर सेट हो जाता है!

सुलभता ऑडिट:

• ✅ सभी पेजों के लिए यूनीक पेज टाइटल मौजूद हैं
• ✅ रंगों का कंट्रास्ट अनुपात काफ़ी है
• ✅ सिमेंटिक एचटीएमएल से लॉजिकल इंटरैक्शन पक्का होता है
• ✅ सभी कंट्रोल को स्क्रीन रीडर से ऐक्सेस किया जा सकता है
• ✅ स्लाइडर में लेबल देने के लिए ARIA एट्रिब्यूट का इस्तेमाल किया गया है
• ✅ कलर पिकर में फ़ोकस ट्रैपिंग की सुविधा सही तरीके से काम करती है
• 🛑 बदलावों, गड़बड़ियों, और सूचनाओं के बारे में नहीं बताया जाता
• 🛑 हाई कंट्रास्ट मोड चालू नहीं है

11. लाइव ऐनाउंस की सुविधा का इस्तेमाल करके बदलावों के बारे में बताना

जब पेज पर कोई बदलाव होता है, तो स्क्रीन रीडर को इसकी सूचना मिलनी चाहिए. कल्पना करें कि आपको कोई फ़ॉर्म सबमिट करना है या खरीदारी पूरी करनी है. हालांकि, आपको यह पता नहीं है कि कोई गड़बड़ी हुई है और इस वजह से फ़ॉर्म सबमिट नहीं हो रहा है. यह बहुत परेशान करने वाला है!

LiveAnnouncer का इस्तेमाल, स्क्रीन रीडर का इस्तेमाल करने वाले लोगों के लिए मैसेज का एलान करने के लिए किया जाता है. इसके लिए, aria-live रीजन का इस्तेमाल किया जाता है, ताकि यह पक्का किया जा सके कि स्क्रीन रीडर को सूचनाओं और पेज में होने वाले लाइव बदलावों के बारे में सूचना मिले. aria-live क्षेत्रों के बारे में ज़्यादा जानने के लिए, W3C के WAI-ARIA पर जाएं. Angular में, LiveAnnouncer को सेवा के तौर पर कॉल करना, aria-live एट्रिब्यूट के मुकाबले ज़्यादा टेस्ट किया जा सकने वाला समाधान है.

इस सेक्शन के आखिर तक, आपका ऐप्लिकेशन इन ऑडिट को पास कर लेगा:

• 🛑 बदलावों, गड़बड़ियों, और सूचनाओं के बारे में नहीं बताया जाता

आपको ये चरण, टिप्पणियों में दिखेंगे: TODO: #11. Announce changes with LiveAnnouncer.

समस्या का पता लगाना

इस समस्या की पहचान करने के लिए, स्क्रीन रीडर चालू करें और फ़ॉर्म फ़ील्ड भरे बिना खरीदारी करें को चुनें:

1. VoiceOver चालू करें.
2. टैब नेविगेशन का इस्तेमाल करके, रंग बदलें और फ़र्ज़ी खरीदारी करें.
3. ध्यान दें कि डायलॉग से बाहर निकलने पर, यह नहीं पता चलता कि कौनसा रंग चुना गया था. साथ ही, खरीदारी की जानकारी भी नहीं दिखती.

अपने कोड में LiveAnnouncer जोड़ना

LiveAnnouncer को जोड़ें. साथ ही, रंग चुनने और फ़र्ज़ी खरीदारी करने की जानकारी को एक स्ट्रिंग के तौर पर बोलकर सुनाएं. असल में, इस कुकी को तब पढ़ा जा सकता है, जब तीसरे पक्ष के पेमेंट सिस्टम पर नेविगेट किया जाता है या फ़ॉर्म में गड़बड़ियां होती हैं.

1. कोई रंग चुने जाने पर सूचना जोड़ने के लिए:

src/app/shop/color-picker/color-picker-dialog/color-picker-dialog.component.ts

import { LiveAnnouncer } from '@angular/cdk/a11y';

@Component(...)
export class ColorPickerDialogComponent implements OnInit {
  constructor(
    public dialogRef: MatDialogRef<ColorPickerDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: ColorDialogData,
    private liveAnnouncer: LiveAnnouncer) { }

  public changeColor(color: string): void {
    this.liveAnnouncer.announce(`Select color: ${color}`);
    this.dialogRef.close();
  }
}

2. फ़र्ज़ी खरीदारी किए जाने पर सूचना जोड़ें:

src/app/shop/shop.component.ts

import { LiveAnnouncer } from '@angular/cdk/a11y';

@Component(...)
export class ShopComponent implements OnInit {

  constructor(private liveAnnouncer: LiveAnnouncer) { }

  fauxPurchase(): void {
    let flavor = '...';
    const fakePurchase = `Purchase ${this.quantity} ${flavor}dumplings in the color ${this.color}!`;

    this.liveAnnouncer.announce(fakePurchase);
  }
}

बदलावों की पुष्टि करें

स्क्रीन रीडर को फिर से चालू करें और अपने बदलावों की पुष्टि करें. अब आपको अपनी गड़बड़ियों के बारे में सूचना मिलेगी!

सुलभता ऑडिट:

• ✅ सभी पेजों के लिए यूनीक पेज टाइटल मौजूद हैं
• ✅ रंगों का कंट्रास्ट अनुपात काफ़ी है
• ✅ सिमेंटिक एचटीएमएल से लॉजिकल इंटरैक्शन पक्का होता है
• ✅ सभी कंट्रोल को स्क्रीन रीडर से ऐक्सेस किया जा सकता है
• ✅ स्लाइडर में लेबल देने के लिए ARIA एट्रिब्यूट का इस्तेमाल किया गया है
• ✅ कलर पिकर में फ़ोकस ट्रैपिंग की सुविधा सही तरीके से काम करती है
• ✅ बदलावों, गड़बड़ियों, और सूचनाओं के बारे में एलान किया जाता है
• 🛑 हाई कंट्रास्ट मोड चालू नहीं है

12. HighContrast मोड चालू करना

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

HighContrastModeDetector की मदद से यह पता लगाया जा सकता है कि ब्राउज़र फ़िलहाल हाई-कंट्रास्ट-मोड एनवायरमेंट में है या नहीं.

Internet Explorer, Microsoft Edge, और Firefox पर यह मोड काम करता है. Google Chrome, Windows के हाई कंट्रास्ट मोड के साथ काम नहीं करता. यह सेवा, Chrome High Contrast ब्राउज़र एक्सटेंशन से जोड़े गए ज़्यादा कंट्रास्ट वाले मोड का पता नहीं लगाती है.

इस सेक्शन के आखिर तक, आपका ऐप्लिकेशन इन ऑडिट को पास कर लेगा:

• 🛑 हाई कंट्रास्ट मोड चालू नहीं है

आपको ये चरण, टिप्पणियों में दिखेंगे: TODO: #12. Enable HighContrast mode.

समस्या का पता लगाना

इस समस्या का पता लगाने के लिए, अपने ऐप्लिकेशन को Internet Explorer, Microsoft Edge या Firefox में खोलें. इसके बाद, ज़्यादा कंट्रास्ट वाला मोड चालू करें और देखें कि कोई बदलाव नहीं हुआ है:

1. Internet Explorer, Microsoft Edge या Firefox में अपना ऐप्लिकेशन खोलें.
2. ज़्यादा कंट्रास्ट वाला मोड चालू करें.
3. ध्यान दें कि ऐप्लिकेशन में कोई बदलाव नहीं किया गया है.

ज़्यादा कंट्रास्ट वाले मोड के लिए सहायता जोड़ना

styles.scss में, @angular/cdk/a11y में दिए गए cdk-high-contrast मिक्सइन का इस्तेमाल करके, हाई कंट्रास्ट मोड में अपने बटन में आउटलाइन जोड़ें:

src/app/shop/shop.component.scss

@use '@angular/cdk';

.purchase-button {
    border-radius: 5px;
    background-color: mat.get-color-from-palette(mat.$pink-palette, A100);

    @include cdk-high-contrast {
      outline: solid 1px;
      background-color: mat.get-color-from-palette(mat.$pink-palette, 50);
    }
}

:host-context(.dark-theme) {
  .purchase-button {
    background-color: mat.get-color-from-palette(mat.$light-green-palette, A100);

    @include cdk-high-contrast {
      outline: solid 1px;
      background-color: mat.get-color-from-palette(mat.$light-green-palette, 50);
    }
  }
}

बदलावों की पुष्टि करें

ऐप्लिकेशन को रीफ़्रेश करें और अपने बदलावों की पुष्टि करें. आपने ज़्यादा कंट्रास्ट वाले मोड में बटन में आउटलाइन जोड़ी है!

सुलभता ऑडिट:

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

13. बधाई हो!

बधाई हो, आपने अपने Angular ऐप्लिकेशन में वेब ऐक्सेसिबिलिटी से जुड़ी सामान्य समस्याओं को ठीक कर लिया है! 🎉

सभी समाधान देखने के लिए, main ब्रांच देखें.

अब आपको अपने Angular ऐप्लिकेशन में, सुलभता से जुड़ी आठ सामान्य समस्याओं को हल करने के लिए ज़रूरी चरणों के बारे में पता चल गया है.

ज़्यादा जानें

इन कोडलैब को आज़माएँ:

• Angular और Firebase की मदद से वेब ऐप्लिकेशन बनाना
• Chrome DevTools की मदद से, कम कंट्रास्ट वाले टेक्स्ट का पता लगाना और उसे ठीक करना

इन दस्तावेज़ों को पढ़ें:

• Angular.io
• Angular Material a11y
• सुलभता से जुड़ी बुनियादी बातें
• https://web.dev/accessible/