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

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

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

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

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

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

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

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

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

ज़्यादातर मामलों में, Compose API और 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

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. इनका इस्तेमाल करके, अपने ऐप्लिकेशन को ज़्यादा सुलभ बनाया जा सकता है.

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

कस्टम कॉम्पोनेंट बनाते समय, ध्यान रखें कि अपनी भूमिका पूरी करने के लिए, इस कॉम्पोनेंट को किस तरह की पहुंच से जुड़ी सहायता की ज़रूरत है. अक्सर, कंपोज़ करने के लिए इस्तेमाल किए जा रहे स्टैंडर्ड एपीआई, जैसे कि 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
        }
    }
)

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

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

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

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

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

मीडिया कॉन्टेंट को ज़्यादा सुलभ बनाना

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

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

अन्य संसाधन

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

कोडलैब

कॉन्टेंट देखता है