এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

API ডিফল্ট

উপাদান, কম্পোজ UI, এবং ফাউন্ডেশন API ডিফল্টরূপে অনেকগুলি অ্যাক্সেসযোগ্য অনুশীলন বাস্তবায়ন এবং অফার করে। এগুলিতে অন্তর্নির্মিত শব্দার্থবিদ্যা রয়েছে যা তাদের নির্দিষ্ট ভূমিকা এবং ফাংশন অনুসরণ করে, যার অর্থ হল বেশিরভাগ অ্যাক্সেসিবিলিটি সমর্থন সামান্য বা কোনও অতিরিক্ত কাজ ছাড়াই সরবরাহ করা হয়।

উপযুক্ত উদ্দেশ্যে উপযুক্ত API ব্যবহার করার অর্থ সাধারণত উপাদানগুলি পূর্বনির্ধারিত অ্যাক্সেসিবিলিটি আচরণের সাথে আসে যা স্ট্যান্ডার্ড ব্যবহারের ক্ষেত্রে কভার করে, তবে এই ডিফল্টগুলি আপনার অ্যাক্সেসযোগ্যতার প্রয়োজনের সাথে মানানসই কিনা তা দুবার চেক করতে ভুলবেন না। যদি না হয়, রচনা আরো নির্দিষ্ট প্রয়োজনীয়তা কভার করার উপায় প্রদান করে।

কম্পোজ এপিআই-এ ডিফল্ট অ্যাক্সেসিবিলিটি শব্দার্থবিদ্যা এবং প্যাটার্নগুলি জানার মাধ্যমে কীভাবে সেগুলিকে মাথায় রেখে অ্যাক্সেসিবিলিটি ব্যবহার করতে হয়, সেইসাথে আরও কাস্টম উপাদানগুলিতে সমর্থনযোগ্য অ্যাক্সেসিবিলিটি বুঝতে সাহায্য করে৷

ন্যূনতম টাচ টার্গেট মাপ

যে কোনও অন-স্ক্রিন উপাদান যা কেউ ক্লিক করতে, স্পর্শ করতে বা ইন্টারঅ্যাক্ট করতে পারে তা নির্ভরযোগ্য ইন্টারঅ্যাকশনের জন্য যথেষ্ট বড় হওয়া উচিত। এই উপাদানগুলিকে আকার দেওয়ার সময়, মেটেরিয়াল ডিজাইন অ্যাক্সেসিবিলিটি নির্দেশিকাগুলি সঠিকভাবে অনুসরণ করতে সর্বনিম্ন আকার 48dp সেট করা নিশ্চিত করুন৷

উপাদান উপাদানগুলি — যেমন Checkbox , RadioButton , Switch , Slider , এবং Surface — এই ন্যূনতম আকারটি অভ্যন্তরীণভাবে সেট করুন, কিন্তু শুধুমাত্র যখন উপাদানটি ব্যবহারকারীর ক্রিয়াগুলি গ্রহণ করতে পারে৷ উদাহরণস্বরূপ, যখন একটি Checkbox onCheckedChange প্যারামিটার একটি নন-নাল মান সেট করা থাকে, তখন চেকবক্সে প্যাডিং অন্তর্ভুক্ত থাকে যার প্রস্থ এবং উচ্চতা কমপক্ষে 48 ডিপি থাকে৷

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

48 ডিপি প্রস্থ এবং উচ্চতা সহ ডিফল্ট প্যাডিং সহ একটি চেকবক্স। — **চিত্র 1.** ডিফল্ট প্যাডিং সহ একটি চেকবক্স।

যখন onCheckedChange প্যারামিটারটি নাল সেট করা হয়, তখন প্যাডিং অন্তর্ভুক্ত করা হয় না, কারণ উপাদানটির সাথে সরাসরি যোগাযোগ করা যায় না।

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

একটি চেকবক্স যাতে কোন প্যাডিং নেই। — **চিত্র 2.** প্যাডিং ছাড়া একটি চেকবক্স।

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

