'लिखें' सुविधा को बेहतर बनाने के मुख्य चरण

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

कम से कम टच टारगेट (स्क्रीन के वे हिस्से जहां छूने पर कोई कार्रवाई होती है) के साइज़ पर ध्यान दें

स्क्रीन पर मौजूद ऐसा एलिमेंट होना चाहिए जिस पर कोई व्यक्ति क्लिक, टच या इंटरैक्ट कर सके जो भरोसेमंद इंटरैक्शन के लिए काफ़ी हो. इन एलिमेंट का साइज़ तय करते समय, इन बातों का ध्यान रखें मटीरियल डिज़ाइन का सही तरीके से पालन करने के लिए कम से कम साइज़ को 48dp पर सेट करें सुलभता के दिशा-निर्देश देखें.

मटीरियल कॉम्पोनेंट—जैसे कि Checkbox, RadioButton, Switch, Slider, और Surface—यह कम से कम साइज़ अंदरूनी तौर पर सेट करता है, लेकिन सिर्फ़ जब कॉम्पोनेंट पर उपयोगकर्ता कार्रवाइयां कर सकता है. उदाहरण के लिए, जब Checkbox में इसका onCheckedChange पैरामीटर एक गैर-शून्य मान पर सेट है, चेकबॉक्स में कम से कम 48 dp की चौड़ाई और ऊंचाई के लिए पैडिंग.

@Composable
private fun CheckableCheckbox() {
    Checkbox(checked = true, onCheckedChange = {})
}
AccessibilitySnippets.kt

जब onCheckedChange पैरामीटर को शून्य पर सेट किया जाता है, तो पैडिंग (जगह) नहीं होती शामिल किया गया है, क्योंकि कॉम्पोनेंट के साथ सीधे तौर पर इंटरैक्ट नहीं किया जा सकता.

@Composable
private fun NonClickableCheckbox() {
    Checkbox(checked = true, onCheckedChange = null)
}
AccessibilitySnippets.kt

पहली इमेज. पैडिंग (जगह) के बिना चेकबॉक्स.

Switch, RadioButton या Checkbox, आम तौर पर, क्लिक किया जा सकने वाला व्यवहार पैरंट कंटेनर में ले जाया जाता है, null के कंपोज़ेबल में क्लिक कॉलबैक करके, और toggleable या पैरंट कंपोज़ेबल का selectable मॉडिफ़ायर.

@Composable
private fun CheckableRow() {
    MaterialTheme {
        var checked by remember { mutableStateOf(false) }
        Row(
            Modifier
                .toggleable(
                    value = checked,
                    role = Role.Checkbox,
                    onValueChange = { checked = !checked }
                )
                .padding(16.dp)
                .fillMaxWidth()
        ) {
            Text("Option", Modifier.weight(1f))
            Checkbox(checked = checked, onCheckedChange = null)
        }
    }
}
AccessibilitySnippets.kt

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

नीचे दिए गए उदाहरण में क्लिक किया जा सकने वाला बहुत छोटा Box है. टच टारगेट यह क्षेत्र अपने-आप Box की सीमाओं से आगे बढ़ जाता है. इसलिए, Box के बगल में मौजूद कन्वर्ज़न, अब भी क्लिक इवेंट को ट्रिगर करता है.

@Composable
private fun SmallBox() {
    var clicked by remember { mutableStateOf(false) }
    Box(
        Modifier
            .size(100.dp)
            .background(if (clicked) Color.DarkGray else Color.LightGray)
    ) {
        Box(
            Modifier
                .align(Alignment.Center)
                .clickable { clicked = !clicked }
                .background(Color.Black)
                .size(1.dp)
        )
    }
}
AccessibilitySnippets.kt

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

@Composable
private fun LargeBox() {
    var clicked by remember { mutableStateOf(false) }
    Box(
        Modifier
            .size(100.dp)
            .background(if (clicked) Color.DarkGray else Color.LightGray)
    ) {
        Box(
            Modifier
                .align(Alignment.Center)
                .clickable { clicked = !clicked }
                .background(Color.Black)
                .sizeIn(minWidth = 48.dp, minHeight = 48.dp)
        )
    }
}
AccessibilitySnippets.kt

क्लिक के लेबल जोड़ना

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

clickable मॉडिफ़ायर में पैरामीटर पास करके, क्लिक लेबल सेट करें:

