Accessibility Label — এটি কী, মৌলিক ধারণা এবং iOS এবং Android এর জন্য কিভাবে ব্যবহার করবেন

Accessibility Label কী

Accessibility Label হল একটি স্ট্রিং বৈশিষ্ট্য যা সহায়ক প্রযুক্তির জন্য উপাদানের নাম সংজ্ঞায়িত করে। যখন ব্যবহারকারী VoiceOver চালু করে স্ক্রিনে আঙ্গুল চালায়, স্ক্রিন রিডার ফোকাসকৃত উপাদানের Label পড়ে। লেবেল ছাড়া, ব্যবহারকারী কেবল উপাদানের ধরন শুনতে পায়: “বাটন”, “ছবি” — এর উদ্দেশ্য নির্দেশ ছাড়া।

Google I/O 2024, “Accessibility Testing” অনুযায়ী, স্টোর অ্যাপ্লিকেশনে 35% গুরুতর অ্যাক্সেসিবিলিটি লঙ্ঘন লেবেলের অনুপস্থিতি বা অশুদ্ধতার সাথে সম্পর্কিত। Android এ Accessibility Scanner একটি লেবেলের অনুপস্থিতি সর্বোচ্চ তীব্রতার ত্রুটি হিসাবে শনাক্ত করে।

একটি মৌলিক সীমাবদ্ধতা: Label উপাদানের ধরন ধারণ করতে পারে না। VoiceOver এবং TalkBack স্বচালিতভাবে ঘোষণায় ভূমিকা (বাটন, হেডার, লিঙ্ক) যোগ করে। যদি Label এ “পঠানের বাটন” থাকে, তবে ব্যবহারকারী শুনতে পাবেন: “পঠানের বাটন, বাটন” — দ্বিরূপণ।

Label এবং WCAG 4.1.2: নাম, ভূমিকা, মান

WCAG 4.1.2 (স্তর A) দাবি করে যে প্রতিটি ব্যবহারকারী ইন্টারফেস উপাদানের একটি প্রোগ্রামাটিকভাবে নির্ধারণযোগ্য নাম, ভূমিকা এবং মান থাকা উচিত। Accessibility Label নাম প্রদান করে। যদি Label অনুপস্থিত থাকে, তবে মানদণ্ডটি লঙ্ঘিত হয় এবং অ্যাপ্লিকেশন বেসিক সার্টিফিকেশন পাস করে না।

iOS: accessibilityLabel বৈশিষ্ট্য

iOS এ, accessibilityLabel UIAccessibility প্রোটোকল থেকে সকল UIView উত্তরাধিকার করে। যদি একটি উপাদানে টেক্সট থাকে (শিরোনাম সহ UIButton, টেক্সট সহ UILabel), তবে Label স্বচালিতভাবে সেই টেক্সটে সেট হয়। UIImageView, কাস্টম কন্ট্রোল এবং কন্টেইনারের জন্য, Label ম্যানুয়ালি সেট করতে হবে।

একটি কাস্টম টেবিল সেলের উদাহরণ:

class CustomTableViewCell: UITableViewCell {
    let titleLabel = UILabel()
    let priceLabel = UILabel()

    override func awakeFromNib() {
        super.awakeFromNib()
        self.isAccessibilityElement = true
        self.accessibilityLabel =
            "\(titleLabel.text ?? "") - \(priceLabel.text ?? "")"
    }
}

কাস্টম UIView এর জন্য, আপনি accessibilityLabel গেটার অভিরোহ করতে পারেন:

class RatingView: UIView {
    var rating: Int = 5

    override var accessibilityLabel: String? {
        get { return "রেটিং: \(rating) এর মধ্যে 5" }
        set {}
    }
}

