ऐप्लिकेशन की सुलभता के सिद्धांत

ध्यान दें: developer.android.com पर मौजूद दस्तावेज़ों को फिर से तैयार किया जा रहा है, ताकि यह दिखाया जा सके कि Compose की मदद से टास्क कैसे पूरे किए जा सकते हैं. हमारा सुझाव है कि आप अपने ऐप्लिकेशन के लिए Compose का इस्तेमाल करें. हालांकि, इस पेज पर मौजूद सिद्धांतों के लिए, व्यू से जुड़ी जानकारी को अब भी ऐक्सेस किया जा सकता है. इसके लिए, ऐप्लिकेशन की सुलभता को बेहतर बनाने के सिद्धांत (व्यू) पर जाएं.

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

Android, सिस्टम की सुलभता से जुड़ी कई सेवाएं उपलब्ध कराता है. इनमें ये शामिल हैं:

• TalkBack: यह सुविधा, दृष्टिहीन या कम दृष्टि वाले लोगों की मदद करती है. यह सिंथेटिक आवाज़ का इस्तेमाल करके, कॉन्टेंट को पढ़कर सुनाता है. साथ ही, उपयोगकर्ता के जेस्चर के हिसाब से, ऐप्लिकेशन पर कार्रवाइयां करता है.
• बटन से ऐक्सेस करें: इससे उन लोगों को मदद मिलती है जिन्हें चलने-फिरने में दिक्कत होती है. यह इंटरैक्टिव एलिमेंट को हाइलाइट करता है और उपयोगकर्ता के बटन दबाने पर कार्रवाइयां करता है. इसकी मदद से, सिर्फ़ एक या दो बटन का इस्तेमाल करके डिवाइस को कंट्रोल किया जा सकता है.

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

यहां दिए गए सेक्शन में, सबसे सही तरीकों के बारे में बताया गया है. इनमें से हर तरीका, आपके ऐप्लिकेशन की सुलभता को और बेहतर बना सकता है:

लेबल एलिमेंट

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

सुलभता से जुड़ी कार्रवाइयां जोड़ना

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

पहले से मौजूद सुलभता सुविधाओं का इस्तेमाल करना

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

रंग के अलावा अन्य संकेतों का इस्तेमाल करना

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

मीडिया कॉन्टेंट को ज़्यादा से ज़्यादा लोगों तक पहुंचाना

अपने ऐप्लिकेशन के वीडियो या ऑडियो कॉन्टेंट में ब्यौरे जोड़ें, ताकि इस कॉन्टेंट का इस्तेमाल करने वाले लोगों को पूरी तरह से विज़ुअल या ऑडियो संकेतों पर निर्भर न रहना पड़े.

लेबल के एलिमेंट

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

ज़्यादातर मामलों में, Compose एपीआई और Material में डिफ़ॉल्ट सुलभता सहायता मौजूद होती है. हालांकि, अगर आपको यूज़र इंटरफ़ेस (यूआई) एलिमेंट की सिमैंटिक प्रॉपर्टी को मैन्युअल तरीके से तय करना है, तो semantics मॉडिफ़ायर और contentDescription प्रॉपर्टी का इस्तेमाल करें. सिमैंटिक के बारे में ज़्यादा जानने के लिए, सिमैंटिक देखें.

यहां दिए गए सेक्शन में, लेबल करने की कई अन्य तकनीकों के बारे में बताया गया है.

ऐसे एलिमेंट जिनमें बदलाव किए जा सकते हैं

टेक्स्ट फ़ील्ड जैसे बदलाव किए जा सकने वाले एलिमेंट को लेबल करते समय, ऐसा टेक्स्ट दिखाना मददगार होता है जो एलिमेंट में ही मान्य इनपुट का उदाहरण देता है. साथ ही, इस उदाहरण वाले टेक्स्ट को स्क्रीन रीडर के लिए उपलब्ध कराना भी मददगार होता है. ऐसे मामलों में, प्लेसहोल्डर टेक्स्ट का इस्तेमाल किया जा सकता है. इसे हिंट टेक्स्ट भी कहा जाता है.

