অ্যাপ অ্যাক্সেসিবিলিটি উন্নত করার নীতি

অ্যাক্সেসিবিলিটি সংক্রান্ত প্রয়োজনীয়তা থাকা ব্যবহারকারীদের সাহায্য করতে, Android ফ্রেমওয়ার্ক আপনাকে এমন অ্যাক্সেসিবিলিটি পরিষেবা তৈরি করতে দেয় যা ব্যবহারকারীদের অ্যাপ থেকে কন্টেন্ট দেখাতে পারে এবং তাদের হয়ে অ্যাপ অপারেট করতে পারে।

Android নিম্নলিখিত সহ বিভিন্ন সিস্টেম অ্যাক্সেসিবিলিটি পরিষেবা প্রদান করে:

• টকব্যাক: দৃষ্টিশক্তিহীন বা ক্ষীণ দৃষ্টিসম্পন্ন ব্যক্তিদের সাহায্য করে। এটি সিন্থেসাইজ করা ভয়েসের মাধ্যমে কন্টেন্ট ঘোষণা করে এবং ব্যবহারকারীর জেসচারের উত্তরে অ্যাপে অ্যাকশন পারফর্ম করে।
• Switch Access: শারীরিক চলাফেরায় অক্ষম ব্যক্তিদের সাহায্য করে। এটি ইন্ট্যার‍্যাক্টিভ এলিমেন্ট হাইলাইট করে এবং ব্যবহারকারী কোনও বোতাম প্রেস করলে তার উত্তরে অ্যাকশন পারফর্ম করে। এটি শুধুমাত্র একটি বা দুটি বোতাম ব্যবহার করে ডিভাইস কন্ট্রোল করার অনুমতি দেয়।

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

নিম্নলিখিত বিভাগে বর্ণিত প্রতিটি পেশাদার পদ্ধতি, আপনার অ্যাপের অ্যাক্সেসিবিলিটি আরও উন্নত করতে পারে:

লেবেল এলিমেন্ট

আপনার অ্যাপের মধ্যে প্রতিটি ইন্ট্যার‍্যাক্টিভ ও অর্থপূর্ণ UI এলিমেন্টের কন্টেন্ট ও উদ্দেশ্য ব্যবহারকারীদের বুঝতে পারতে হবে।

অ্যাক্সেসিবিলিটি অ্যাকশন যোগ করুন

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

বিল্ট-ইন অ্যাক্সেসিবিলিটি ফিচার ব্যবহার করা

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

রঙ ছাড়া অন্য কিউ ব্যবহার করুন

UI-তে এলিমেন্টের বিভাগগুলির মধ্যে ব্যবহারকারীকে স্পষ্টভাবে পার্থক্য করতে পারতে হবে। এটি করতে, রঙ সহ প্যাটার্ন ও পজিশন ব্যবহার করে এই পার্থক্যগুলি ফুটিয়ে তুলুন।

মিডিয়া কন্টেন্ট আরও অ্যাক্সেসযোগ্য করে তোলা

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

লেবেল এলিমেন্ট

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

বেশিরভাগ ক্ষেত্রে, Compose API ও Material-এ ডিফল্ট অ্যাক্সেসিবিলিটি সংক্রান্ত সহায়তা থাকে। তবে, আপনাকে যদি কোনও UI এলিমেন্টের সিম্যান্টিক প্রপার্টি ম্যানুয়ালি নির্দিষ্ট করতে হয়, তাহলে 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

টেক্সট ও ব্যবহারকারীর ইনপুট সম্পর্কে আরও জানতে, টেক্সট ফিল্ড কনফিগার করা দেখুন।

সংগ্রহের এলিমেন্ট

কালেকশনের এলিমেন্টে লেবেল যোগ করার সময়, প্রতিটি লেবেল অনন্য হতে হবে। এইভাবে, লেবেল ঘোষণা করার সময় সিস্টেমের অ্যাক্সেসিবিলিটি পরিষেবা ঠিক একটি অন-স্ক্রিন এলিমেন্টকে রেফার করতে পারে। এই চিঠিপত্র ব্যবহারকারীদের জানায় যে কখন তারা UI-এর মাধ্যমে সাইকেল চালায় অথবা কখন তারা এমন কোনও এলিমেন্টে ফোকাস সরিয়ে নেয় যা তারা আগেই খুঁজে পেয়েছে।

যেমন, আপনার কাছে 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