Apple HIG, 2024 পরামর্শ করে: যদি একটি উপাদান একাধিক উপ-উপাদান নিয়ে গঠিত (যেমন নাম এবং দাম সহ একটি পণ্যকার্ড), তবে সেগুলিকে একটি সমগ্র Label সহ একটি অ্যাক্সেসিবিলিটি উপাদানে সম্মিলিত করুন। প্যারেন্টে isAccessibilityElement = true এবং চাইল্ডে false সেট করুন।

NSAttributedString এবং accessibilityLabel

যদি UILabel NSAttributedString ব্যবহার করে, তবে accessibilityLabel ডিফল্ট হিসাবে .string (সাদা টেক্সট) এর সমান হয়। যদি আপনাকে একটি অর্থবোধভাবে ভিন্ন মান (যেমন একটি প্রতীক আইকন যা ★ অক্ষরের পরিবর্তে “স্টার” হিসাবে পড়ে) পাশ করতে হয়, তবে স্পষ্টভাবে accessibilityLabel সেট করুন। VoiceOver Unicode অক্ষরগুলি অর্থপূর্ণভাবে পড়ে না।

Android: contentDescription এর মাধ্যমে Label

Android এ, contentDescription ImageView, ImageButton এবং কাস্টম View এর জন্য Label হিসাবে কাজ করে। বিল্ট-ইন টেক্সট সহ TextView এবং Button এর জন্য, contentDescription সেট করা আবশ্যক নয় — TalkBack স্বচালিতভাবে টেক্সট পড়ে।

Kotlin এর মাধ্যমে প্রোগ্রামাটিক সেটিং:

binding.iconStar.contentDescription = "পসংদে পণ্য"

// একাধিক উপাদান সহ কাস্টম View এর জন্য
binding.customCard.setContentDescription(
    "\(title) এর মূল্য \(price)")

সাজানো উপাদানের জন্য XML এ:

<ImageView
    android:contentDescription="@null"
    android:src="@drawable/divider"
    android:importantForAccessibility="no" />

importantForAccessibility = “no” বৈশিষ্ট্যটি অ্যাক্সেসিবিলিটি ট্রি থেকে উপাদানটিকে সম্পূর্ণরূপে বাদ করে। iOS এ, সমতুল্য isAccessibilityElement = false।

Compose: semantics এবং contentDescription

Jetpack Compose এ, Label semantics মডিফায়ারের মাধ্যমে সেট করা হয়:

Image(
    painter = painterResource(R.drawable.ic_search),
    contentDescription = "পণ্য অনুসন্ধান",
    modifier = Modifier.semantics {
        contentDescription = "পণ্য অনুসন্ধান"
    }
)

Compose এ, contentDescription Image এর জন্য একটি বাধ্যবাধকমূলক প্যারামিটার — এটি ছাড়া কোড কম্পাইল হবে না (সাতর্কবাণী)। এটি API ডিজাইনের মাধ্যমে অ্যাক্সেসিবিলিটি বাধ্যকরভাবে উন্নত করে।

Label এবং Hint: ভূমিকা পার্থক্য

Accessibility Label প্রশ্ন “এই উপাদানটি কী?” এর উত্তর দেয়। Hint (iOS এ accessibilityHint, Android এ contentDescription এ অতিরিক্ত টেক্সট) — “ইন্টার্যাক্শনে কী হবে?” VoiceOver এগুলিকে ক্রমিকভাবে বলে: প্রথমে Label, তারপর Hint।

মুছে ফেলার বাটন এর উদাহরণ:

• Label: “মুছুন”
• Hint: “নির্বাচিত ছবিটি স্থায়ীভাবে মুছে ফেলে”
• VoiceOver: “মুছুন। নির্বাচিত ছবিটি স্থায়ীভাবে মুছে ফেলে”

Deque University, 2024 অনুযায়ী, Label এবং Hint এর সঠিক পৃথক্করণ VoiceOver ব্যবহারকারীদের জন্য টাস্ক সম্পূর্ণের হার 28% বৃদ্ধি করে। জ্ঞানগত ব্যাধিগ্রস্ত ব্যবহারকারীরা বিশেষ করে Hint এর উপর নির্ভরশীল: ব্যাখ্যা ছাড়া “মুছুন” টিপতে দ্বিধায় থাকলে, 40% কাজটি প্রত্যাখ্যান করে।

