वेब डेवलपर के लिए सुलभता

सुलभता सुविधाओं में सुधार करने से आपकी साइट सभी के लिए ज़्यादा उपयोगी बन जाती है.

Addy Osmani

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

एक अरब से ज़्यादा लोग जो किसी न किसी रूप में दिव्यांग हैं.

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

यहां कुछ ऐसी परेशानियों के बारे में बताया गया है जो आपके उपयोगकर्ताओं को हो सकती हैं:

विज़ुअल से जुड़ी समस्याएं, रंगों में फ़र्क़ करने में मदद न कर पाने से लेकर देख नहीं पाते हैं.

• पक्का करें कि टेक्स्ट कॉन्टेंट, ज़रूरी शर्तों के मुताबिक हो कंट्रास्ट अनुपात का थ्रेशोल्ड.
• लोगों को जानकारी देने से बचें सिर्फ़ रंगों का इस्तेमाल करके और पक्का करें कि सभी टेक्स्ट साइज़ बदला जा सकता है.
• पक्का करना कि यूज़र इंटरफ़ेस के सभी कॉम्पोनेंट, सहायक टेक्नोलॉजी के साथ इस्तेमाल किए जा सकते हों जैसे, स्क्रीन रीडर, स्क्रीन पर मौजूद कॉन्टेंट को बड़ा करके दिखाना, और ब्रेल डिसप्ले. इससे यह पक्का करना ज़रूरी है कि यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट मार्कअप किए गए हैं इससे सुलभता एपीआई प्रोग्राम के ज़रिए यह तय कर सकते हैं कि किसी भी एलिमेंट की role, state, value, और title.

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

सुनने की समस्याओं का मतलब है कि उपयोगकर्ता को किसी पेज से आवाज़ सुनने में समस्या हो सकती है.

• उपलब्ध कराएं टेक्स्ट के विकल्प का इस्तेमाल करें.
• जांचें कि आपके यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट अब भी काम कर रहे हैं बिना आवाज़ के.

मोबिलिटी से जुड़ी समस्याओं में माउस, कीबोर्ड या टचस्क्रीन.

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

समझने में आने वाली समस्याओं का मतलब है कि किसी उपयोगकर्ता को सहायक टेक्नोलॉजी की ज़रूरत पड़ सकती है ताकि उन्हें टेक्स्ट पढ़ने में मदद मिल सके. इसलिए, यह पक्का करना ज़रूरी है कि टेक्स्ट के विकल्प मौजूद हों.

• ऐनिमेशन का इस्तेमाल करते समय सावधान रहें. ऐसे वीडियो और ऐनिमेशन से बचें रिपीट या फ़्लैश का इस्तेमाल किया जाता है, जिसकी वजह से समस्याएं हो सकती हैं कुछ लोगों के लिए है.

  prefers-reduced-motion सीएसएस मीडिया क्वेरी की मदद से, ऐनिमेशन को सीमित किया जा सकता है जिन लोगों को कम मोशन करना पसंद है उनके लिए, अपने-आप वीडियो चलने की सुविधा:

  /*
  If the user expresses a preference for reduced motion, don't use animations on buttons.
  */
  @media (prefers-reduced-motion: reduce) {
    button {
      animation: none;
    }
  }
  

• ऐसे इंटरैक्शन से बचें जो समय-आधारित होगा.

ऐसा लग सकता है कि इसमें कई आधार शामिल हैं, हालाँकि, हम आपके विज्ञापनों का आकलन करने की प्रोसेस और इसके बाद, यूज़र इंटरफ़ेस (यूआई) के कॉम्पोनेंट की सुलभता को बेहतर बनाया जा सकता है.

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

यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट की सुलभता को मेज़र करना

सुलभता के लिए अपने पेज के यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट का ऑडिट करते समय, खुद से पूछें:

• क्या यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट को सिर्फ़ कीबोर्ड के साथ इस्तेमाल किया जा सकता है?

  क्या यह कॉम्पोनेंट फ़ोकस को मैनेज करता है और फ़ोकस ट्रैप से बचाता है? क्या यह कीबोर्ड के सही इवेंट का जवाब दे सकता है?