यहां दिए गए उदाहरण में, TextField में एक placeholder पैरामीटर है, जो हिंट टेक्स्ट उपलब्ध कराता है.

val usernameState = rememberTextFieldState()
TextField(
    state = usernameState,
    lineLimits = TextFieldLineLimits.SingleLine,
    placeholder = { Text("Enter Username") }
)
StateBasedText.kt

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

यहां दिए गए उदाहरण में, TextField में label पैरामीटर है. इससे सुलभता के बारे में जानकारी मिलती है.

TextField(
    state = rememberTextFieldState(initialText = "Hello"),
    label = { Text("Label") }
)
StateBasedText.kt

टेक्स्ट और उपयोगकर्ता के इनपुट के बारे में ज़्यादा जानने के लिए, टेक्स्ट फ़ील्ड कॉन्फ़िगर करना लेख पढ़ें.

किसी कलेक्शन में मौजूद एलिमेंट

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

उदाहरण के लिए, अगर आपके पास LazyColumn या LazyRow है, तो हर आइटम को एक यूनीक collectionItemInfo असाइन करने के लिए, semantics मॉडिफ़ायर का इस्तेमाल करें. इसके बारे में यहां दिए गए स्निपेट में बताया गया है:

MilkyWayList(
    modifier = Modifier
        .semantics {
            collectionInfo = CollectionInfo(
                rowCount = milkyWay.count(),
                columnCount = 1
            )
        }
) {
    milkyWay.forEachIndexed { index, text ->
        Text(
            text = text,
            modifier = Modifier.semantics {
                collectionItemInfo =
                    CollectionItemInfo(index, 0, 0, 0)
            }
        )
    }
}
AccessibilitySnippets.kt

सूचियों और ग्रिड के लिए सिमैंटिक प्रॉपर्टी के बारे में ज़्यादा जानने के लिए, सूची और आइटम की जानकारी देखें.

मिलते-जुलते कॉन्टेंट के ग्रुप

अगर आपका ऐप्लिकेशन कई यूज़र इंटरफ़ेस (यूआई) एलिमेंट दिखाता है, जो एक सामान्य ग्रुप बनाते हैं, जैसे कि किसी गाने की जानकारी या किसी मैसेज की विशेषताएं, तो इन एलिमेंट को पैरंट कंटेनर (जैसे कि Column, Row या Box) में व्यवस्थित करें. पैरंट कंटेनर के semantics मॉडिफ़ायर का इस्तेमाल करके, mergeDescendants को true पर सेट करें.

इस तरह, सुलभता सेवाएं एक ही एलान में, अंदरूनी एलिमेंट के कॉन्टेंट की जानकारी एक के बाद एक दिखा सकती हैं. एक जैसे एलिमेंट को एक साथ रखने से, सहायक टेक्नोलॉजी का इस्तेमाल करने वाले लोगों को स्क्रीन पर मौजूद जानकारी को ज़्यादा बेहतर तरीके से खोजने में मदद मिलती है.

यहां दिए गए स्निपेट में, Row कंपोज़ेबल, पैरंट कंटेनर के तौर पर काम करता है. Row में, ब्लॉग पोस्ट का मेटाडेटा दिखाने वाले एलिमेंट शामिल हैं. जैसे, लेखक का अवतार, लेखक का नाम, और पढ़ने में लगने वाला अनुमानित समय. mergeDescendants को true पर सेट करने से, ये इनर एलिमेंट ग्रुप में शामिल हो जाते हैं. इससे सुलभता सेवाएं इन्हें एक यूनिट के तौर पर इस्तेमाल कर सकती हैं.