'বিকল্প' পাঠ্যের পাশে একটি চেকবক্স যা নির্বাচিত এবং অনির্বাচিত হচ্ছে। — **চিত্র 3.** ক্লিকযোগ্য আচরণ সহ একটি চেকবক্স।

যখন একটি ক্লিকযোগ্য কম্পোজেবলের আকার ন্যূনতম টাচ টার্গেট সাইজের থেকে ছোট হয়, তখনও কম্পোজ টাচ টার্গেট সাইজ বাড়ায়। এটি কম্পোজেবলের সীমানার বাইরে টাচ টার্গেটের আকার প্রসারিত করে তা করে।

নিম্নলিখিত উদাহরণে একটি খুব ছোট ক্লিকযোগ্য 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

একটি খুব ছোট ক্লিকযোগ্য বাক্স যা বাক্সের পাশে ট্যাপ করে একটি বড় টাচ টার্গেটে প্রসারিত হয়। — **চিত্র 4.** একটি খুব ছোট ক্লিকযোগ্য বাক্স যা একটি বড় টাচ টার্গেটে প্রসারিত হয়।

বিভিন্ন কম্পোজেবলের স্পর্শ এলাকার মধ্যে সম্ভাব্য ওভারল্যাপ প্রতিরোধ করতে, সর্বদা কম্পোজেবলের জন্য যথেষ্ট বড় ন্যূনতম আকার ব্যবহার করুন। উদাহরণে, এর অর্থ হল ভিতরের বাক্সের জন্য সর্বনিম্ন আকার সেট করতে 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

একটি বড় টাচ টার্গেট তৈরি করতে পূর্ববর্তী উদাহরণ থেকে খুব ছোট বাক্সটি আকারে বৃদ্ধি করা হয়েছে। — **চিত্র 5.** একটি বড় বক্স টাচ টার্গেট।

গ্রাফিক উপাদান

আপনি যখন একটি Image বা Icon কম্পোজযোগ্য সংজ্ঞায়িত করেন, তখন অ্যাপটি কী প্রদর্শন করছে তা বোঝার জন্য Android ফ্রেমওয়ার্কের জন্য কোন স্বয়ংক্রিয় উপায় নেই। আপনাকে গ্রাফিক উপাদানের একটি পাঠ্য বিবরণ পাস করতে হবে।

একটি স্ক্রীন কল্পনা করুন যেখানে ব্যবহারকারী বন্ধুদের সাথে বর্তমান পৃষ্ঠা ভাগ করতে পারে। এই স্ক্রিনে একটি ক্লিকযোগ্য শেয়ার আইকন রয়েছে:

চিত্র 6. নির্বাচিত 'শেয়ার' আইকন সহ ক্লিকযোগ্য আইকনগুলির একটি সারি৷

শুধুমাত্র আইকনের উপর ভিত্তি করে, 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 মূলত গ্রাফিক উপাদানের জন্য ব্যবহার করা বোঝানো হয়, যেমন চিত্র। উপাদান উপাদান, Button বা Text , এবং কর্মযোগ্য আচরণ, যেমন clickable বা toggleable , অন্যান্য পূর্বনির্ধারিত শব্দার্থবিদ্যার সাথে আসে যা তাদের অন্তর্নিহিত আচরণ বর্ণনা করে এবং অন্যান্য রচনা API-এর মাধ্যমে পরিবর্তন করা যেতে পারে।

ইন্টারেক্টিভ উপাদান

উপাদান এবং ফাউন্ডেশন কম্পোজ APIগুলি UI উপাদানগুলি তৈরি করে যা ব্যবহারকারীরা clickable এবং toggleable পরিবর্তনকারী APIগুলির মাধ্যমে ইন্টারঅ্যাক্ট করতে পারে৷ যেহেতু ইন্টারঅ্যাক্টেবল কম্পোনেন্টে একাধিক উপাদান থাকতে পারে, clickable এবং toggleable ডিফল্টভাবে তাদের বাচ্চাদের শব্দার্থকে একত্রিত করে, যাতে কম্পোনেন্টটিকে একটি লজিক্যাল সত্তা হিসাবে বিবেচনা করা হয়।

