परीक्षण इंटरफ़ेस उपलब्धता

1) क्यों और क्या हम सोचते हैं कि "तैयार" है

• WCAG 2 मानदंड मिले। 1/2. लक्ष्य प्लेटफार्मों के लिए 2 एए स्तर
• इंटरफ़ेस पूरी तरह से कीबोर्ड से पारित हो गया है;
• स्क्रीन पाठकों के साथ सही काम;
• विरोधाभास मानदंडों का पालन करते हैं;
• सभी राज्य/त्रुटियां/स्थितियां दृष्टि से बाहर और एक माउस के बिना उपलब्ध हैं;
• स्थानीयकरण, आरटीएल, कम गति और मोबाइल सुविधाओं को ध्यान में रखा जाता है।

2) परीक्षण रणनीति (पिरामिड A11y)

1. ऑटोटेस्ट/लिंटर्स (समस्या वर्गों के 40-60% तक का तेज कवरेज)।

2. मैनुअल पैटर्न जाँच (कुंजीपट, फ़ोकस, सामग्री, तर्क).

3. सहायक टेक (एटी) सत्र: स्क्रीन रीडर, स्केलिंग, रंग फिल्टर।

4. उपयोक्ताओं के साथ फील्ड परीक्षण (यदि संभ

लक्ष्य: घटक/पैटर्न स्तर पर प्रणालीगत दोषों को पकड़ ने के लिए ताकि वे सुविधाओं में गुणा न करें।

3) बुनियादी जाँच की सूची (त्वरित रन)

• कुंजीपटल: टैब/तीर द्वारा सब कुछ पहुँच योग्य है; फोकस का क्रम तार्किक है; मोडल्स में एक चाल जाल है; ईएससी/एंटर/स्पेस काम कर रहे हैं।
• फोकस संकेतक किसी भी विषय/पृष्ठभूमि में दिखाई देता है।
• कंट्रास्ट: पाठ ≥ 4। 5:1 (नियमित), ≥ 3:1 (बड़ा), आइकन/नियंत्रण पढ़ ने योग्य हैं।
• शब्दार्थ: सही टैग ('बटन', 'a', 'लेबल', 'ul/li', 'th/td'), भूमिकाएँ और 'aria-' केवल यदि आवश्यक हो।
• स्क्रीन रीडर: पदानुक्रम द्वारा शीर्षक, बटन/लिंक के सार्थक नाम, आइकन/छवियों के लिए विकल्प।
• प्रपत्र: स्पष्ट 'लेबल', संकेत/त्रुटियां संबंधित हैं ('आरिया-वर्णन'), त्रुटि ग्रंथ विशिष्ट हैं।
• गतिशीलता: टोस्ट/बैनर/त्रुटियों की घोषणा 'आरिया-लाइव' ('विनम्र '/' मुखर') के माध्यम से की जाती है।
• एनिमेशन 'पसंद-कम-गति' का सम्मान करते हैं; इंटरफ़ेस को "हिलाने" के बिना।
• स्थानीयकरण/आरटीएल: कुंजी स्क्रीन संरेखित हैं, संख्या/तिथि/मुद्राएँ उपयोगिताओं द्वारा स्वरूपित हैं।
• गतिशीलता: स्पर्श लक्ष्य ≥ 44 × 44 px, जूम निषिद्ध नहीं है, स्क्रीन रोटेशन सामग्री को नहीं तोड़ ता है।

4) भूमिकाएँ, जिम्मेदारियाँ और कलाकृतियाँ

डिजाइन प्रणाली: प्रत्येक घटक के विवरण में A11y आवश्यकताएं।

डेवलपर्स: ऑटो-चेक, यूनिट/इंटरैक्शन परीक्षण A11y-asserts के साथ।

क्यूए: मैनुअल स्क्रिप्ट + एटी सत्र; गंभीरता/आवृत्ति के साथ रिपोर्ट

UX/Content: त्रुटियों/स्थिति की माइक्रोकोपी, पढ़ ने योग्यता जोर से।

