सुलभता
सुलभता की वे आवश्यकताएँ जिन्हें Tanrei टोकन और कंपोनेंट स्पेक में ही शामिल रखता है, और वे जाँचें जो इन्हें लागू करवाती हैं।
Tanrei में सुलभता (एक्सेसिबिलिटी) ख़ुद सिस्टम पर लगी शर्तों का एक सेट है। टोकन बिल्ड ऐसी स्कीम बनाने से इनकार कर देता है जो कंट्रास्ट में विफल हो, और कोई कंपोनेंट स्पेक अपने रोल, कीबोर्ड टेबल और टार्गेट की गारंटी के बिना मान्य नहीं है।
टोकन बिल्ड हर स्कीम को — लाइट और डार्क, स्टैंडर्ड, मध्यम और उच्च कंट्रास्ट पर — इन थ्रेशोल्ड से मापता है, और कोई जोड़ी पीछे रह जाए तो विफल हो जाता है:
| कॉन्टेंट | स्टैंडर्ड और मध्यम कंट्रास्ट | उच्च कंट्रास्ट |
|---|---|---|
| टेक्स्ट, और कॉन्टेंट के रंग में बने आइकन | 4.5:1 | 7:1 |
| किसी स्टेटस का निशान, उसके अपने टोनल कंटेनर पर | 3:1 | 3:1 |
| किसी कंट्रोल को पहचानने या चलाने के लिए ज़रूरी सीमाएँ और ग्राफ़िक | 3:1 | 3:1 |
| आस-पास की सरफ़ेस के मुक़ाबले फ़ोकस रिंग | 3:1 | 3:1 |
बड़े टेक्स्ट के लिए कोई नीचा थ्रेशोल्ड नहीं है। WCAG लगभग 24px सामान्य, या 19px बोल्ड, और उससे बड़े टेक्स्ट के लिए कम कंट्रास्ट स्वीकार करता है, पर बिल्ड हर टेक्स्ट रोल को 4.5:1 पर, और उच्च कंट्रास्ट पर 7:1 पर, जाँचता है: किसी रंग के रोल को यह पता नहीं होता कि वह किस आकार में इस्तेमाल होगा।
अक्षम एलिमेंट और शुद्ध सजावट इससे मुक्त हैं, और स्टैंडर्ड कंट्रास्ट पर outline-variant की बारीक रेखा भी। इसी छूट के कारण, जो बॉर्डर किसी कंट्रोल का अकेला संकेत हो, उसे outline इस्तेमाल करना होता है, outline-variant नहीं।
ये हर थीम में, कंट्रास्ट के हर स्तर पर — कुल छह संयोजनों में — सही रहते हैं, वरना बिल्ड विफल हो जाता है:
- हर
(X, on-X)रोल जोड़ी, और हर सरफ़ेस रोल पर हर टेक्स्ट रोल (on-surface,on-surface-variant,link, किसी इंटेंट का रंग), कम से कम 4.5:1 है, और दोनों उच्च-कंट्रास्ट स्कीमों में कम से कम 7:1; - हर स्टेटस का रंग अपने टोनल कंटेनर के मुक़ाबले कम से कम 3:1 है;
outlineहर सरफ़ेस रोल के मुक़ाबले कम से कम 3:1 है;- डिफ़ॉल्ट सिस्टम में मध्यम और उच्च कंट्रास्ट पर
outline-variantहर सरफ़ेस रोल के मुक़ाबले कम से कम 3:1 और 4.5:1 है, औरoutlineउससे ज़्यादा मज़बूत रहता है; focus-ringसरफ़ेस के मुक़ाबले कम से कम 3:1 है।
प्रोजेक्ट के नियम किसी जाँच को पास कराने के लिए थ्रेशोल्ड ढीला करने से मना करते हैं।
The least sizes of what a person presses. minimum is the least height (and, for an icon-only control, width) anything pressable is drawn at; touch and pointer are the least hit areas, which a control reaches past what it draws where it stands alone.
| टोकन | मान | प्रीव्यू |
|---|---|---|
--tanrei-sys-target-minimum | 32px | |
--tanrei-sys-target-pointer | 44px | |
--tanrei-sys-target-spacing | 8px | |
--tanrei-sys-target-touch | 48px |
इससे जनरेट किया गया: design/tokens/tanrei.light.tokens.json, tokens/sys/measure.tokens.json
दिखने वाला साइज़ हिट एरिया नहीं है। Tanrei का छोटा बटन 32 यूनिट ऊँचा है, जो घने टूलबार के लिए ठीक है, पर वह फिर भी टच के लिए कम से कम 48 यूनिट और पॉइंटर के लिए 44 यूनिट के दायरे में प्रतिक्रिया देता है। कंपोनेंट अपना हिट एरिया अदृश्य रूप से बढ़ाते हैं और पड़ोसी टार्गेट के बीच कम से कम 8 यूनिट रखते हैं। हर स्पेक यह गारंटी घोषित करता है, और हर प्लैटफ़ॉर्म इसे टेस्ट करता है।
हर इंटरैक्टिव कंपोनेंट कीबोर्ड और सहायक तकनीक के फ़ोकस के लिए फ़ोकस इंडिकेटर दिखाता है — पहले ख़ाली जगह, फिर रिंग — तुरंत और बिना ऐनिमेशन के। फ़ोकस का क्रम पढ़ने के क्रम के अनुसार चलता है। अक्षम कंपोनेंट फ़ोकस के क्रम से बाहर हो जाते हैं।
हर कंपोनेंट स्पेक में कुंजियों और क्रियाओं की एक टेबल होती है, जो उसके दस्तावेज़ पेज पर सुलभता के अंतर्गत दिखती है। जिन प्लैटफ़ॉर्म पर हार्डवेयर कीबोर्ड का सपोर्ट है, वे इस टेबल को ज्यों का त्यों इम्प्लीमेंट करते हैं।
टेक्स्ट 200% पर होने पर भी इंटरफ़ेस इस्तेमाल लायक़ रहना चाहिए। कंटेनर अपने टेक्स्ट के साथ बढ़ते हैं, लेबल कटने से पहले अगली पंक्ति में जाते हैं, और टेक्स्ट की एक पंक्ति समाने के लिए कुछ भी तय ऊँचाई पर निर्भर नहीं रहता। नेटिव इम्प्लीमेंटेशन हर प्लैटफ़ॉर्म की स्केल होने वाले टेक्स्ट की व्यवस्था इस्तेमाल करते हैं।
जब सिस्टम मोशन कम करने को कहता है, तो जगह बदलने वाला ऐनिमेशन हटा दिया जाता है या उसकी जगह एक छोटा फ़ेड आता है, और कुछ भी लूप में नहीं चलता। देखें मोशन।
स्पेक कंपोनेंट का WAI-ARIA रोल बताता है और यह भी कि उसका एक्सेसिबल नाम कैसे बनता है। हर प्लैटफ़ॉर्म इस रोल को अपने नेटिव समकक्ष से मैप करता है: SwiftUI में accessibility traits, Compose और Flutter में semantics प्रॉपर्टी, React Native में accessibilityRole। वेब पर Tanrei शैडो रूट के भीतर नेटिव एलिमेंट को तरजीह देता है, ताकि ब्राउज़र और टेस्टिंग टूल असली सिमैंटिक्स देखें।
| प्लैटफ़ॉर्म | स्वचालित जाँच |
|---|---|
| Web | Playwright में axe-core |
| SwiftUI | XCTest का accessibility audit |
| Compose | Accessibility Test Framework की जाँचें |
| Flutter | meetsGuideline मैचर |
| React Native | रोल और लेबल के असर्शन, साथ में गैलरी ऐप के ज़रिए नेटिव ऑडिट |
टिप्पणी
स्वचालित जाँचें असली समस्याओं का छोटा हिस्सा ही पकड़ती हैं। वे न्यूनतम स्तर हैं। इन कंपोनेंट से आप जो भी बनाएँ, उस पर स्क्रीन रीडर और कीबोर्ड आज़माएँ।