উদাহরণস্বরূপ, একটি উপাদান Button একটি শিশু আইকন এবং কিছু পাঠ্য নিয়ে গঠিত হতে পারে। শিশুদেরকে ব্যক্তি হিসাবে বিবেচনা করার পরিবর্তে, একটি উপাদান বোতাম তার শিশুদের শব্দার্থবিদ্যাকে ডিফল্টরূপে একত্রিত করে, যাতে অ্যাক্সেসিবিলিটি পরিষেবাগুলি তাদের সেই অনুযায়ী গোষ্ঠীবদ্ধ করতে পারে:

একইভাবে, clickable মডিফায়ার ব্যবহার করার ফলে একটি কম্পোজেবল তার বংশধরের শব্দার্থবিদ্যাকে একটি একক সত্তায় একত্রিত করে, যা একটি সংশ্লিষ্ট ক্রিয়া উপস্থাপনা সহ অ্যাক্সেসিবিলিটি পরিষেবাগুলিতে পাঠানো হয়:

Row(
    // Uses `mergeDescendants = true` under the hood
    modifier = Modifier.clickable { openArticle() }
) {
    Icon(
        painter = painterResource(R.drawable.ic_logo),
        contentDescription = "Open",
    )
    Text("Accessibility in Compose")
}AccessibilitySnippets.kt

অ্যাক্সেসিবিলিটি পরিষেবাগুলিতে অতিরিক্ত তথ্য প্রদান করতে এবং ক্রিয়াটির আরও সুন্দর উপস্থাপনা অফার করতে আপনি অভিভাবক ক্লিকযোগ্য একটি নির্দিষ্ট onClickLabel সেট করতে পারেন:

Row(
    modifier = Modifier
        .clickable(onClickLabel = "Open this article") {
            openArticle()
        }
) {
    Icon(
        painter = painterResource(R.drawable.ic_logo),
        contentDescription = "Open"
    )
    Text("Accessibility in Compose")
}AccessibilitySnippets.kt

একটি উদাহরণ হিসাবে TalkBack ব্যবহার করে, এই clickable সংশোধক এবং এর ক্লিক লেবেল "অ্যাক্টিভেট করতে ডবল ট্যাপ" এর সাধারণ ডিফল্ট প্রতিক্রিয়ার পরিবর্তে "এই নিবন্ধটি খুলতে ডবল ট্যাপ" এর একটি অ্যাকশন ইঙ্গিত প্রদান করতে TalkBack কে সক্ষম করবে৷

এই প্রতিক্রিয়া কর্মের ধরনের উপর নির্ভর করে পরিবর্তিত হয়। একটি দীর্ঘ ক্লিক একটি টকব্যাক ইঙ্গিত প্রদান করবে "ডাবল ট্যাপ করুন এবং ধরে রাখুন", একটি লেবেল অনুসরণ করুন:

Row(
    modifier = Modifier
        .combinedClickable(
            onLongClickLabel = "Bookmark this article",
            onLongClick = { addToBookmarks() },
            onClickLabel = "Open this article",
            onClick = { openArticle() },
        )
) {}AccessibilitySnippets.kt

কিছু ক্ষেত্রে, আপনার কাছে clickable মডিফায়ারে সরাসরি অ্যাক্সেস নাও থাকতে পারে (উদাহরণস্বরূপ, যখন এটি একটি নিম্ন নেস্টেড স্তরে কোথাও সেট করা থাকে), কিন্তু তারপরও ডিফল্ট থেকে ঘোষণা লেবেল পরিবর্তন করতে চান। এটি করার জন্য, semantics মডিফায়ার ব্যবহার করে এবং সেখানে ক্লিক লেবেল সেট করে অ্যাকশনের উপস্থাপনা পরিবর্তন করার জন্য ঘোষণাটি পরিবর্তন করা থেকে clickable সেটিং বিভক্ত করুন:

@Composable
private fun ArticleList(openArticle: () -> Unit) {
    NestedArticleListItem(
        // Clickable is set separately, in a nested layer:
        onClickAction = openArticle,
        // Semantics are set here:
        modifier = Modifier.semantics {
            onClick(
                label = "Open this article",
                action = {
                    // Not needed here: openArticle()
                    true
                }
            )
        }
    )
}AccessibilitySnippets.kt