@Composable
private fun PostMetadata(metadata: Metadata) {
    // Merge elements below for accessibility purposes
    Row(modifier = Modifier.semantics(mergeDescendants = true) {}) {
        Image(
            imageVector = Icons.Filled.AccountCircle,
            contentDescription = null // decorative
        )
        Column {
            Text(metadata.author.name)
            Text("${metadata.date} • ${metadata.readTimeMinutes} min read")
        }
    }
}
AccessibilitySnippets.kt

पिछले उदाहरण की तरह, मिलते-जुलते एलिमेंट को ग्रुप करते समय, सिर्फ़ पैरंट कंटेनर को इंटरैक्टिव बनाएं. इनर चाइल्ड एलिमेंट में clickable या focusable मॉडिफ़ायर जोड़ने से बचें. इसके बजाय, मॉडिफ़ायर को पैरंट Row या Column पर लागू करें.

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

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

किसी सूची या ग्रिड के संदर्भ में, स्क्रीन रीडर किसी सूची या ग्रिड एलिमेंट के चाइल्ड टेक्स्ट नोड के टेक्स्ट को इकट्ठा कर सकता है. बेहतर होगा कि इस एलान में बदलाव न किया जाए.

सिमैंटिक को मर्ज करने के बारे में ज़्यादा जानने के लिए, मर्ज करना और हटाना देखें.

टेक्स्ट में मौजूद हेडिंग

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

@Composable
private fun Subsection(text: String) {
    Text(
        text = text,
        style = MaterialTheme.typography.headlineSmall,
        modifier = Modifier.semantics { heading() }
    )
}
AccessibilitySnippets.kt

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

heading सिमैंटिक प्रॉपर्टी के बारे में ज़्यादा जानने के लिए, हेडिंग देखें.

सुलभता पैनल के टाइटल

Android 9 (एपीआई लेवल 28) और इसके बाद के वर्शन में, स्क्रीन के पैन के लिए सुलभता के लिहाज़ से आसान टाइटल दिए जा सकते हैं. सुलभता के मकसद से, पेन किसी विंडो का साफ़ तौर पर दिखने वाला हिस्सा होता है.

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

ShareSheet(
    message = "Choose how to share this photo",
    modifier = Modifier
        .fillMaxWidth()
        .align(Alignment.TopCenter)
        .semantics { paneTitle = "New bottom sheet" }
)
AccessibilitySnippets.kt

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

paneTitle सिमैंटिक प्रॉपर्टी के बारे में ज़्यादा जानने के लिए, विंडो जैसे कॉम्पोनेंट देखें.

सजावट वाले एलिमेंट

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

Image या Icon कंपोज़ेबल के लिए, contentDescription = null सेट करें. सजावट के लिए इस्तेमाल होने वाले ऐसे अन्य एलिमेंट जो कोई संदर्भ या फ़ंक्शन उपलब्ध नहीं कराते उनके लिए, hideFromAccessibility का इस्तेमाल किया जा सकता है. यह सिमैंटिक प्रॉपर्टी, सुलभता सेवाओं को आइटम को अनदेखा करने के लिए कहती है.

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

यहां दिए गए उदाहरण में, Icon और Text, कस्टम टॉगल के अंदर मौजूद डेकोरेटिव चाइल्ड एलिमेंट हैं. सुलभता सेवाओं को इन चाइल्ड व्यू को अलग-अलग ट्रैवर्स करने से रोकने के लिए, पैरंट Row पर clearAndSetSemantics का इस्तेमाल करके, उनके सिमैंटिक मिटाए जा सकते हैं. इससे सुलभता सेवाओं को पता चलता है कि पूरे Row को एक ऐसे टॉगल के तौर पर इस्तेमाल किया जाए जिसे ट्रैवर्स किया जा सके:

// Developer might intend this to be a toggleable.
// Using `clearAndSetSemantics`, on the Row, a clickable modifier is applied,
// a custom description is set, and a Role is applied.