@Composable
private fun ArticleListItem(openArticle: () -> Unit) {
    Row(
        Modifier.clickable(
            // R.string.action_read_article = "read article"
            onClickLabel = stringResource(R.string.action_read_article),
            onClick = openArticle
        )
    ) {
        // ..
    }
}
AccessibilitySnippets.kt

वैकल्पिक रूप से, यदि आपके पास क्लिक करने योग्य संशोधक का एक्सेस नहीं है, तो सिमेंटिक्स मॉडिफ़ायर में क्लिक लेबल:

@Composable
private fun LowLevelClickLabel(openArticle: () -> Boolean) {
    // R.string.action_read_article = "read article"
    val readArticleLabel = stringResource(R.string.action_read_article)
    Canvas(
        Modifier.semantics {
            onClick(label = readArticleLabel, action = openArticle)
        }
    ) {
        // ..
    }
}
AccessibilitySnippets.kt

दृश्य तत्वों के बारे में बताना

जब Image या Icon कंपोज़ेबल को सेट किया जाता है, तो इससे Android फ़्रेमवर्क को यह समझने में मदद मिलती है कि ऐप्लिकेशन क्या है दिखाई जा रही है. आपको विज़ुअल एलिमेंट के बारे में टेक्स्ट के तौर पर जानकारी देनी होगी.

किसी ऐसी स्क्रीन की कल्पना करें जहां उपयोगकर्ता अपने दोस्तों के साथ मौजूदा पेज शेयर कर सके. यह स्क्रीन पर क्लिक किया जा सकने वाला शेयर आइकॉन मौजूद है:

क्लिक किए जा सकने वाले आइकॉन की एक पट्टी, जिसमें

सिर्फ़ आइकॉन के आधार पर, Android फ़्रेमवर्क बाधित उपयोगकर्ता. Android फ़्रेमवर्क के लिए, टेक्स्ट के तौर पर आइकन.

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

@Composable
private fun ShareButton(onClick: () -> Unit) {
    IconButton(onClick = onClick) {
        Icon(
            imageVector = Icons.Filled.Share,
            contentDescription = stringResource(R.string.label_share)
        )
    }
}
AccessibilitySnippets.kt

कुछ विज़ुअल एलिमेंट सिर्फ़ सजावटी हैं और हो सकता है कि आप दर्शकों को उपयोगकर्ता को जोड़े रखता है. contentDescription पैरामीटर को null पर सेट करने पर, Android फ़्रेमवर्क को बताएं कि इस एलिमेंट से कार्रवाइयां या स्थिति.

@Composable
private fun PostImage(post: Post, modifier: Modifier = Modifier) {
    val image = post.imageThumb ?: painterResource(R.drawable.placeholder_1_1)

    Image(
        painter = image,
        // Specify that this image has no semantic meaning
        contentDescription = null,
        modifier = modifier
            .size(40.dp, 40.dp)
            .clip(MaterialTheme.shapes.small)
    )
}
AccessibilitySnippets.kt

यह आपको तय करना है कि दिए गए विज़ुअल एलिमेंट को contentDescription. खुद से पूछें कि क्या एलिमेंट ऐसी जानकारी देता है जो उपयोगकर्ता को अपना टास्क पूरा करना होगा. अगर नहीं, तो बेहतर है कि आप वर्णन आउट.

एलिमेंट मर्ज करें

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

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

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

यूज़र इंटरफ़ेस (यूआई) एलिमेंट का ग्रुप, जिसमें उपयोगकर्ता का नाम शामिल है. नाम चुना गया है.

इन एलिमेंट को मर्ज करने के लिए, mergeDescendants का इस्तेमाल करके, कंपोज़ की सुविधा को चालू किया जा सकता है पैरामीटर को semantics मॉडिफ़ायर में. इस तरह, सुलभता सेवाएं सिर्फ़ मर्ज किए गए एलिमेंट और डिसेंडेंट के सभी सिमेंटिक्स प्रॉपर्टी चुनें मर्ज किए गए हैं.

@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

सुलभता सेवाएं अब एक ही बार में पूरे कंटेनर पर फ़ोकस करती हैं. इनकी सामग्री:

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

कस्टम कार्रवाइयां जोड़ें

इस सूची के आइटम देखें:

एक सामान्य सूची आइटम, जिसमें लेख का शीर्षक, लेखक, और बुकमार्क आइकॉन होते हैं.

