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

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

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

किसी व्यक्ति के वेब के इस्तेमाल पर असर डालने वाली सामान्य स्थितियों में, दृष्टिहीनता या कम दृष्टि, बहरापन या कम सुनने की समस्या, सीमित मोटर स्किल, सीखने-बात करने में दिक्कत, और कलर ब्लाइंडनेस शामिल हैं. यह सूची सिर्फ़ कुछ ही है.

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

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

आपको क्या बनाना होगा

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

आपको इनके बारे में जानकारी मिलेगी

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

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

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

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

2. सेट अप करें

कोड पाएं

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

डेटा स्टोर करने की जगह का क्लोन बनाना और ऐप्लिकेशन को इंस्टॉल करना

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

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 का इस्तेमाल करना

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

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

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

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

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

मैन्युअल तरीके से जांच करना

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

प्रैक्टिस करने के लिए, स्क्रीन रीडर चालू करें और स्क्रीन पर नेविगेट करें.

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

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

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

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

लाइटहाउस और Chrome डेवलपर टूल

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

कुल्हाड़ी

1. ऐक्सिस DevTools एक्सटेंशन इंस्टॉल करें. एक्सटेंशन देखने के लिए, आपको अपना ब्राउज़र रीस्टार्ट करना पड़ सकता है.
2. Chrome डेवलपर टूल खोलें.
3. ऐक्सिस DevTools टैब को चुनें. इसके बाद, ऐक्सिस 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 के नए नियम देखें.

शुरुआत की जगह

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

सुलभता ऑडिट:

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

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

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

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

Angular v14 में, राऊटर में पहले से मौजूद एक तरीका जोड़ा गया है. इसकी मदद से, पेजों के यूनीक टाइटल बनाए जा सकते हैं. इससे यह पक्का किया जा सकता है कि डेवलपर, पेज के टाइटल के सबसे सही तरीकों का पालन करते हैं.

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

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

इनमें से हर चरण आपको टिप्पणी में दिखेगा: TODO: #4. Define unique page titles.

समस्या का पता लगाएं

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

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

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

पेज के लिए ऐसे टाइटल जोड़ना जो काम के हों

अगर कोई पेज या व्यू बदल जाता है, तो आपको पेज का टाइटल ठीक से मैनेज करना होगा. इस समस्या को हल करने के लिए, 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 है, जो डब्ल्यूसीएजी की ज़रूरी शर्तों से काफ़ी नीचे है.

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

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

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

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

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. खरीदारी पर क्लिक करें.
5. ध्यान दें कि बटन की पहचान बटन के तौर पर नहीं हो पाई.

<div> बदलना <button> पर

कस्टम <div> बदलें मटीरियल बटन का इस्तेमाल करके:

src/app/shop/shop.component.html

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

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

सिमैंटिक एचटीएमएल का इस्तेमाल करने के लिए टेक्स्ट का क्रम बदलें. साथ ही, ऐंगुलर मटीरियल टाइपोग्राफ़ी का इस्तेमाल करके स्टाइलिंग लागू करें:

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 में, नेविगेशन और कंट्रोल को आसान बनाया जा सकता है. इससे, नेविगेट किए जा सकने वाले कॉम्पोनेंट बनाए जा सकते हैं. ऐसा करने के लिए, कंट्रोल को जहां तक संभव हो आसान बना दें. इस उदाहरण में, इस इंटरैक्शन पैटर्न का एक उदाहरण बनाने के लिए, Angular Material के लिस्टबॉक्स का इस्तेमाल किया जा रहा है.

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

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

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

समस्या का पता लगाएं

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

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

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

सिमैंटिक चेकबॉक्स को Angular 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 ऐप्लिकेशन के सिमैंटिक एचटीएमएल और मटीरियल कॉम्पोनेंट में बदलाव किया है. हालांकि, कुछ कॉम्पोनेंट को स्क्रीन रीडर से पूरी तरह नेविगेट करने के लिए, खास एट्रिब्यूट की ज़रूरत होती है.

वेब सुलभता इनिशिएटिव के ऐक्सेस किए जा सकने वाले रिच इंटरनेट ऐप्लिकेशन के बारे में खास जानकारी (डब्ल्यूएएआई-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 टूल का इस्तेमाल करते थे. चलिए, अब CDK के a11y मॉड्यूल पर नज़र डालते हैं. साथ ही, देखते हैं कि यह मुश्किल और खास तौर पर ऐंग्युलर समस्याओं को हल करने में हमारी मदद कैसे कर सकता है.

इस सेक्शन के आखिर तक, आपको 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 मॉड्यूल सुलभता को बेहतर बनाने के लिए कई टूल देता है. यह खास तौर पर कॉम्पोनेंट लेखकों के लिए काम का है.

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

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

10. फ़ोकस ट्रैप की मदद से फ़ोकस कंट्रोल करें

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

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

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

• 🛑 रंग चुनने वाले टूल पर स्क्रीन रीडर के फ़ोकस की वजह से, डायलॉग बॉक्स बंद हो जाता है

टिप्पणियों में यह तरीका देखा जा सकता है: TODO: #10. Control focus with FocusTrap.

समस्या का पता लगाएं

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

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

फ़ोकस ट्रैप जोड़ें

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. Liveउद्घोषक की मदद से बदलावों की सूचना देना

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

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

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

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

टिप्पणियों में यह तरीका देखा जा सकता है: TODO: #11. Announce changes with LiveAnnouncer.

समस्या का पता लगाएं

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

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

अपने कोड में Live अंगूठी जोड़ना

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

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. हाई कंट्रास्ट मोड चालू करें

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

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

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

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

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

टिप्पणियों में यह तरीका देखा जा सकता है: 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
• ऐंगुलर मटीरियल a11y
• सुलभता की बुनियादी बातें
• https://web.dev/accessible/