@Composable
fun FavoriteToggle() {
    val checked = remember { mutableStateOf(true) }
    Row(
        modifier = Modifier
            .toggleable(
                value = checked.value,
                onValueChange = { checked.value = it }
            )
            .clearAndSetSemantics {
                stateDescription = if (checked.value) "Favorited" else "Not favorited"
                toggleableState = ToggleableState(checked.value)
                role = Role.Switch
            },
    ) {
        Icon(
            imageVector = Icons.Default.Favorite,
            contentDescription = null // not needed here

        )
        Text("Favorite?")
    }
}
AccessibilitySnippets.kt

सिमैंटिक मिटाने के बारे में ज़्यादा जानने के लिए, सिमैंटिक मिटाना और सेट करना लेख पढ़ें.

सुलभता से जुड़ी कार्रवाइयां जोड़ना

यह पक्का करना ज़रूरी है कि सुलभता सेवाओं का इस्तेमाल करने वाले उपयोगकर्ताओं के पास, आपके ऐप्लिकेशन में सभी यूज़र फ़्लो पूरे करने का तरीका हो.

अगर आपके कस्टम कंपोज़ेबल के इंटरैक्शन से ऐप्लिकेशन की स्थिति में इस तरह से बदलाव होता है जो साफ़ तौर पर नहीं दिखता, तो टैप करने की स्टैंडर्ड कार्रवाइयों के लिए जानकारी देने वाले लेबल उपलब्ध कराएं. इसके लिए, Modifier.clickable या Modifier.combinedClickable में onClickLabel या onLongClickLabel जैसे पैरामीटर का इस्तेमाल करें.

ऐसे जटिल इंटरैक्शन के लिए customActions का इस्तेमाल करें जिन्हें स्टैंडर्ड टैप से मैप नहीं किया जा सकता.

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

Compose में, CustomAccessibilityAction का इस्तेमाल करके, semantics मॉडिफ़ायर में customActions प्रॉपर्टी के ज़रिए, सुलभता से जुड़ी कस्टम कार्रवाइयां तय की जा सकती हैं.

उदाहरण के लिए, अगर आपका ऐप्लिकेशन उपयोगकर्ताओं को किसी आइटम को खारिज करने के लिए, उस पर स्वाइप करने की सुविधा देता है, तो पसंद के मुताबिक सुलभता कार्रवाई की मदद से, इस सुविधा को दिखाया जा सकता है:

SwipeToDismissBox(
    modifier = Modifier.semantics {
        // Represents the swipe to dismiss for accessibility
        customActions = listOf(
            CustomAccessibilityAction(
                label = "Remove article from list",
                action = {
                    removeArticle()
                    true
                }
            )
        )
    },
    state = rememberSwipeToDismissBoxState(),
    backgroundContent = {}
) {
    ArticleListItem()
}
AccessibilitySnippets.kt

कस्टम सुलभता कार्रवाई लागू होने पर, उपयोगकर्ता ऐक्शन मेन्यू से कार्रवाई को ऐक्सेस कर सकते हैं.

कस्टम ऐक्शन के बारे में ज़्यादा जानने के लिए, कस्टम ऐक्शन लेख पढ़ें.

उपलब्ध कार्रवाइयों को समझने लायक बनाना

जब कोई यूज़र इंटरफ़ेस (यूआई) एलिमेंट, छूकर रखने जैसी कार्रवाइयों के साथ काम करता है, तो TalkBack जैसी सुलभता सेवा इसे "दबाकर रखने के लिए, दो बार टैप करके रखें" के तौर पर बताती है.

इस सामान्य सूचना से उपयोगकर्ता को यह जानकारी नहीं मिलती कि दबाकर रखने की कार्रवाई से क्या होता है.

इस सूचना को ज़्यादा काम का बनाने के लिए, कार्रवाई के बारे में काम की जानकारी दें.