তালিকা ও গ্রিডের জন্য সিম্যান্টিক প্রপার্টি সম্পর্কে আরও জানতে, তালিকা ও আইটেম সংক্রান্ত তথ্য দেখুন।

সম্পর্কিত কন্টেন্টের গ্রুপ

আপনার অ্যাপে যদি একাধিক UI এলিমেন্ট থাকে যা একটি স্বাভাবিক গ্রুপ তৈরি করে, যেমন কোনও গানের বিবরণ বা মেসেজের অ্যাট্রিবিউট, তাহলে এইসব এলিমেন্টকে প্যারেন্ট কন্টেনারের (যেমন 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 (API লেভেল 28) ও এর পরের যেকোনও ভার্সনে, আপনি স্ক্রিনের প্যানেলের জন্য অ্যাক্সেসিবিলিটি-ফ্রেন্ডলি শীর্ষক প্রদান করতে পারবেন। অ্যাক্সেসিবিলিটি সংক্রান্ত কারণে, কোনও উইন্ডোর দৃশ্যত আলাদা অংশকে প্যান বলা হয়।

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

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

paneTitle সিম্যান্টিক্স প্রপার্টি সম্পর্কে আরও জানতে, উইন্ডোর মতো কম্পোনেন্ট দেখুন।

সাজসজ্জার এলিমেন্ট

আপনার UI-তে কোনও এলিমেন্ট যদি শুধুমাত্র ভিজ্যুয়াল স্পেসিং বা ভিজ্যুয়াল অ্যাপিয়ারেন্সের জন্য থাকে, তাহলে এলিমেন্টে উপযুক্ত প্রপার্টি সেট করুন যাতে বোঝা যায় যে অ্যাক্সেসিবিলিটি পরিষেবা এটি উপেক্ষা করতে পারে।

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 বা Switch Access-এর ব্যবহারকারীরা এমন অ্যাকশন পারফর্ম করতে পারবেন যা অন্যথায় শুধুমাত্র জেসচারের মাধ্যমে উপলভ্য হতে পারে।

Compose-এ, আপনি semantics মডিফায়ারে customActions প্রপার্টির মাধ্যমে কাস্টম অ্যাক্সেসিবিলিটি অ্যাকশনকে সংজ্ঞায়িত করতে পারবেন, এর জন্য CustomAccessibilityAction ব্যবহার করুন।

যেমন, আপনার অ্যাপ যদি কোনও আইটেম ডিসমিস করার জন্য ব্যবহারকারীদের সেটি সোয়াইপ করতে দেয়, তাহলে আপনি কাস্টম অ্যাক্সেসিবিলিটি অ্যাকশনের মাধ্যমে এই ফাংশনালিটি এক্সপোজ করতে পারবেন:

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

কাস্টম অ্যাক্সেসিবিলিটি অ্যাকশন প্রয়োগ করার ফলে, ব্যবহারকারীরা অ্যাকশন মেনুর মাধ্যমে অ্যাকশন অ্যাক্সেস করতে পারবেন।

কাস্টম অ্যাকশন সম্পর্কে আরও জানতে, কাস্টম অ্যাকশন দেখুন।

উপলভ্য অ্যাকশনকে বোধগম্য করে তোলা

কোনও UI এলিমেন্ট টাচ করে ধরে রাখার মতো অ্যাকশন সমর্থন করলে, টকব্যাকের মতো অ্যাক্সেসিবিলিটি পরিষেবা সেটিকে "লং প্রেস করতে ডবল ট্যাপ করে ধরে রাখুন" হিসেবে ঘোষণা করে।

এই সাধারণ ঘোষণার মাধ্যমে ব্যবহারকারীকে টাচ করে ধরে রাখার অ্যাকশন কী করে সেই সম্পর্কে কোনও প্রাসঙ্গিক তথ্য দেওয়া হয় না।

এই ঘোষণাটিকে আরও উপযোগী করে তুলতে, অ্যাকশনের একটি অর্থপূর্ণ বিবরণ নির্দিষ্ট করুন।

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

এর ফলে টকব্যাক "কনটেক্সট মেনু খুলুন" বলে ঘোষণা করে, যা ব্যবহারকারীদের অ্যাকশনের উদ্দেশ্য বুঝতে সাহায্য করে।

এছাড়াও, আপনি সরাসরি semantics মডিফায়ারে লেবেল নির্দিষ্ট করতে পারবেন।

ট্যাপ ও ক্লিক করা হলে উত্তর দেওয়া সম্পর্কে আরও জানতে, ট্যাপ ও প্রেস করা এবং ইন্টার‍্যাক্টিভ এলিমেন্ট দেখুন।

বিল্ট-ইন অ্যাক্সেসিবিলিটি ফিচার ব্যবহার করা

আপনার অ্যাপের UI ডিজাইন করার সময়, আগে থেকেই থাকা ফাংশনালিটি আবার প্রয়োগ করা এড়াতে বিল্ট-ইন অ্যাক্সেসিবিলিটি ফিচারের সুবিধা নিন। Material, Compose UI, এবং Foundation API ডিফল্ট হিসেবে অনেক অ্যাক্সেসিবিলিটি সংক্রান্ত প্র্যাক্টিস প্রয়োগ ও অফার করে।

Jetpack Compose-এ, অ্যাক্সেসিবল UI তৈরি করতে, Button, Switch এবং Checkbox-এর মতো বিল্ট-ইন কম্পোজ করার উপযুক্ত আইটেম ব্যবহার করুন। এইসব কম্পোনেন্ট role ও stateDescription-এর মতো semantics মডিফায়ার সহ আগে থেকেই প্যাকেজ করা থাকে, যা আপনি অ্যাপ আরও অ্যাক্সেসযোগ্য করে তুলতে ব্যবহার করতে পারেন।

কাস্টম কম্পোনেন্টে সিম্যান্টিক্স প্রয়োগ করা

কাস্টম কম্পোনেন্ট তৈরি করার সময়, এই কম্পোনেন্টকে নিজের ভূমিকা পালন করার জন্য কী ধরনের অ্যাক্সেসিবিলিটি সহায়তা প্রয়োজন সেই বিষয়ে খেয়াল রাখুন। সাধারণত, আপনি আগে থেকেই ব্যবহার করছেন এমন স্ট্যান্ডার্ড Compose API—যেমন 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 (যেমন "চালু", "বন্ধ", "চেক করা হয়েছে" বা "চেক করা হয়নি") এবং প্রাসঙ্গিক অ্যাকশন লেবেল অন্তর্ভুক্ত থাকে। আরও তথ্যের জন্য, কাস্টম কম্পোনেন্ট দেখুন।

রঙ ছাড়া অন্যান্য সূত্র ব্যবহার করুন

বর্ণান্ধতার সমস্যা আছে এমন ব্যবহারকারীদের সাহায্য করতে, আপনার অ্যাপের স্ক্রিনের মধ্যে UI এলিমেন্ট আলাদা করতে, রঙের পরিবর্তে অন্যান্য কিউ ব্যবহার করুন। এইসব টেকনিকের মধ্যে বিভিন্ন আকার বা সাইজ ব্যবহার করা, টেক্সট বা ভিজ্যুয়াল প্যাটার্ন দেওয়া, অথবা এলিমেন্টগুলির পার্থক্য চিহ্নিত করতে অডিও- বা টাচ-ভিত্তিক (হ্যাপ্টিক) ফিডব্যাক যোগ করা অন্তর্ভুক্ত থাকতে পারে।

ছবি ১-এ একটি অ্যাক্টিভিটির দুটি ভার্সন দেখানো হয়েছে। একটি ভার্সনে, ওয়ার্কফ্লোতে দুটি সম্ভাব্য অ্যাকশনের মধ্যে পার্থক্য করতে শুধুমাত্র রঙ ব্যবহার করা হয়। অন্য ভার্সনে, দুটি বিকল্পের মধ্যে পার্থক্য হাইলাইট করতে রঙের পাশাপাশি শেপ ও টেক্সট যোগ করার পেশাদার পদ্ধতি ব্যবহার করা হয়েছে:

মিডিয়া কন্টেন্ট আরও অ্যাক্সেসযোগ্য করে তোলা

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

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

অতিরিক্ত রিসোর্স

আপনার অ্যাপকে আরও অ্যাক্সেসিবল করে তোলার ব্যাপারে আরও তথ্য পেতে, নিম্নলিখিত অতিরিক্ত রিসোর্স দেখুন:

কোডল্যাবস

• Jetpack Compose-এ অ্যাক্সেসিবিলিটি

কন্টেন্ট দেখা

• অ্যাপ অ্যাক্সেসিবিলিটি (ভিউ) উন্নত করার নীতি