Compose ऐप्लिकेशन में सुलभता स्क्रीन रीडर की सुविधा डिफ़ॉल्ट रूप से लागू होती है
पढ़ने के अनुमानित क्रम में होता है. आम तौर पर, यह क्रम बाएं से दाएं और फिर ऊपर से सबसे नीचे होता है.
हालांकि, कुछ ऐप्लिकेशन के लेआउट ऐसे होते हैं जिनमें एल्गोरिदम यह पता नहीं लगा सकता
पढ़ने का वास्तविक क्रम, जिसमें अतिरिक्त संकेत न हों. व्यू-आधारित ऐप्लिकेशन में, ये काम किए जा सकते हैं
traversalBefore
और traversalAfter
प्रॉपर्टी का इस्तेमाल करके ऐसी समस्याओं को ठीक करें.
Compose 1.5 से शुरू करते हुए, Compose सुविधा अपने हिसाब से काम करने वाला एपीआई उपलब्ध कराती है. हालांकि, इसमें
नया सैद्धांतिक मॉडल बनाया जा सकता है.
isTraversalGroup
और traversalIndex
सिमैंटिक प्रॉपर्टी हैं
आपको सुलभता सुविधा और TalkBack के फ़ोकस ऑर्डर को कंट्रोल करने की सुविधा मिलती है.
क्रम से लगाने का डिफ़ॉल्ट एल्गोरिदम सही नहीं है. isTraversalGroup
पहचान करता है
अर्थ के आधार पर ज़रूरी समूह, जबकि traversalIndex
इसका क्रम समायोजित करता है
उन ग्रुप में मौजूद अलग-अलग एलिमेंट शामिल करें. सिर्फ़ isTraversalGroup
का इस्तेमाल किया जा सकता है,
या traversalIndex
की मदद से, प्रॉडक्ट को पसंद के मुताबिक बनाने के लिए किया जा सकता है.
अपने इसमें isTraversalGroup
और traversalIndex
का इस्तेमाल करें
स्क्रीन रीडर ट्रैवर्सल ऑर्डर को कंट्रोल करने के लिए ऐप्लिकेशन.
एलिमेंट को isTraversalGroup
की मदद से ग्रुप करें
isTraversalGroup
एक बूलियन प्रॉपर्टी है, जो तय करती है कि सिमेंटिक्स
नोड एक ट्रैवर्सल समूह है. इस तरह का नोड वह होता है जिसका फ़ंक्शन पेश करना है
नोड के चिल्ड्रेन को व्यवस्थित करने में सीमा या बॉर्डर के रूप में इस्तेमाल किया जा सकता है.
किसी नोड पर isTraversalGroup = true
सेट करने का मतलब है कि उस नोड के सभी चिल्ड्रन
दूसरे एलिमेंट पर जाने से पहले देखे जाते हैं. isTraversalGroup
को इन पर सेट किया जा सकता है
नॉन-स्क्रीन रीडर के फ़ोकस करने लायक नोड, जैसे कि कॉलम, पंक्तियां या बॉक्स.
नीचे दिए गए उदाहरण में isTraversalGroup
का इस्तेमाल किया गया है. इससे चार टेक्स्ट एलिमेंट बनते हैं. कॉन्टेंट बनाने
बाएं दो एलिमेंट एक CardBox
एलिमेंट से संबंधित हैं, जबकि दाएं दो एलिमेंट से जुड़े हैं
दूसरे CardBox
एलिमेंट से जुड़े होते हैं:
// CardBox() function takes in top and bottom sample text. @Composable fun CardBox( topSampleText: String, bottomSampleText: String, modifier: Modifier = Modifier ) { Box(modifier) { Column { Text(topSampleText) Text(bottomSampleText) } } } @Composable fun TraversalGroupDemo() { val topSampleText1 = "This sentence is in " val bottomSampleText1 = "the left column." val topSampleText2 = "This sentence is " val bottomSampleText2 = "on the right." Row { CardBox( topSampleText1, bottomSampleText1 ) CardBox( topSampleText2, bottomSampleText2 ) } }
कोड, इस तरह का आउटपुट जनरेट करता है:
![लेआउट में टेक्स्ट के दो कॉलम हैं और बाईं ओर के कॉलम में 'यह' है
वाक्य बाएं कॉलम में है' और दाएँ कॉलम में लिखा है 'यह वाक्य दाईं ओर है.'](https://developer.android.com/static/develop/ui/compose/images/a11y-istraversalgroup-example.png?authuser=0000&hl=hi)
किसी भी सिमेंटिक्स को सेट नहीं किया गया है, इसलिए स्क्रीन रीडर का डिफ़ॉल्ट तरीका यह होता है एलिमेंट को बाएं से दाएं और ऊपर से नीचे ट्रैवर्स करने के लिए. इसकी वजह से डिफ़ॉल्ट रूप से, TalkBack वाक्य के अलग-अलग हिस्सों को गलत क्रम में पढ़ता है:
"यह वाक्य इसमें है" → "यह वाक्य" → "बायां कॉलम." → " सही है."
फ़्रैगमेंट को सही तरीके से क्रम में लगाने के लिए, सेट करने के लिए मूल स्निपेट में बदलाव करें
isTraversalGroup
से true
के लिए:
@Composable fun TraversalGroupDemo2() { val topSampleText1 = "This sentence is in " val bottomSampleText1 = "the left column." val topSampleText2 = "This sentence is" val bottomSampleText2 = "on the right." Row { CardBox( // 1, topSampleText1, bottomSampleText1, Modifier.semantics { isTraversalGroup = true } ) CardBox( // 2, topSampleText2, bottomSampleText2, Modifier.semantics { isTraversalGroup = true } ) } }
isTraversalGroup
को खास तौर पर हर CardBox
के लिए सेट किया गया है, इसलिए CardBox
सीमाएं उनके तत्वों को क्रमबद्ध करते समय लागू होती हैं. इस मामले में, बाईं ओर
CardBox
को सबसे पहले पढ़ा जाता है और उसके बाद दाईं ओर CardBox
को पढ़ा जाता है.
अब TalkBack, वाक्य के अलग-अलग हिस्सों को सही क्रम में पढ़कर सुनाता है:
"यह वाक्य इसमें है" → "बायां कॉलम." → "यह वाक्य" → " सही है."
ट्रैवर्सल ऑर्डर को और भी पसंद के मुताबिक बनाएं
traversalIndex
एक फ़्लोट प्रॉपर्टी है. इसकी मदद से, TalkBack को पसंद के मुताबिक बनाया जा सकता है
ट्रैवर्सल ऑर्डर. अगर एलिमेंट को एक साथ ग्रुप करना, TalkBack के लिए काफ़ी नहीं है
सही तरीके से काम करता है, तो इसके साथ traversalIndex
का इस्तेमाल करें
स्क्रीन रीडर के क्रम को पसंद के मुताबिक बनाने के लिए isTraversalGroup
.
traversalIndex
प्रॉपर्टी में ये विशेषताएं हैं:
- जिन एलिमेंट की
traversalIndex
कम वैल्यू होती हैं उन्हें पहले प्राथमिकता दी जाती है. - यह सकारात्मक या नकारात्मक हो सकता है.
- डिफ़ॉल्ट वैल्यू
0f
है. - सिर्फ़ स्क्रीन रीडर के फ़ोकस करने लायक नोड पर असर पड़ता है, जैसे कि स्क्रीन पर दिखने वाले एलिमेंट, जैसे कि
टेक्स्ट या बटन. उदाहरण के लिए, कॉलम में सिर्फ़
traversalIndex
सेट करने से कोई असर नहीं पड़ता, जब तक कि कॉलम मेंisTraversalGroup
सेट न किया गया हो.
नीचे दिया गया उदाहरण दिखाता है कि आप traversalIndex
और
isTraversalGroup
एक साथ.
उदाहरण: ट्रेवर्स क्लॉक फ़ेस
क्लॉक फ़ेस एक सामान्य स्थिति है, जिसमें स्टैंडर्ड ट्रैवर्सल ऑर्डरिंग काम. इस सेक्शन में, टाइम पिकर का उदाहरण दिया गया है. इसकी मदद से, उपयोगकर्ता हर जगह एक ही समय पर नेविगेट कर सकता है क्लॉक फेस पर संख्या के माध्यम से और घंटे और मिनट के लिए अंक चुनें स्लॉट हैं.
![स्मार्टवॉच की होम स्क्रीन, जिसके ऊपर टाइम पिकर टूल है.](https://developer.android.com/static/develop/ui/compose/images/a11y-clock-face.png?authuser=0000&hl=hi)
नीचे दिए गए आसान स्निपेट में एक CircularLayout
है, जिसमें 12
संख्याएं बनाई जाती हैं, जिनमें 12 से शुरू होता है और जो वृत्त के चारों ओर घड़ी की सुई की दिशा में घूमती हैं:
@Composable fun ClockFaceDemo() { CircularLayout { repeat(12) { hour -> ClockText(hour) } } } @Composable private fun ClockText(value: Int) { Box(modifier = Modifier) { Text((if (value == 0) 12 else value).toString()) } }
क्योंकि क्लॉक फ़ेस को डिफ़ॉल्ट बाएँ-से-दाएँ के साथ तार्किक रूप से नहीं पढ़ा जाता और ऊपर से नीचे के क्रम में, TalkBack संख्या को क्रम से पढ़ता है. सुधार करने के लिए इसके बाद, बढ़ते हुए काउंटर वैल्यू का इस्तेमाल करें, जैसा कि इस स्निपेट में दिखाया गया है:
@Composable fun ClockFaceDemo() { CircularLayout(Modifier.semantics { isTraversalGroup = true }) { repeat(12) { hour -> ClockText(hour) } } } @Composable private fun ClockText(value: Int) { Box(modifier = Modifier.semantics { this.traversalIndex = value.toFloat() }) { Text((if (value == 0) 12 else value).toString()) } }
ट्रैवर्सल ऑर्डर को सही तरीके से सेट करने के लिए, पहले CircularLayout
को
ट्रैवर्सल ग्रुप और isTraversalGroup = true
सेट करें. फिर, जैसे कि घड़ी का हर टेक्स्ट
लेआउट पर दिए गए, इसके संबंधित traversalIndex
को काउंटर पर सेट करें
वैल्यू.
काउंटर वैल्यू लगातार बढ़ती है, इसलिए हर घड़ी की वैल्यू
स्क्रीन पर अंक जोड़ने से, traversalIndex
बड़ा हो जाता है—घड़ी की वैल्यू 0
का traversalIndex
0 है और घड़ी की वैल्यू 1 का traversalIndex
1 है.
इस तरह, TalkBack उन्हें पढ़े जाने का क्रम सेट हो जाता है. अब, आंकड़े
CircularLayout
के अंदर, बताए गए क्रम में पढ़ा जाता है.
क्योंकि सेट किए गए traversalIndexes
सिर्फ़ अन्य से संबंधित हैं
एक जैसे ग्रुप में रखने वाले इंडेक्स हों, तो बाकी स्क्रीन का क्रम
संरक्षित किया गया. दूसरे शब्दों में, पिछले कोड में दिखाए गए सिमैंटिक बदलाव
स्निपेट केवल क्लॉक फ़ेस में ऑर्डर को संशोधित करता है जिसमें
isTraversalGroup = true
सेट.
ध्यान दें कि CircularLayout's
सिमैंटिक को isTraversalGroup =
true
पर सेट किए बिना भी traversalIndex
के बदलाव लागू होंगे. हालांकि,
उन्हें बाइंड करने के लिए CircularLayout
, क्लॉक फ़ेस के बारह अंक पढ़े जाते हैं
आख़िर में, स्क्रीन पर मौजूद सभी एलिमेंट देख लिए जाने के बाद. ऐसा होता है
क्योंकि दूसरे सभी एलिमेंट का डिफ़ॉल्ट traversalIndex
0f
होता है, और
घड़ी के टेक्स्ट एलिमेंट को दूसरे सभी 0f
एलिमेंट के बाद पढ़ा जाता है.
उदाहरण: फ़्लोट करने वाले कार्रवाई बटन के लिए ट्रैवर्सल ऑर्डर को पसंद के मुताबिक बनाना
इस उदाहरण में, traversalIndex
और isTraversalGroup
मटीरियल डिज़ाइन फ़्लोटिंग ऐक्शन बटन (एफ़एबी) का ट्रैवर्सल ऑर्डर. आधार
नीचे दिया गया है:
![सबसे ऊपर मौजूद ऐप्लिकेशन बार वाला लेआउट, सैंपल टेक्स्ट, फ़्लोटिंग ऐक्शन बटन, और
स्क्रीन पर सबसे नीचे मौजूद ऐप्लिकेशन बार दिखेगा.](https://developer.android.com/static/develop/ui/compose/images/a11y-fab-example.png?authuser=0000&hl=hi)
डिफ़ॉल्ट रूप से, इस उदाहरण के लेआउट में टॉकबैक का यह क्रम होता है:
सबसे ऊपर मौजूद ऐप्लिकेशन बार → सैंपल टेक्स्ट 0 से 6 → फ़्लोट करने वाला ऐक्शन बटन (एफ़एबी) → सबसे नीचे ऐप्लिकेशन बार
स्क्रीन रीडर को पहले एफ़एबी पर फ़ोकस करना चाहिए. सेट करने के लिए
एफ़एबी जैसे मटीरियल एलिमेंट पर traversalIndex
, ये काम करें:
@Composable fun FloatingBox() { Box(modifier = Modifier.semantics { isTraversalGroup = true; traversalIndex = -1f }) { FloatingActionButton(onClick = {}) { Icon(imageVector = Icons.Default.Add, contentDescription = "fab icon") } } }
इस स्निपेट में,
उसी बॉक्स पर isTraversalGroup
को true
पर सेट किया गया है और traversalIndex
को सेट किया गया है
(-1f
, 0f
की डिफ़ॉल्ट वैल्यू से कम है) का मतलब है कि फ़्लोटिंग बॉक्स
स्क्रीन पर दिखने वाले बाकी एलिमेंट से पहले आता है.
इसके बाद, फ़्लोटिंग बॉक्स और दूसरी चीज़ों को एक मचान पर रखा जा सकता है, मटीरियल डिज़ाइन लेआउट लागू करता है:
@OptIn(ExperimentalMaterial3Api::class) @Composable fun ColumnWithFABFirstDemo() { Scaffold( topBar = { TopAppBar(title = { Text("Top App Bar") }) }, floatingActionButtonPosition = FabPosition.End, floatingActionButton = { FloatingBox() }, content = { padding -> ContentColumn(padding = padding) }, bottomBar = { BottomAppBar { Text("Bottom App Bar") } } ) }
TalkBack, एलिमेंट के साथ इस क्रम में इंटरैक्ट करता है:
एफ़एबी → टॉप ऐप्लिकेशन बार → सैंपल टेक्स्ट 0 से 6 → सबसे नीचे वाला ऐप्लिकेशन बार
अन्य संसाधन
- सुलभता: ज़रूरी कॉन्सेप्ट और ऐसी तकनीकें जो सभी Android ऐप्लिकेशन डेवलपमेंट में आम हैं
- सुलभता ऐप्लिकेशन बनाने का तरीका: मुख्य चरण तो अपने ऐप्लिकेशन को ज़्यादा से ज़्यादा लोगों तक पहुंचाने के लिए
- ऐप्लिकेशन को बेहतर बनाने के सिद्धांत सुलभता: इन मुख्य बातों का ध्यान रखें: अपने ऐप्लिकेशन को ज़्यादा से ज़्यादा लोगों तक पहुंचाने के लिए काम करते समय
- सुलभता के लिए टेस्टिंग: Android सुलभता के लिए नियमों और टूल की जांच करना