কথায় Hint প্রয়োজন নয়

• সহজবোধ্য কর্ম সহ উপাদান (“পিছনে”, “বন্ধ করুন” — Label যথেষ্ট)
• Label ইতিমধ্যে ফলাফল বর্ণনা করে (“বার্তা পঠান” — নামেই ক্রিয়া)
• সিস্টেম কন্ট্রোল (UISwitch, সিস্টেম ধরণের UIButton) — তাদের আচরণ মানক

সাধারণ ভুল: Hint এর পরিবর্তে Label

একটি সাধারণ ভুল: Label এ “মুছুন” এর পরিবর্তে “মুছে ফেলার বাটন” লেখা। উপাদানের ধরন (বাটন) VoiceOver এর মাধ্যমে একটি ট্রেইট দ্বারা স্বচালিতভাবে যুক্ত করা হয়। ফলে, ব্যবহারকারী শুনতে পায়: “মুছে ফেলার বাটন, বাটন” — দ্বিরূপণ। সঠিক Label: “মুছুন”, Hint: “নির্বাচিত ছবিটি মুছে ফেলে”।

লোকালইজেশন এবং সর্বোত্তম অভ্যাস

লেবেল লোকালইজেশন বাধ্যবাধকমূলক — এটি মানক প্রক্রিয়ার মাধ্যমে হয়: iOS এ NSLocalizedString, Android এ স্ট্রিং রিসোর্স @string/ । লোকালইজেশন ছাড়া কখনো ইংরেজিতে কঙ্কাটেনেশনের মাধ্যমে Label সেট করবেন না।

W3C WCAG 2.2 এর উপর ভিত্তি করে ভালো Label এর নিয়ম:

• কী ওয়ার্ড দিয়ে শুরু করুন — “পণ্য অনুসন্ধান”, “পণ্য অনুসন্ধানের জন্য ক্ষেত্র” নয়
• “বাটন”, “ক্ষেত্র”, “ছবি” শব্দ অন্তর্ভুক্ত করবেন না — ভূমিকা স্বচালিতভাবে যুক্ত হয়
• লক্ষ্য দর্শকের বোধ্য প্রাকৃতিক ভাষা ব্যবহার করুন
• সংক্ষিপ্তি এড়ান (সাধারণত গ্রহণযোগ্য ব্যতিক্রম ছাড়া: “পিই”, “কিজি”) — স্ক্রিন রিডার সেগুলি আবাক্ষিকভাবে পড়ে
• ইনপুট উপাদানের জন্য, একটি উদাহরণ যোগ করুন: “ইমেইল (উদাহরণ@ডোমেইন.কম)”

ব্রান্ডের মধ্যে Label এর সঙ্গতি

অ্যাপ্লিকেশন জুড়ে Label এর জন্য একটি একক শব্দাবলী ব্যবহার করুন। যদি এক স্ক্রিনে “পসংদ” এবং অন্যটিতে “বুকমার্ক” লেখা থাকে, তবে ব্যবহারকারী দিক্বাগিত হন। একটি অ্যাক্সেসিবিলিটি শব্দাবলী টেবিল তৈরি করুন — ডিজাইনার এবং লোকালইজারদের সাথে সমন্বয় করুন।

ফর্ম উপাদানের জন্য Label

