ट्रैवर्सल ऑर्डर को कंट्रोल करें

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
        )
    }
}
AccessibilitySnippets.kt

कोड, इस तरह का आउटपुट जनरेट करता है:

पहली इमेज. दो वाक्यों वाला लेआउट (बाईं ओर एक वाक्य) वाला विकल्प चुनें.

किसी भी सिमेंटिक्स को सेट नहीं किया गया है, इसलिए स्क्रीन रीडर का डिफ़ॉल्ट तरीका यह होता है एलिमेंट को बाएं से दाएं और ऊपर से नीचे ट्रैवर्स करने के लिए. इसकी वजह से डिफ़ॉल्ट रूप से, 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 }
        )
    }
}
AccessibilitySnippets.kt

isTraversalGroup को खास तौर पर हर CardBox के लिए सेट किया गया है, इसलिए CardBox सीमाएं उनके तत्वों को क्रमबद्ध करते समय लागू होती हैं. इस मामले में, बाईं ओर CardBox को सबसे पहले पढ़ा जाता है और उसके बाद दाईं ओर CardBox को पढ़ा जाता है.

अब TalkBack, वाक्य के अलग-अलग हिस्सों को सही क्रम में पढ़कर सुनाता है:

"यह वाक्य इसमें है" → "बायां कॉलम." → "यह वाक्य" → " सही है."

ध्यान दें: स्क्रोल कंटेनर पर, isTraversalGroup डिफ़ॉल्ट रूप से true होता है (जैसे कि LazyColumn) और मटीरियल सरफ़ेस देखें. ज़रूरत पड़ने पर, इस डिफ़ॉल्ट सेटिंग को बंद किया जा सकता है Modifier.semantics { isTraversalGroup = false के साथ व्यवहार}. सेटिंग isTraversalGroup से false का इस्तेमाल करने पर, डिफ़ॉल्ट ट्रैवर्सल ऑर्डर वापस आ जाता है.

ट्रैवर्सल ऑर्डर को और भी पसंद के मुताबिक बनाएं

traversalIndex एक फ़्लोट प्रॉपर्टी है. इसकी मदद से, TalkBack को पसंद के मुताबिक बनाया जा सकता है ट्रैवर्सल ऑर्डर. अगर एलिमेंट को एक साथ ग्रुप करना, TalkBack के लिए काफ़ी नहीं है सही तरीके से काम करता है, तो इसके साथ traversalIndex का इस्तेमाल करें स्क्रीन रीडर के क्रम को पसंद के मुताबिक बनाने के लिए isTraversalGroup.

traversalIndex प्रॉपर्टी में ये विशेषताएं हैं:

• जिन एलिमेंट की traversalIndex कम वैल्यू होती हैं उन्हें पहले प्राथमिकता दी जाती है.
• यह सकारात्मक या नकारात्मक हो सकता है.
• डिफ़ॉल्ट वैल्यू 0f है.
• सिर्फ़ स्क्रीन रीडर के फ़ोकस करने लायक नोड पर असर पड़ता है, जैसे कि स्क्रीन पर दिखने वाले एलिमेंट, जैसे कि टेक्स्ट या बटन. उदाहरण के लिए, कॉलम में सिर्फ़ traversalIndex सेट करने से कोई असर नहीं पड़ता, जब तक कि कॉलम में isTraversalGroup सेट न किया गया हो.

नीचे दिया गया उदाहरण दिखाता है कि आप traversalIndex और isTraversalGroup एक साथ.

उदाहरण: ट्रेवर्स क्लॉक फ़ेस

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

दूसरी इमेज. क्लॉक फ़ेस की इमेज.

नीचे दिए गए आसान स्निपेट में एक 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())
    }
}
AccessibilitySnippets.kt

क्योंकि क्लॉक फ़ेस को डिफ़ॉल्ट बाएँ-से-दाएँ के साथ तार्किक रूप से नहीं पढ़ा जाता और ऊपर से नीचे के क्रम में, 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())
    }
}
AccessibilitySnippets.kt

ट्रैवर्सल ऑर्डर को सही तरीके से सेट करने के लिए, पहले 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 मटीरियल डिज़ाइन फ़्लोटिंग ऐक्शन बटन (एफ़एबी) का ट्रैवर्सल ऑर्डर. आधार नीचे दिया गया है:

तीसरी इमेज. सबसे ऊपर मौजूद ऐप्लिकेशन बार वाला लेआउट, सैंपल टेक्स्ट, फ़्लोटिंग ऐक्शन बटन, स्क्रीन पर सबसे नीचे मौजूद ऐप्लिकेशन बार दिखेगा.

डिफ़ॉल्ट रूप से, इस उदाहरण के लेआउट में टॉकबैक का यह क्रम होता है:

सबसे ऊपर मौजूद ऐप्लिकेशन बार → सैंपल टेक्स्ट 0 से 6 → फ़्लोट करने वाला ऐक्शन बटन (एफ़एबी) → सबसे नीचे ऐप्लिकेशन बार

स्क्रीन रीडर को पहले एफ़एबी पर फ़ोकस करना चाहिए. सेट करने के लिए एफ़एबी जैसे मटीरियल एलिमेंट पर traversalIndex, ये काम करें:

@Composable
fun FloatingBox() {
    Box(modifier = Modifier.semantics { isTraversalGroup = true; traversalIndex = -1f }) {
        FloatingActionButton(onClick = {}) {
            Icon(imageVector = Icons.Default.Add, contentDescription = "fab icon")
        }
    }
}
AccessibilitySnippets.kt

इस स्निपेट में, उसी बॉक्स पर 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") } }
    )
}
AccessibilitySnippets.kt

TalkBack, एलिमेंट के साथ इस क्रम में इंटरैक्ट करता है:

एफ़एबी → टॉप ऐप्लिकेशन बार → सैंपल टेक्स्ट 0 से 6 → सबसे नीचे वाला ऐप्लिकेशन बार

अन्य संसाधन

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