API ডিফল্ট

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

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

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

ন্যূনতম স্পর্শ লক্ষ্য আকার

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

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

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

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

@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

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

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

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

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

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 , এবং actionable আচরণ, যেমন clickable বা toggleable , অন্যান্য পূর্বনির্ধারিত শব্দার্থবিদ্যার সাথে আসে যা তাদের অভ্যন্তরীণ আচরণ বর্ণনা করে এবং অন্যান্য Compose API এর মাধ্যমে পরিবর্তন করা যেতে পারে।

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

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

উদাহরণস্বরূপ, একটি ম্যাটেরিয়াল Button একটি চাইল্ড আইকন এবং কিছু টেক্সট থাকতে পারে। বাচ্চাদের পৃথকভাবে বিবেচনা করার পরিবর্তে, একটি ম্যাটেরিয়াল 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

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

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

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

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

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

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

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

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