जब आप TalkBack जैसे स्क्रीन रीडर का इस्तेमाल करके, स्क्रीन पर दिख रही जानकारी को सुनें तो वह पहले पूरा आइटम चुनता है और फिर बुकमार्क आइकन को चुनता है.

सूची आइटम, जिसमें सभी एलिमेंट एक साथ चुने जाते हैं.

सूची में मौजूद आइटम, जिसमें सिर्फ़ बुकमार्क आइकॉन चुना गया है

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

@Composable
private fun PostCardSimple(
    /* ... */
    isFavorite: Boolean,
    onToggleFavorite: () -> Boolean
) {
    val actionLabel = stringResource(
        if (isFavorite) R.string.unfavorite else R.string.favorite
    )
    Row(
        modifier = Modifier
            .clickable(onClick = { /* ... */ })
            .semantics {
                // Set any explicit semantic properties
                customActions = listOf(
                    CustomAccessibilityAction(actionLabel, onToggleFavorite)
                )
            }
    ) {
        /* ... */
        BookmarkButton(
            isBookmarked = isFavorite,
            onClick = onToggleFavorite,
            // Clear any semantics properties set on this node
            modifier = Modifier.clearAndSetSemantics { }
        )
    }
}
AccessibilitySnippets.kt

किसी तत्व की स्थिति के बारे में बताना

कंपोज़ेबल, सिमेंटिक्स के लिए stateDescription तय कर सकता है Android फ़्रेमवर्क, कंपोज़ेबल की स्थिति को पढ़ने के लिए इसका इस्तेमाल करता है. इसके लिए उदाहरण के लिए, टॉगल करने लायक कंपोज़ेबल, “चुना गया” कॉलम में हो सकता है या "सही का निशान हटाया गया" राज्य. कुछ मामलों में, हो सकता है कि आप डिफ़ॉल्ट स्थिति विवरण को ओवरराइड करना चाहें जिन लेबल का इस्तेमाल किया जाता है. ऐसा करने के लिए, राज्य के बारे में साफ़ तौर पर बताया जा सकता है किसी कंपोज़ेबल को टॉगल करने लायक के तौर पर परिभाषित करने से पहले:

@Composable
private fun TopicItem(itemTitle: String, selected: Boolean, onToggle: () -> Unit) {
    val stateSubscribed = stringResource(R.string.subscribed)
    val stateNotSubscribed = stringResource(R.string.not_subscribed)
    Row(
        modifier = Modifier
            .semantics {
                // Set any explicit semantic properties
                stateDescription = if (selected) stateSubscribed else stateNotSubscribed
            }
            .toggleable(
                value = selected,
                onValueChange = { onToggle() }
            )
    ) {
        /* ... */
    }
}
AccessibilitySnippets.kt

टाइटल तय करना

ऐप्लिकेशन, स्क्रोल किए जा सकने वाले कंटेनर में कभी-कभी एक स्क्रीन पर बहुत सारा कॉन्टेंट दिखाते हैं. उदाहरण के लिए, स्क्रीन किसी लेख का पूरा कॉन्टेंट दिखा सकती है, जिसे उपयोगकर्ता पढ़ रहा है:

एक ब्लॉग पोस्ट का स्क्रीनशॉट, जिसमें लेख का टेक्स्ट स्क्रोल किए जा सकने वाले कंटेनर में है.

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

Compose में, एलिमेंट की वैल्यू तय करके यह बताया जाता है कि कंपोज़ेबल एक हेडिंग है semantics प्रॉपर्टी:

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

कस्टम कंपोज़ेबल हैंडल बनाना

अपने ऐप्लिकेशन में कुछ मटीरियल कॉम्पोनेंट को पसंद के मुताबिक कॉम्पोनेंट से बदलने पर तो आपको सुलभता से जुड़ी बातों को ध्यान में रखना होगा.

मान लें कि आपको मटीरियल Checkbox को अपने लागू करने के तरीके से बदलना है. शायद आप triStateToggleable मॉडिफ़ायर जोड़ना भूल जाएं, जो कि सुलभता प्रॉपर्टी के बारे में ज़्यादा जानें.

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

एक से ज़्यादा ऐसेट का इस्तेमाल करके, कस्टम कॉम्पोनेंट लागू करने की जांच करना सुलभता सेवाओं को इसके काम करने के तरीके की पुष्टि करनी होगी.

अन्य संसाधन