कलाकृतियाँ: चेकलिस्ट, स्क्रिप्ट, एटी स्क्रीनकास्ट, WCAG संदर्भों, सिफारिशों के साथ दोषों की सूची।

5) स्वचालित जांच

लिंटर्स/विश्लेषक: कुल्हाड़ी, एस्लिंट-प्लगइन-jsx-a11y, pa11y, लाइटहाउस।

पाइपलाइन में: हम महत्वपूर्ण उल्लंघन (रोल/लेबल/कंट्रास्ट/टैब ट्रैप) के लिए पीआर को ब्लॉक करते हैं।

कंट्रास्ट स्नैपशॉट: विषयों/राज्यों के दृश्य परीक्षण।

6) मैनुअल परीक्षण: परिदृश्य

6. 1 कुंजीपट

केवल कुंजीपटल के साथ पृष्ठ के माध्यम से जाएँ (Tab/Shift + Tab/Enter/Space/Arrows).

जाँच करें: दृश्यता, प्राथमिकता, सभी कार्यों की उपलब्धता, "जाल" और "मृत" तत्वों की अनुपस्थिति।

एक मोडल में: अंदर फोकस करें, जब बंद किया जाता है, सर्जक पर लौटता है।

6. 2 स्क्रीन पाठक (न्यूनतम सेट)

डेस्कटॉप: NVDA/JAWS (विंडोज), वॉयसओवर (macOS)।

मोबाइल: वॉयसओवर (आईओएस), टॉकबैक (एंड्रॉइड)।

हम जांचते हैं: सही शीर्षक (एच-पदानुक्रम), बटन/लिंक के नाम, पढ़ ने की तालिकाएं ('th '/' स्कोप'), स्टेटस घोषित करना, समझने योग्य रूप त्रुटियां।

6. 3 सामग्री और माइक्रोकॉपी

हम महत्वपूर्ण ग्रंथों को जोर से पढ़ ते हैं - बिना अस्पष्टता के, "त्रुटि 400" के बिना।

त्रुटि = "क्या गलत है + कैसे तय करें + बाधा/प्रारूप।"

6. 4 गतिशीलता और जीवित क्षेत्र

सफलता का टोस्ट 'आरिया-लाइव = "विनम्र" है, त्रुटि' मुखर 'है।

पाठ द्वारा समझाया गया प्रगति/डाउनलोड; कंकाल को स्पिनर के लिए पसंद किया जाता है।

7) फॉर्म और त्रुटियां (गहराई में)

प्रत्येक क्षेत्र में एक संबद्ध लेबल होता है (प्लेसहोल्डर नहीं)।

त्रुटियां क्षेत्र के साथ जुड़ी हुई हैं: ' आरिया-अमान्य =" सही",' आरिया-वर्णन =" [त्रुटि आईडी]"।

प्रारूप सूत्र (तिथि, फोन नंबर) पहले से निर्दिष्ट हैं; मास्क इनपुट/सम्मिलन को नहीं तोड़ ते हैं।

त्रुटियों का सारांश बैनर जब जमा करें + ऑटो स्क्रॉलिंग और पहली त्रुटि पर ध्यान केंद्रित करें.

त्रुटि पाठ: विशिष्ट, तकनीकी शब्दजाल के बिना।

8) टेबल, सूची, रेखांकन

टेबल: हेडिंग 'th' with 'स्कोप = "col/row", हस्ताक्षर, फिर से शुरू।

सूची असली 'ul/ol/li' है, दिवस नहीं।

रेखांकन - वैकल्पिक तालिकाएं/विवरण; किंवदंतियां उपलब्ध हैं; रंग - एक एकल संकेत।

9) मल्टीमीडिया और एनिमेशन

वीडियो: उपशीर्षक/प्रतिलेख; कीबोर्ड नियंत्रण; ऑटोप्ले के बिना (या शांत के साथ)।

GIF/माइक्रोनिमेशन: 'पसंद-कम-गति' होने पर बंद करें; प्रकोप से बचना।

कंपन/ध्वनियाँ - वैकल्पिक और नकल नेत्रहीन/पाठ।

10) मोबाइल पहुँच

इंटरएक्टिव ≥ 44 × 44 px, पर्याप्त अंतराल।