এই ক্ষেত্রে, আপনাকে দুইবার ক্লিক অ্যাকশন পাস করতে হবে না, যেহেতু বিদ্যমান কম্পোজ API, যেমন clickable বা Button , আপনার জন্য এটি পরিচালনা করে। এর কারণ হল মার্জিং লজিক নিশ্চিত করে যে বাইরেরতম সংশোধক লেবেল এবং উপস্থিত তথ্যের জন্য ব্যবস্থা নেওয়া হয়েছে।

পূর্ববর্তী উদাহরণে, openArticle() ক্লিক অ্যাকশনটি NestedArticleListItem দ্বারা স্বয়ংক্রিয়ভাবে তার clickable শব্দার্থবিদ্যায় স্থানান্তরিত হয় এবং দ্বিতীয় শব্দার্থবিদ্যা মডিফায়ার অ্যাকশনে শূন্য রাখা যেতে পারে। যাইহোক, ক্লিক লেবেলটি দ্বিতীয় শব্দার্থবিদ্যা পরিবর্তনকারী onClick(label = "Open this article") থেকে নেওয়া হয়েছে, কারণ এটি প্রথমটিতে উপস্থিত ছিল না।

আপনি এমন পরিস্থিতিতে যেতে পারেন যেখানে আপনি বাচ্চাদের শব্দার্থবিদ্যাকে অভিভাবকের মধ্যে একত্রিত করার আশা করেন, কিন্তু তা ঘটে না। আরও গভীরতর তথ্যের জন্য মার্জিং এবং ক্লিয়ারিং দেখুন।

কাস্টম উপাদান

কাস্টম উপাদানগুলির জন্য, একটি সাধারণ নিয়ম হিসাবে, উপাদান লাইব্রেরিতে বা অন্যান্য রচনা লাইব্রেরিতে অনুরূপ উপাদানের বাস্তবায়ন দেখুন এবং এটির অ্যাক্সেসিবিলিটি আচরণকে অনুকরণ করুন বা সংশোধন করুন যেখানে এটি করা যুক্তিযুক্ত।

উদাহরণস্বরূপ, যদি আপনি আপনার নিজস্ব বাস্তবায়নের সাথে উপাদান Checkbox প্রতিস্থাপন করছেন, বিদ্যমান চেকবক্স বাস্তবায়নের দিকে তাকালে আপনাকে triStateToggleable মডিফায়ার যোগ করার কথা মনে করিয়ে দেবে, যা এই উপাদানটির অ্যাক্সেসিবিলিটি বৈশিষ্ট্যগুলি পরিচালনা করে।

উপরন্তু, ফাউন্ডেশন মডিফায়ারগুলির ব্যাপক ব্যবহার করুন, কারণ এর মধ্যে বাক্সের বাইরে অ্যাক্সেসযোগ্যতা বিবেচনার পাশাপাশি বিদ্যমান রচনা অনুশীলনগুলি এই বিভাগে অন্তর্ভুক্ত রয়েছে।

আপনি সাফ এবং সেট শব্দার্থবিদ্যা বিভাগে একটি কাস্টম টগল উপাদানের একটি উদাহরণও খুঁজে পেতে পারেন, সেইসাথে API নির্দেশিকাগুলিতে কাস্টম উপাদানগুলিতে অ্যাক্সেসযোগ্যতাকে সমর্থন করার বিষয়ে আরও বিশদ তথ্য।

{% শব্দার্থে %} {% endverbatim %}

আপনার জন্য প্রস্তাবিত

দ্রষ্টব্য: জাভাস্ক্রিপ্ট বন্ধ থাকলে লিঙ্ক টেক্সট প্রদর্শিত হয়
রচনায় অ্যাক্সেসযোগ্যতা
[কম্পোজে মেটেরিয়াল ডিজাইন 2[19]
আপনার রচনা বিন্যাস পরীক্ষা করা হচ্ছে

{% শব্দার্থে %} {% endverbatim %}