• क्या स्क्रीन रीडर के साथ अपने यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट का इस्तेमाल किया जा सकता है?

  क्या आपने विज़ुअल तौर पर दी गई किसी भी जानकारी के लिए टेक्स्ट के विकल्प दिए हैं? क्या आपने ARIA का इस्तेमाल करके सिमैंटिक जानकारी जोड़ी है?

• क्या आपका यूआई कॉम्पोनेंट बिना आवाज़ के काम कर सकता है?

  अपने स्पीकर बंद करें और अपने उपयोग के उदाहरण देखें.

• क्या आपका यूआई कॉम्पोनेंट बिना रंग के काम कर सकता है?

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

• क्या हाई-कंट्रास्ट मोड चालू होने पर, आपका यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट काम कर सकता है?

  सभी आधुनिक ऑपरेटिंग सिस्टम, हाई कंट्रास्ट मोड की सुविधा देते हैं. हाई कंट्रास्ट एक Chrome एक्सटेंशन है, जो यहां मदद कर सकता है.

<button> और <select> जैसे स्टैंडर्ड के मुताबिक बनाए गए कंट्रोल में सुलभता सुविधाएं होती हैं जो ब्राउज़र में पहले से मौजूद होते हैं. उन पर फ़ोकस करने के लिए, Tab बटन का इस्तेमाल किया जाता है; वे कीबोर्ड इवेंट का जवाब देते हैं (जैसे कि Enter, Space, और ऐरो बटन); साथ ही, इनमें सिमैंटिक भूमिकाएं, स्थितियां, और प्रॉपर्टी होती हैं. इनका इस्तेमाल सुलभता टूल में किया जाता है. साथ ही, उनकी डिफ़ॉल्ट स्टाइलिंग, सुलभता से जुड़ी शर्तों के मुताबिक होनी चाहिए.

कस्टम यूज़र इंटरफ़ेस (यूआई) के कॉम्पोनेंट (इसमें स्टैंडर्ड सुविधाएं देने वाले कॉम्पोनेंट शामिल नहीं हैं <button> जैसे एलिमेंट में पहले से कोई सुविधा मौजूद नहीं है. इनमें ये शामिल हैं इसलिए आपको इसे उपलब्ध कराना होगा. शुरू करने के लिए यह एक अच्छी जगह है सुलभता को लागू करना आपके कॉम्पोनेंट की तुलना किसी एनालॉग स्टैंडर्ड से करना है एलिमेंट या कई स्टैंडर्ड एलिमेंट का कॉम्बिनेशन. यह इस बात पर निर्भर करता है कि एलिमेंट कितना मुश्किल है आपका कॉम्पोनेंट है).

ज़्यादातर ब्राउज़र डेवलपर टूल में, किसी पेज के सुलभता ट्री की जांच की जा सकती है. Chrome DevTools में, यह एलिमेंट पैनल के सुलभता टैब में उपलब्ध है.

Firefox में एक सुलभता पैनल भी है.

Safari, Elements पैनल के Elements टैब में सुलभता की जानकारी दिखाता है.

नीचे उन सवालों की सूची दी गई है जिन्हें अपने यूज़र इंटरफ़ेस (यूआई) के कॉम्पोनेंट को ज़्यादा से ज़्यादा लोगों तक पहुंचाने के लिए खुद से पूछा जा सकता है.

कीबोर्ड का फ़ोकस बेहतर बनाएं

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

सबसे पहले, यह पक्का करें कि आपके पास हर कॉम्पोनेंट के लिए एक सही फ़ोकस टारगेट हो. उदाहरण के लिए, मेन्यू जैसा कोई कॉम्प्लेक्स कॉम्पोनेंट, लेकिन फिर फ़ोकस को उसी पृष्ठ पर प्रबंधित करें, ताकि सक्रिय मेनू आइटम हम हमेशा फ़ोकस करते हैं.

Tabindex का इस्तेमाल करें

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

पहले से मौजूद इंटरैक्टिव एलिमेंट (जैसे कि <button>), साफ़ तौर पर फ़ोकस करने लायक होते हैं, इसलिए उन्हें tabindex एट्रिब्यूट की ज़रूरत नहीं होती. एट्रिब्यूट की जगह बदलने के लिए, डालें.

tabindex वैल्यू तीन तरह की होती हैं:

• tabindex="0" सबसे सामान्य क्वेरी है और यह एलिमेंट को नैचुरल टैब में रखती है ऑर्डर (DOM ऑर्डर से तय किया गया).
• -1 के बराबर tabindex वैल्यू की वजह से एलिमेंट, प्रोग्राम के हिसाब से बनता है फ़ोकस करने लायक, लेकिन टैब क्रम में नहीं.
• tabindex की वैल्यू 0 से ज़्यादा होने पर, एलिमेंट को मैन्युअल टैब के क्रम में रखा जाता है. पेज के उन सभी एलिमेंट को यहां विज़िट किया गया है जिनकी tabindex वैल्यू पॉज़िटिव है स्वाभाविक टैब क्रम में एलीमेंट से पहले संख्यात्मक क्रम.

लेख में, tabindex के इस्तेमाल के कुछ उदाहरण देखें Tabindex का इस्तेमाल करना.

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

ऑटोफ़ोकस सुविधा का इस्तेमाल करना

एचटीएमएल ऑटोफ़ोकस एट्रिब्यूट की मदद से, लेखक यह तय कर सकता है कि कोई खास एलिमेंट पर अपने-आप फ़ोकस होना चाहिए को लोड होने में मदद करता है. autofocus पहले से ही इस पर काम करता है वेब फ़ॉर्म के सभी कंट्रोल, ट्रैक करने में मदद मिलती है. अपने कस्टम यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट में ऑटोफ़ोकस एलिमेंट के लिए, focus() तरीके को कॉल करें, उन सभी एचटीएमएल एलिमेंट पर काम करता है जिन पर फ़ोकस किया जा सकता है (उदाहरण के लिए, document.querySelector('myButton').focus()).

कीबोर्ड इंटरैक्शन जोड़ना

जब आपका यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट फ़ोकस करने लायक हो जाए, तो कीबोर्ड के साथ बेहतर तरीके से इंटरैक्शन करें जब किसी कॉम्पोनेंट पर सही कीबोर्ड इवेंट को हैंडल करके फ़ोकस किया जाता है. उदाहरण के लिए, मेन्यू के विकल्प चुनने के लिए, उपयोगकर्ता को ऐरो बटन का इस्तेमाल करने की अनुमति दें और बटन चालू करने के लिए Space या Enter. ARIA डिज़ाइन पैटर्न की गाइड यहाँ कुछ दिशा-निर्देश उपलब्ध हैं.

अंत में, यह पक्का करें कि आपके कीबोर्ड शॉर्टकट खोजे जा सकते हैं. कीबोर्ड शॉर्टकट लेजेंड (ऑन-स्क्रीन टेक्स्ट) का इस्तेमाल करना एक आम तरीका है का इस्तेमाल करें. उदाहरण के लिए, "Press ? कीबोर्ड के लिए का इस्तेमाल करना है." इसके अलावा, उपयोगकर्ता को सूचित करने के लिए इस तरह के टूलटिप का इस्तेमाल किया जा सकता है जानकारी होती है.

फ़ोकस को मैनेज करने की अहमियत को नज़रअंदाज़ नहीं किया जा सकता. अहम उदाहरण है, एक नेविगेशन पैनल होना चाहिए. अगर आपने पेज में यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट जोड़ा है, आपको इसके अंदर मौजूद किसी एलिमेंट पर सीधे फ़ोकस करना होगा; ऐसा न होने पर, उपयोगकर्ताओं को उस पेज पर जाने के लिए पूरा पेज टैब करना पड़ सकता है. इससे परेशानी हो सकती है, इसलिए, अपने पेज के सभी कीबोर्ड इस्तेमाल किए जा सकने वाले कॉम्पोनेंट पर फ़ोकस की जांच ज़रूर करें.

// Example for expanding and collapsing a category with the Space key
const category = await page.$(`.category`);

// verify tabIndex, role and focus
expect(await page.evaluate(elem => elem.getAttribute(`role`), category)).toEqual(`button`);
expect(await page.evaluate(elem => elem.getAttribute(`tabindex`), category)).toEqual(`0`);
expect(await page.evaluate(elem => window.document.activeElement === elem, category)).toEqual(true);

// verify aria-expanded = false
expect(await page.evaluate(elem => elem.getAttribute(`aria-expanded`), category)).toEqual(`false`);