स्केलिंग को प्रतिबंधित न करें ('उपयोगकर्ता-स्केलेबल = नहीं' के बिना मेटा व्यूपोर्ट)।

फॉर्म/कीबोर्ड: सही प्रकार ('टेल', 'ईमेल', 'संख्या'), तंत्र क्षमताओं को छुपाएँ नहीं.

डार्क थीम में और सिस्टम फोंट के साथ "अधिक" जांचें।

11) स्थानीयकरण, संख्या और आरटीएल

संदर्भ के साथ i18n कुंजियों के माध्यम से तार; लंबी भाषाएँ (DE/TR) लेआउट को नहीं तोड़ ती हैं।

दिनांक/मुद्रा प्रारूप - उपयोगिताएं, तार नहीं।

आरटीएल मोड: नेविगेशन आइकन को प्रतिबिंबित करें, फोकस और गाड़ी के क्रम, द्विदिश इनपुट की जांच करें।

12) महत्वपूर्ण प्रवाह की विशिष्टता (iGaming)

भुगतान/निष्कर्ष

स्पष्ट निर्देश, सीमा/समय सीमा/आयोग - पाठ में।

प्रदाता त्रुटियों को स्पष्ट रूप से घोषित किया जाता है, बिना कोड के; कार्रवाई का एक विकल्प है।

ऑपरेशन पुष्टि: तार्किक सीटीए, रद्द करने पर ध्यान केंद्रित करें।

CCM/सत्यापन

फोटो/दस्तावेजों के लिए चरण-दर-चरण सुझाव; प्रगति और ईटीए।

धुंधला/चकाचौंध/काट दी गई त्रुटियाँ - सुधार के उदाहरणों के साथ।

तटस्थ स्वर, कोई हास्य नहीं।

13) गंभीरता मूल्यांकन को दोष दें

अवरोधक: कुंजी कार्य (कुंजीपटल/स्क्रीन रीडर) पूरा नहीं किया जा सकता.

महत्वपूर्ण: महत्वपूर्ण कार्यक्षमता काम करती है, लेकिन गंभीर बाधाओं के साथ।

प्रमुख: रास्ते में मिलता है, एक वर्कअराउंड है।

माइनर: सौंदर्य प्रसाधन/गाइड के साथ गैर-अनुपालन कार्य को प्रभावित किए बिना।

प्रत्येक दोष WCAG मानदंड और स्क्रिप्ट को पुन: पेश किए जाने का संदर्भ है।

14) किया गया (A11y) की परिभाषा

माउस के बिना कुंजीपट स्क्रिप्ट पास करना 100% है.

कुल्हाड़ी/लाइटहाउस: कोई महत्वपूर्ण/उच्च उल्लंघन नहीं।

एए सभी विषयों/राज्यों में विपरीत है।

प्रमुख रास्तों (नवबार, सांचे, मोडल, टोस्ट) के स्क्रीन रीडर-रन।

A11y नए घटकों/सुविधाओं (रोल मॉडल, आरिया, फोकस, उदाहरण) के लिए प्रलेखन।

CI में A11y परीक्षण का प्रतिगमन।

15) प्रक्रियाएं और स्वचालन

विकास से पहले: A11y-criteria कार्यों में, फोकस/त्रुटि वाले लेआउट।

विकास में: स्थानीय विधानसभा के दौरान लिंटर्स/आहे; कंट्रास्ट/फोकस के दृश्य स्नैपशॉट।

CI में: महत्वपूर्ण पृष्ठों द्वारा pa11y/axe-स्कैन; अवरोधक/महत्वपूर्ण के तहत ड्रॉप का निर्माण करें

रिलीज के बाद: त्रैमासिक ऑडिट, उपयोगकर्ता शिकायतों की निगरानी।

16) एंटी-पैटर्न

लेबल के बजाय प्लेसहोल्डर।

'बटन '/' ए' का div 'instead।

विकलांग फोकस छल्ले "सुंदरता के लिए"।

एकमात्र स्थिति वाहक के रूप में रंग।

फोकस ट्रैप/ईएससी के बिना मोडल।