Compose में, clickable और combinedClickable जैसे स्टैंडर्ड इंटरैक्शन मॉडिफ़ायर में पहले से मौजूद पैरामीटर होते हैं. जैसे, onClickLabel और onLongClickLabel. इनका इस्तेमाल करके, कार्रवाइयों के बारे में जानकारी दी जा सकती है. इसके बारे में यहां दिए गए उदाहरण में बताया गया है:

var contextMenuPhotoId by rememberSaveable { mutableStateOf<Int?>(null) }
val haptics = LocalHapticFeedback.current
LazyVerticalGrid(columns = GridCells.Adaptive(minSize = 128.dp)) {
    items(photos, { it.id }) { photo ->
        ImageItem(
            photo,
            Modifier
                .combinedClickable(
                    onClick = { activePhotoId = photo.id },
                    onLongClick = {
                        haptics.performHapticFeedback(HapticFeedbackType.LongPress)
                        contextMenuPhotoId = photo.id
                    },
                    onLongClickLabel = stringResource(R.string.open_context_menu)
                )
        )
    }
}
if (contextMenuPhotoId != null) {
    PhotoActionsSheet(
        photo = photos.first { it.id == contextMenuPhotoId },
        onDismissSheet = { contextMenuPhotoId = null }
    )
}
TapAndPress.kt

इससे TalkBack,"कॉन्टेक्स्ट मेन्यू खोलें" की सूचना देता है. इससे उपयोगकर्ताओं को कार्रवाई का मकसद समझने में मदद मिलती है.

semantics मॉडिफ़ायर में भी सीधे तौर पर लेबल तय किया जा सकता है.

टैप और क्लिक का जवाब देने के बारे में ज़्यादा जानने के लिए, टैप और प्रेस और इंटरैक्टिव एलिमेंट देखें.

पहले से मौजूद सुलभता सुविधाओं का इस्तेमाल करना

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

Jetpack Compose में, सुलभ यूज़र इंटरफ़ेस (यूआई) बनाने के लिए, पहले से मौजूद कंपोज़ेबल का इस्तेमाल करें. जैसे, Button, Switch, और Checkbox. इन कॉम्पोनेंट में, semantics मॉडिफ़ायर पहले से मौजूद होते हैं. जैसे, role और stateDescription. इनका इस्तेमाल करके, अपने ऐप्लिकेशन को ज़्यादा सुलभ बनाया जा सकता है.

कस्टम कॉम्पोनेंट पर सिमैंटिक लागू करना

कस्टम कॉम्पोनेंट बनाते समय, इस बात का ध्यान रखें कि कॉम्पोनेंट को अपनी भूमिका पूरी करने के लिए, किस तरह की सुलभता सहायता की ज़रूरत है. अक्सर, पहले से इस्तेमाल किए जा रहे स्टैंडर्ड Compose एपीआई, जैसे कि clickable, toggleable या selectable काफ़ी होते हैं. ऐसा इसलिए, क्योंकि ये आपके लिए सिमैंटिक ट्री को अपने-आप पॉप्युलेट करते हैं.

हालांकि, कुछ कॉम्पोनेंट के लिए, स्टैंडर्ड मॉडिफ़ायर से मिलने वाली जानकारी के मुकाबले ज़्यादा सटीक जानकारी की ज़रूरत होती है. ऐसे मामलों में, खास तौर पर बनाए गए मॉडिफ़ायर (जैसे, triStateToggleable) ढूंढें. अगर कोई मॉडिफ़ायर मौजूद नहीं है, तो लो-लेवल Modifier.semantics का इस्तेमाल करके, साफ़ तौर पर सिमैंटिक उपलब्ध कराएं.

उदाहरण के लिए, TriStateSwitch को देखें. यह एक ऐसा स्विच है जिसकी तीन स्थितियां हैं: चालू, बंद, और तय नहीं.