// toggle category by pressing Space
await page.keyboard.press('Space');

// verify aria-expanded = true
expect(await page.evaluate(elem => elem.getAttribute(`aria-expanded`), category)).toEqual(`true`);

पक्का करें कि स्क्रीन रीडर का सही तरीके से इस्तेमाल किया जा रहा हो

करीब 1% से 2% लोग, स्क्रीन रीडर का इस्तेमाल करते हैं. क्या तुम ज़रूरी सभी बातें समझ सकती हो स्क्रीन रीडर और कीबोर्ड का इस्तेमाल करके, कॉम्पोनेंट के साथ इंटरैक्ट करना अकेले?

इन सवालों से, आपको स्क्रीन रीडर की सुलभता सुविधाओं को इस्तेमाल करने में मदद मिलेगी.

क्या सभी कॉम्पोनेंट और इमेज के लिए टेक्स्ट के काम के विकल्प हैं?

जहां भी नाम या मकसद के बारे में जानकारी मौजूद हो विज़ुअल के तौर पर, एक सुलभ टेक्स्ट विकल्प उपलब्ध कराएं.

उदाहरण के लिए, अगर आपका <fancy-menu> यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट सिर्फ़ गियर आइकॉन दिखाता है ताकि यह पता चल सके कि यह सेटिंग मेन्यू है. तो उसे एक सुलभता विकल्प की ज़रूरत होती है. जो एक ही जानकारी देता हो. कॉन्टेक्स्ट के आधार पर, आपके पास alt एट्रिब्यूट का इस्तेमाल करके, टेक्स्ट का विकल्प दिया जा सकता है. एक aria-label एट्रिब्यूट, एक aria-labelledby एट्रिब्यूट, शैडो DOM में सादा टेक्स्ट. आपको WebAIM क्विक रेफ़रंस में सामान्य तकनीकी सलाह मिल सकती है.

इमेज दिखाने वाले किसी भी यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट को एक तरीका देना चाहिए ताकि उस इमेज के लिए वैकल्पिक टेक्स्ट दिया जा सके. यह टेक्स्ट, alt एट्रिब्यूट के जैसा होना चाहिए.

क्या आपके कॉम्पोनेंट सिमैंटिक जानकारी देते हैं?

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

आम तौर पर, माउस क्लिक या होवर इवेंट को सुनने वाला कोई भी कॉम्पोनेंट में कीबोर्ड इवेंट लिसनर और ARIA की भूमिका होगी ARIA स्टेटस और एट्रिब्यूट भी शामिल हैं.

उदाहरण के लिए, पसंद के मुताबिक बनाया गया <fancy-slider> यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट, स्लाइडर का ARIA रोल ले सकता है, इसमें मिलते-जुलते ARIA एट्रिब्यूट हैं: aria-valuenow, aria-valuemin, और aria-valuemax. इन एट्रिब्यूट को अपने कस्टम कॉम्पोनेंट पर काम की प्रॉपर्टी के साथ जोड़कर, की मदद से, सहायक टेक्नोलॉजी के उपयोगकर्ताओं को एलिमेंट के साथ इंटरैक्ट करने की अनुमति दी जा सकती है, उसका मान बदल सकता है और यहां तक कि एलिमेंट के विज़ुअल प्रज़ेंटेशन में उसके मुताबिक बदलाव भी कर सकता है.

<fancy-slider role="slider" aria-valuemin="1" aria-valuemax="5" aria-valuenow="2.5">
</fancy-slider>

क्या उपयोगकर्ता रंगों पर निर्भर हुए बिना सब कुछ समझ सकते हैं?

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

क्या इसमें काफ़ी कंट्रास्ट है?

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

क्या कॉन्टेंट को इधर-उधर ले जाने या फ़्लैश करने की सुविधा को बंद और सुरक्षित किया जा सकता है?

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

अगर कुछ फ़्लैश होना चाहिए, तो यह पक्का करें कि यह एक सेकंड में तीन से ज़्यादा बार फ़्लैश न हो.

सुलभता टूल और जांच करना

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

यहां कुछ सुझाव दिए गए हैं, जिन पर आपको विचार करना चाहिए:

• Axe, अपने-आप सुलभता सुविधा देता है टेस्टिंग के लिए, आपके पसंदीदा ब्राउज़र या फ़्रेमवर्क का इस्तेमाल करें. कुल्हाड़ी कठपुतली का इस्तेमाल, अपने-आप होने वाली सुलभता जांचों को लिखने के लिए किया जा सकता है.

• Lighthouse सुलभता ऑडिट से, सुलभता से जुड़ी आम समस्याओं का पता लगाने में मदद मिलती है. सुलभता स्कोर, सुलभता से जुड़े सभी ऑडिट का औसत होता है Axe उपयोगकर्ता के असर के आकलन पर आधारित हो. लगातार इंटिग्रेशन के साथ सुलभता की निगरानी करने के लिए, यहां देखें लाइटहाउस सीआई.

  

• Tenon.io का इस्तेमाल, सुलभता से जुड़ी आम समस्याओं की जांच करने के लिए किया जा सकता है. Tenon के पास बिल्ड टूल और ब्राउज़र ( एक्सटेंशन) और यहां तक कि टेक्स्ट एडिटर भी इस्तेमाल कर सकते हैं.

• हाइलाइट करने के लिए, लाइब्रेरी और फ़्रेमवर्क के हिसाब से कई टूल उपलब्ध हैं कॉम्पोनेंट की सुलभता से जुड़ी समस्याएं हुईं. उदाहरण के लिए, इस्तेमाल के लिए eslint-plugin-jsx-a11y का इस्तेमाल करें.

  

  अगर Angular, codelyizer का इस्तेमाल किया जा रहा है इन-एडिटर ऐक्सेसिबिलिटी ऑडिट की सुविधा भी देता है:

  

सहायक टेक्नोलॉजी का इस्तेमाल करना

• यह पता लगाने के लिए कि सहायक टेक्नोलॉजी, वेब कॉन्टेंट को किस तरह देखती हैं. इसके लिए, सुलभता जांचने वाला टूल (Mac) या Windows Automation API की जांच करने के लिए इस्तेमाल होने वाले टूल और AccProbe (Windows) के लिए उपलब्ध है. आपके पास Chrome का बनाया हुआ पूरा सुलभता ट्री देखने का विकल्प भी है about://accessibility पर जाकर.
• Mac पर स्क्रीन रीडर की सुविधा उपलब्ध है या नहीं, इसकी जांच करने का सबसे अच्छा तरीका है VoiceOver का इस्तेमाल करना उपयोगिता. इसे चालू या बंद करने के लिए ⌘F5 का इस्तेमाल करें. आगे बढ़ने के लिए Ctrl+Option ←→ का इस्तेमाल करें साथ ही, सुलभता सुविधाओं को ऊपर और नीचे ले जाने के लिए Ctrl+Shift+Option + ↑↓ को पेड़ ज़्यादा जानकारी के लिए, VoiceOver के निर्देशों की पूरी सूची देखें और VoiceOver वेब कमांड की सूची भी दिखेगी.

• Windows पर, NVDA एक ओपन सोर्स स्क्रीन है. इसके लिए कोई शुल्क नहीं लिया जाता रीडर. हालांकि, देख सकने वाले उपयोगकर्ताओं के लिए यह बहुत ज़्यादा सीखता है.

  

• ChromeOS में पहले से मौजूद स्क्रीन रीडर.

वेब पर सुलभता को बेहतर बनाने के लिए हम अभी बहुत कुछ करना चाहते हैं. वेब कैलेंडर के मुताबिक:

• हर पांच में से चार साइटों में ऐसा टेक्स्ट है जो बैकग्राउंड में ब्लेंड हो जाता है, ऐसा न करके उन्हें पढ़ा नहीं जा सकता.
• 49.91% पेज अब भी अपनी कुछ इमेज के लिए alt एट्रिब्यूट नहीं दे पा रहे हैं.
• बटन या लिंक का इस्तेमाल करने वाले सिर्फ़ 24% पेजों में लेबल शामिल होते हैं.
• सिर्फ़ 22.33% पेजों में ही फ़ॉर्म के सभी इनपुट के लिए लेबल मौजूद होते हैं.

लोगों के लिए ज़्यादा से ज़्यादा संसाधन उपलब्ध कराने के लिए, हम बहुत कुछ कर सकते हैं सभी.