मोबाइल पर कोई स्केलिंग नहीं।

मानव स्पष्टीकरण के बिना "त्रुटि 400/500"।

17) टेस्ट स्क्रिप्ट टेम्पलेट्स

परिदृश्य 1 - कीबोर्ड नेविगेशन (फॉर्म पेज)

1. पहले क्षेत्र में टैब करें, डाटा भरें.

2. शिफ्ट + टैब बैक - सही क्रम जाँचें।

3. कॉल सत्यापन (जमा करें) - फोकस पहली त्रुटि पर जाता है।

4. ईएससी कुंजी के साथ मॉड्यूलेटर बंद करें, फ़ोकस सर्जक पर लौटा.

परिदृश्य 2 - स्क्रीन रीडर (भुगतान पृष्ठ)

1. पृष्ठ शीर्षिका (h1) पर जाएँ, अनुभागों को सुनें।

2. विधि का चयन खोलें - भूमिकाओं/राज्यों की घोषणा सुनी जाती है।

3. जानबूझकर एक योग त्रुटि करें - संदेश पढ़ा और क्षेत्र के साथ जुड़ा हुआ है।

4. सफल भुगतान टोस्ट ने 'विनम्र' घोषित किया।

परिदृश्य 3 - गतिशीलता

1. प्रक्रिया को प्रारंभ करें> 3 सेकंड के इंतजार के साथ - प्रक्रिया/ईटीए के बारे में पाठ है।

2. एक नेटवर्क त्रुटि के मामले में - कुंजीपटल से पहुँचा जा सकने वाला 'मुखर' बैनर, एक "पुनरावृत्ति/सहायता" पथ है।

18) उपयोगी माइक्रो-टेम्पलेट्स

टोस्ट के लिए भूमिकाएँ/आरिया

html
<div role = "status" aria-live = "polite"> Payment accepted. Balance updated. </div>
<div role = "alert" aria-live = "assertive"> The payment was denied. Try another method. </div>

लिंक क्षेत्र में त्रुटि

html
<label for = "amount "> Amount </label>
<input id="amount" aria-invalid="true" aria-describedby="amount-error">
<div id = "amount-error "> Minimum 100 UAH. Please enter a larger amount. </div>

मोडाल्का (सिमेंटिक गुण)

html
<div role="dialog" aria-modal="true" aria-labelledby="m-title">
<h2 id =" m-title "> Confirm Payment </h2>
<! -- content -->
<button> Confirm </button>
<button> Cancel </button>
</div>

19) A11y प्रथाओं के लिए त्वरित कार्यान्वयन यो

1. वर्तमान घटकों/पैटर्न (कंट्रास्ट/फोकस/भूमिका शब्दार्थ) का ऑडिट।

2. डिजाइन तंत्र संपादन: प्रत्येक घटक में A11y विभाजन जोड़ें।

3. उपकरण: स्थानीय स्तर पर और सीआई में up/axe/pa11y/Lighthouse लिंटर सेट करें।

4. प्रशिक्षण: डिजाइनरों/डेवलपर्स/कॉपीराइटरों के लिए लघु गाइड।

5. पायलट: सबसे आम दोषों (मोडल्स, फॉर्म, टोस्ट) के 3-5 को ठीक करें।

6. विनियमन: A11y मानदंड के साथ DoD; त्रैमासिक ऑडिट।

अंतिम धोखा पत्र

कीबोर्ड, फ़ोकस, कंट्रास्ट, स्क्रीन रीडर, डायनेमिक्स जाँचें.

आरिया-लाइव के माध्यम से स्टेटस की घोषणा करें; त्रुटियां - क्षेत्रों से संबंधित।

गति कम करने का सम्मान करें, स्केलिंग पर प्रतिबंध न लगाएं।

शब्दार्थ (टैग/भूमिकाएं) सोचें, न कि "यह कैसा दिखता है।"

स्वचालित जाँच करें, लेकिन हमेशा मैनुअल के साथ पूरक।

WCAG, गंभीरता और प्लेबैक स्क्रिप्ट के संदर्भ में दोषों को ठीक करें।