स्टैंडर्ड toggleable मॉडिफ़ायर में दो स्थितियां होती हैं. वहीं, triStateToggleable मॉडिफ़ायर में तीसरी स्थिति की जटिलता को मैनेज किया जाता है. यह सुलभता Role (Switch) और State को अपने-आप सेट कर देता है. इस तरह, सुलभता सेवाओं को सटीक जानकारी मिलती है और आपको सिमैंटिक को मैन्युअल तरीके से तय करने की ज़रूरत नहीं पड़ती.

यहां दिए गए कोड स्निपेट में, इस तरीके का इस्तेमाल करके TriStateSwitch को दिखाया गया है:

@Composable
fun TriStateSwitch(
    state: ToggleableState,
    onClick: () -> Unit,
    modifier: Modifier = Modifier
) {
    // A real implementation would include custom drawing for the switch.
    // This example uses a Box to demonstrate the semantics.
    Box(
        modifier = modifier
            .size(width = 64.dp, height = 40.dp)
            // triStateToggleable handles the semantics (Role and State)
            // automatically, so explicit Modifier.semantics is not needed here.
            .triStateToggleable(
                state = state,
                onClick = onClick,
                role = Role.Switch
            )
            // Add visual feedback based on the state
            .background(
                when (state) {
                    ToggleableState.On -> Color.Green
                    ToggleableState.Off -> Color.Gray
                    ToggleableState.Indeterminate -> Color.Yellow
                }
            )
    )
}

// Usage within another composable:
var state by remember { mutableStateOf(ToggleableState.Off) }
TriStateSwitch(
    state = state,
    onClick = {
        state = when (state) {
            ToggleableState.Off -> ToggleableState.Indeterminate
            ToggleableState.Indeterminate -> ToggleableState.On
            ToggleableState.On -> ToggleableState.Off
        }
    }
)

ध्यान दें: अगर आपको स्टैंडर्ड कंपोज़ेबल में शामिल नहीं किए गए, पसंद के मुताबिक बनाए गए यूज़र इंटरफ़ेस (यूआई) एलिमेंट की ज़रूरत है, तो उन्हें androidx.compose.ui.graphics.Canvas जैसे लोअर-लेवल ड्रॉइंग एपीआई या Layout कंपोज़ेबल का इस्तेमाल करके बनाया जा सकता है. ऐसे मामलों में, आपको Modifier.semantics का इस्तेमाल करके, उनकी सुलभता प्रॉपर्टी के बारे में साफ़ तौर पर बताना होगा.

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

रंग के अलावा अन्य संकेतों का इस्तेमाल करना

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

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

पहली इमेज. सिर्फ़ रंग का इस्तेमाल करके यूज़र इंटरफ़ेस (यूआई) एलिमेंट बनाने के उदाहरण (बाएं) और रंग, शेप, और टेक्स्ट का इस्तेमाल करके यूज़र इंटरफ़ेस (यूआई) एलिमेंट बनाने के उदाहरण (दाएं).

मीडिया कॉन्टेंट को ज़्यादा से ज़्यादा लोगों तक पहुंचाना

अगर कोई ऐसा ऐप्लिकेशन बनाया जा रहा है जिसमें मीडिया कॉन्टेंट शामिल है, जैसे कि कोई वीडियो क्लिप या ऑडियो रिकॉर्डिंग, तो सुलभता से जुड़ी अलग-अलग ज़रूरतों वाले उपयोगकर्ताओं को कॉन्टेंट समझने में मदद करें. खास तौर पर, ये काम करने की कोशिश करें:

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

अन्य संसाधन

अपने ऐप्लिकेशन को ज़्यादा सुलभ बनाने के बारे में ज़्यादा जानने के लिए, यहां दिए गए अन्य संसाधन देखें:

कोडलैब

• Jetpack Compose में सुलभता सुविधा

कॉन्टेंट देखना

• ऐप्लिकेशन की सुलभता को बेहतर बनाने के सिद्धांत (व्यू)