ইনপুট ফিল্ড (UITextField, EditText) এর জন্য, Label কে প্লেসহোল্ডার বা ফিল্ড লেবেলের সাথে মেলা খেতে হবে। তবে, টেক্সট ইনপুটের পর প্লেসহোল্ডার প্রায়ই অদৃশ্য হয়ে যায়। স্থায়ী নামের জন্য accessibilityLabel এবং ফিল্ডের বর্তমান বিষয়বস্তুর জন্য accessibilityValue ব্যবহার করুন — এটি WCAG 4.1.2 মানক। সমাধান: accessibilityLabel স্থিরভাবে (ফিল্ড লেবেলের সমান) এবং accessibilityValue গতিশীলভাবে (লেখা টেক্সটের সমান) সেট করুন। iOS এ এটি স্বচালিত, কিন্তু কাস্টম ফিল্ডের জন্য — ম্যানুয়ালি accessibilityValue অভিরোহের মাধ্যমে। যাচাই করুন যে VoiceOver “, টেক্সট ফিল্ড” এর পরিবর্তে “ইমেইল, উদাহরণ@ডোমেইন.কম, টেক্সট ফিল্ড” পড়ে।

অ্যাক্সেসিবিলিটি লেবেল পরীক্ষা কিভাবে করবেন

স্বচালিত পরীক্ষা হল সব স্ক্রিনে Label সশুদ্ধতা নিশ্চিত করার একমাত্র উপায়। iOS .label এ অ্যাক্সেস সহ XCUIApplication প্রদান করে, Android — AccessibilityCheckRule এবং setContentDescription।

iOS এর জন্য উদাহরণ পরীক্ষা:

func testLabelsAreUnique() {
    let app = XCUIApplication()
    app.launch()
    let allButtons = app.buttons.allElementsBoundByIndex
    let labels = allButtons.compactMap { $0.label }
    let uniqueLabels = Set(labels)
    XCTAssertEqual(labels.count, uniqueLabels.count,
        "ডাপ্লিকেট Label পাওয়া গেছে")
}

Espresso সহ Android এর জন্য উদাহরণ:

@Test
fun testButtonHasAccessibilityLabel() {
    onView(withId(R.id.btnSubmit))
        .check(matches(
            withContentDescription(containsString("পাঠান"))
        ))
}

ম্যানুয়াল পরীক্ষা: VoiceOver (iOS) বা TalkBack (Android) সক্ষম করুন এবং স্ক্রিনের সকল উপাদানে ডানে স্যাইপ করুন। প্রতিটি উপাদান একটি অর্থপূর্ণ ঘোষণা পাওয়া উচিত। যদি আপনি কেবল “বাটন” বা “ছবি” শুনতে পান — তবে Label অনুপস্থিত।

VoiceOver রোটার এবং দ্রুত নেভিগেশন

Label সেট করার পর, VoiceOver ব্যবহারকারীরা দ্রুত নেভিগেশনের জন্য রোটার ব্যবহার করতে পারেন: “বাটন”, “শিরোনাম”, “লিঙ্ক” এবং অন্যান্য মোড। যদি Label সঠিকভাবে সেট করা হয়, তবে VoiceOver উপাদানটিকে সম্পর্কিত রোটার মোডে অন্তর্ভুক্ত করে। যাচাই করুন যে সকল বাটন “বাটন” মোডে এবং সকল শিরোনাম “শিরোনাম” মোডে দৃশ্যমান।

Label VoiceOver অনুসন্ধানকেও প্রভাবিত করে। ব্যবহারকারী অনুসন্ধান মোডে একটি শব্দ টাইপ করতে পারে, এবং VoiceOver ফোকাস মেলা লেবেলযুক্ত উপাদানে সরাবে। তাই, Label এ সেই কী ওয়ার্ড থাকা উচিত যা ব্যবহারকারী অনুসন্ধান করবেন।

CI/CD পাইপলাইনে ইংটেগ্রেশন

পাইপলাইনে Label যাচাই যোগ করুন। iOS এ, fastlane scan এর সাথে XCUITest ব্যবহার করুন। Android এ, Accessibility Test Framework ব্যবহার করুন AccessibilityCheckRule সহ যা খালি contentDescription শনাক্ত করে। এটি নতুন স্ক্রিন মার্জ করার সময় রিগ্রেশন প্রতিরোধ করে।