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

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

Angular का काला लोगो

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

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

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. बेसलाइन तय करना

आपका शुरुआती पॉइंट क्या है?

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

बैंगनी और हरे रंग की थीम वाली Dumpling Time की शॉपिंग वेबसाइट

डेमो देखें

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

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

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

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

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

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

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

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

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

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

स्क्रीन रीडर चालू करके और स्क्रीन पर नेविगेट करके, इसका अभ्यास करें.

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

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

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

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

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

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

Chrome DevTools टैब में रिपोर्ट जनरेट करने के लिए, बटन के साथ लाइटहाउस टैब का उदाहरण

कुल्हाड़ी

  1. ऐक्सिस 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 के नए नियम देखें.

आपका शुरुआती पॉइंट

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

Chrome DevTools लाइटहाउस ऑडिट में 82 अंक मिले हैं

सुलभता ऑडिट:

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

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

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

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

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

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

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

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

समस्या की पहचान करना

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

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

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

तीन टैब वाला Chrome ब्राउज़र, जिसका पेज टाइटल एक जैसा है: 'A11y in Angular'

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

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

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

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

Chrome ब्राउज़र में तीन टैब खुले हुए हैं. इन टैब में, पेज के यूनीक टाइटल के तौर पर ये दिख रहे हैं: 'Our Shop - a11y in Angular', 'Our Story - a11y in Angular', 'Find Us - a11y in Angular'

सुलभता ऑडिट:

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

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

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

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

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

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

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

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

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

Chrome DevTools में कम कंट्रास्ट वाले होम बटन के एलिमेंट की जांच की गई है

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

Chrome DevTools Lighthouse की जांच के नतीजे, जिसमें गड़बड़ी है: 'बैकग्राउंड और फ़ोरग्राउंड के रंगों में काफ़ी कंट्रास्ट अनुपात नहीं है'

Material थीम का रंग बदलना

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

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

src/styles.scss

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

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

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

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

Chrome DevTools में, होम बटन के एलिमेंट की जांच करने पर, उसका कलर कंट्रास्ट सही दिख रहा है

सुलभता ऑडिट

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

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

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

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

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

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

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

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

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

Chrome DevTools के लाइटहाउस ऑडिट के नतीजे, जिनमें गड़बड़ी है: हेडिंग एलिमेंट, कम होने वाले क्रम में नहीं हैं. सही क्रम में लगाई गई ऐसी हेडिंग जो लेवल को नहीं छोड़तीं वे पेज का सिमेंटिक स्ट्रक्चर दिखाती हैं. इससे सहायक टेक्नोलॉजी इस्तेमाल करते समय, पेज पर नेविगेट करना और उसे समझना आसान हो जाता है. ज़्यादा जानें.

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

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

src/app/shop/shop.component.html

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

शीर्षक एलिमेंट का क्रम से इस्तेमाल करना

सिमेंटिक एचटीएमएल का इस्तेमाल करने के लिए, टेक्स्ट का क्रम बदलें और Angular Material टाइपोग्राफ़ी का इस्तेमाल करके स्टाइल लागू करें:

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 के listbox का इस्तेमाल किया गया है.

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

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

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

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

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

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

विकल्पों के साथ, भराई का चेकबॉक्स मेन्यू: भराई के लिए शाकाहारी बोक चोई टोफ़ू और शिताके मीट चिकन इंपॉसिबल मीट

Angular Material में A11y

सिमैंटिक चेकबॉक्स को Angular 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
    })
  }
}
  1. एचटीएमएल चेकबॉक्स के इस गड़बड़ी वाले ग्रुप को बदलने के लिए, <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. ध्यान दें कि वैल्यू लेबल मौजूद नहीं है.

Chrome DevTools Lighthouse की ऑडिट रिपोर्ट में गड़बड़ी के साथ नतीजे: ARIA इनपुट फ़ील्ड का कोई ऐसा नाम नहीं है जिसे ऐक्सेस किया जा सकता हो. अगर किसी इनपुट फ़ील्ड का ऐक्सेस किया जा सकने वाला नाम नहीं है, तो स्क्रीन रीडर उसे किसी सामान्य नाम से बुलाते हैं. इस वजह से, यह ऐसे लोगों के लिए किसी काम का नहीं रहता जो स्क्रीन रीडर से ही टेक्स्ट पढ़ या समझ सकते हैं. ज़्यादा जानें.

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 कंट्रोल के लिए पासिंग ऑडिट के साथ Chrome DevTools लाइटहाउस ऑडिट.

सुलभता ऑडिट:

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

9. @angular/cdk/a11y की सुविधाएं जोड़ना

अब तक, a11y से जुड़ी सामान्य समस्याओं को ठीक करने के लिए, Angular में पहले से मौजूद टूल का इस्तेमाल किया जाता था. अब, आइए CDK के 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. फ़ोकस ट्रैप की मदद से फ़ोकस कंट्रोल करें

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

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

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

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

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

समस्या की पहचान करना

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

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

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

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 की मदद से बदलावों का एलान करना

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

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();
  }
}
  1. नकली खरीदारी होने पर सूचना जोड़ना:

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);
    }
  }
}

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

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

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

सुलभता ऑडिट:

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

13. बधाई हो!

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

सभी समाधान देखने के लिए, main शाखा देखें.

लाल और गुलाबी रंग की थीम में बनी डंपलिंग टाइम शॉप की वेबसाइट, इस कोडलैब में किए गए सभी बदलाव दिखाती है Dumpling Time की नीले और हरे रंग की थीम वाली शॉपिंग वेबसाइट, इस कोडलैब में किए गए सभी बदलाव दिखाती है Chrome DevTools का Lighthouse ऑडिट, जिसमें 100/100 का स्कोर है

अब आपको अपने Angular ऐप्लिकेशन में, सुलझाए जा सकने वाले आठ सामान्य a11y फ़ॉल्ट को ठीक करने के लिए ज़रूरी मुख्य चरणों के बारे में पता है.

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

ये कोडलैब देखें:

ये लेख पढ़ें: