Content Description: এটি কী, নীতি এবং অ্যাক্সেসিবিলিটির জন্য কীভাবে সেট করবেন

অ্যাক্সেসিবিলিটিতে Content Description কী

Content Description হল একটি ইউজার ইন্টারফেস উপাদানের স্ট্রিং প্রপার্টি যা সহায়ক প্রযুক্তিগুলিকে ভিজুয়াল বিষয়বস্তুর টেক্সটুয়াল উপস্থাপনা প্রদান করে। একটি স্ক্রিন রিডার (iOS-এ VoiceOver, Android-এ TalkBack) উপাদানটিকে ভিজুয়ালভাবে চিনতে চেষ্টা করার পরিবর্তে বিবরণটি জোরে পড়ে। বিবরণ টেক্সট লেয়ার ছাড়া ছবি, আইকন, চার্ট, কাস্টম কন্ট্রোল এবং যেকোনো অ-পাঠ্য উপাদানের ক্ষেত্রে প্রযোজ্য।

Google Material Design, 2024 অনুসারে, contentDescription ছাড়া উপাদানগুলি WCAG 1.1.1 (Non-text Content) লঙ্ঘন করে। Accessibility Scanner পরীক্ষাগুলি দেখায় যে শপিং অ্যাপে 40% পর্যন্ত আইকনে বিবরণ নেই। একজন VoiceOver ব্যবহারকারী সুনির্দিষ্ট কিছু ছাড়া কেবল «ছবি» বা «বাটন» শোনেন — এই ধরনের ইন্টারফেস নেভিগেশনের জন্য অনুপযোগী হয়ে পড়ে।

Content Description কোনো উপাদানের দৃশ্যমান টেক্সট প্রতিস্থাপন করে না। যদি একটি বাটনে «পাঠান» টেক্সট লেবেল থাকে, তবে অতিরিক্ত বিবরণ সেট করার প্রয়োজন নেই — স্ক্রিন রিডার টেক্সট পড়বে। ছবি, আইকন এবং ইনপুট ফিল্ডের জন্য বিবরণ বাধ্যতামূলক।

Accessibility Scanner (Android) এবং Xcode Accessibility Inspector (iOS) টুল স্বয়ংক্রিয়ভাবে বিবরণের উপস্থিতি পরীক্ষা করে। রিলিজের আগে প্রতিটি স্ক্রিনে এই পরীক্ষাগুলি চালানোর সুপারিশ করা হয়।

কেন Content Description গুরুত্বপূর্ণ: ব্যবহারকারীর পরিস্থিতি

দৃষ্টি প্রতিবন্ধী ব্যবহারকারী ইন্টারফেস বোঝার জন্য VoiceOver-এর উপর নির্ভর করে। যদি একটি শপিং কার্ট আইকনের বিবরণ না থাকে, তবে সে কেবল «বাটন» শোনে। বাটনটি কী করে তা জানতে, তাকে blindly টিপতে হয় — একটি অপরিবর্তনীয় কর্মের ঝুঁকি। «কার্ট থেকে আইটেম সরান»-এর মতো একটি বিবরণ এক সেকেন্ডে এই সমস্যার সমাধান করে।

অস্থায়ী সীমাবদ্ধতাযুক্ত ব্যবহারকারী (বাইরে তীব্র রোদ, ভাঙা স্ক্রিন)ও VoiceOver ব্যবহার করেন। Apple Accessibility Report, 2023 অনুসারে, প্রায় 20% VoiceOver ব্যবহারকারীর স্থায়ী দৃষ্টি প্রতিবন্ধকতা নেই — তারা পরিস্থিতিগতভাবে বৈশিষ্ট্যটি চালু করেন।

WCAG 1.1.1: অ-পাঠ্য বিষয়বস্তু

WCAG 1.1.1 (লেভেল A) প্রয়োজন যে সমস্ত অ-পাঠ্য বিষয়বস্তুর একটি টেক্সট বিকল্প থাকা আবশ্যক। ব্যতিক্রম: বিষয়বস্তু যা আলংকারিক, কেবল ভিজুয়াল উপস্থাপনার জন্য ব্যবহৃত, বা কোনো তথ্য প্রকাশ করে না। আলংকারিকতা পরীক্ষা: আপনি যদি উপাদানটি সরান, তবে পৃষ্ঠার অর্থ কি পরিবর্তিত হয়? যদি না হয় — এটি স্ক্রিন রিডার থেকে লুকানো যেতে পারে।

Content Description Label থেকে কীভাবে আলাদা

Accessibility Label (iOS-এ accessibilityLabel) হল উপাদানের নাম যা স্ক্রিন রিডার ফোকাস হলে বলে। Content Description (iOS-এ accessibilityHint) হল অতিরিক্ত ব্যাখ্যা যা নামের পরে ঘোষণা করা হয় এবং কর্মের ফলাফল জানায়।

পার্থক্যটি একটি «কার্ট» বাটনের উদাহরণে স্পষ্ট। Label: «কার্ট»। Description: «চেকআউট স্ক্রিন খুলবে»। VoiceOver বলে: «কার্ট। চেকআউট স্ক্রিন খুলবে»। যদি শুধু Label সেট করা থাকে, তবে ব্যবহারকারী জানবে না যে টিপলে কী হবে।

সারণী: Label বনাম Description

নিয়ম: Label «এটি কী?» প্রশ্নের উত্তর দেয়, Description — «কী হবে?» প্রশ্নের। Android-এ contentDescription উভয় ভূমিকা পালন করতে পারে, কিন্তু অনুশীলনে এগুলিকে আলাদা করা ভাল: «[নাম], [ব্যাখ্যা]» সংযোজন ব্যবহার করুন।

কখন Description, Label-এর চেয়ে বেশি গুরুত্বপূর্ণ

জটিল জেসচার (মুছতে সোয়াইপ করা, কনটেক্সট মেনুর জন্য লং প্রেস) এর জন্য accessibilityHint বাধ্যতামূলক। VoiceOver ব্যবহারকারী লুকানো জেসচার সম্পর্কে জানেন না যদি না সেগুলি বর্ণনা করা হয়। উপাদানের hint-এ উল্লেখ করুন: «মুছতে বামে সোয়াইপ করুন»।

iOS: accessibilityHint অ্যাট্রিবিউট

iOS প্ল্যাটফর্মে, accessibilityHint UIView বা NSObject-এর同名 প্রপার্টির মাধ্যমে সেট করা হয়। মান হল 80টি অক্ষর পর্যন্ত একটি স্ট্রিং। VoiceOver বিস্তারিত বিবরণ মোড সক্ষম থাকলে (VoiceOver সেটিংস — «Verbosity»-এ) লেবেলের পরে hint পড়ে।

কাস্টম বাটনের জন্য hint সেট করার উদাহরণ:

import UIKit

class CustomButton: UIButton {
    override func awakeFromNib() {
        super.awakeFromNib()
        self.accessibilityLabel = "পছন্দে যোগ করুন"
        self.accessibilityHint = "আইটেমটি পছন্দের তালিকায় সংরক্ষণ করবে"
    }
}

টেক্সট বিষয়বস্তু ছাড়া UIImageView-এর জন্য, isAccessibilityElement = true এবং accessibilityHint সেট করা বাধ্যতামূলক:

let imageView = UIImageView(image: UIImage(named: "chart-sales"))
imageView.isAccessibilityElement = true
imageView.accessibilityHint = "শেষ ত্রৈমাসিকের বিক্রয় চার্ট"

VoiceOver পড়ে: «শেষ ত্রৈমাসিকের বিক্রয় চার্ট»। যদি hint খালি থাকে — কেবল «ছবি»। Apple HIG, 2024 hints-এ «টিপুন» বা «স্পর্শ করুন»-এর মতো ক্রিয়া ব্যবহার না করার পরামর্শ দেয় — VoiceOver স্বয়ংক্রিয়ভাবে জেসচার নির্দেশ যোগ করে।

SwiftUI: accessibilityHint মডিফায়ার

SwiftUI-তে, hint একটি চেইন মডিফায়ারের মাধ্যমে সেট করা হয়:

Image(systemName: "trash")
    .accessibilityLabel("মুছুন")
    .accessibilityHint("নির্বাচিত আইটেমটি স্থায়ীভাবে মুছে ফেলবে")

SwiftUI স্বয়ংক্রিয়ভাবে যৌগিক ভিউ-এর জন্য মডিফায়ারগুলিকে একত্রিত করে। যদি একটি Image একটি Button-এর ভিতরে থাকে, তবে SwiftUI বাটনের লেবেলকে প্রাথমিক accessibilityLabel হিসাবে ব্যবহার করে।

Android: contentDescription প্রপার্টি

Android-এ, contentDescription হয় XML মার্কআপে বা প্রোগ্রামেটিকভাবে setContentDescription()-এর মাধ্যমে সেট করা হয়। TalkBack উপাদানটিতে ফোকাস হলে বিবরণ ঘোষণা করে।

XML-এ উদাহরণ:

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_search"
    android:contentDescription="পণ্য অনুসন্ধান করুন" />

ডায়নামিক উপাদানের জন্য প্রোগ্রামেটিক সেটিং:

binding.iconSearch.contentDescription =
    "অনুসন্ধান। ফিল্টার সহ অনুসন্ধান স্ক্রিন খুলবে"

আলংকারিক ছবির (বিভাজক, পটভূমি, আলংকারিক আইকন) জন্য contentDescription = "@null" বা setContentDescription(null) সেট করুন — TalkBack এই ধরনের উপাদানগুলি এড়িয়ে যাবে। XML-এ: android:contentDescription="@null"। খালি স্ট্রিং "" কাজ করে না — TalkBack তবুও «ছবি» ঘোষণা করবে।

Android: ImageButton এবং CheckBox-এর জন্য গুরুত্বপূর্ণ বিবরণ

ImageButton-এর জন্য, সর্বদা contentDescription সেট করুন — TalkBack ছবিতে টেক্সট দেখে না। CheckBox-এর জন্য, বিবরণ গতিশীলভাবে পরিবর্তন হওয়া উচিত: স্থির বিবরণের পরিবর্তে «নির্বাচিত» / «নির্বাচিত নয়»। অবস্থা শ্রোতায় setContentDescription ব্যবহার করুন।

বিবরণ লেখার নিয়ম

তথ্যপূর্ণতা — বিবরণকে অর্থ বোঝানো উচিত, চেহারা নয়। «টিক চিহ্ন সহ নীল আইকন» নয়, বরং «আইটেম কার্টে যোগ করা হয়েছে»। স্ক্রিন রিডার রঙ নিয়ে চিন্তা করে না — এটি ফলাফল নিয়ে চিন্তা করে।

সংক্ষিপ্ততা — সর্বোত্তম দৈর্ঘ্য 2–4 শব্দ (80টি অক্ষর পর্যন্ত)। দীর্ঘ বিবরণ নেভিগেশন ধীর করে: VoiceOver ক্রমান্বয়ে পড়ে, প্রতিটি শব্দ ব্যবহারকারীর সময়ের এক সেকেন্ড। Apple WWDC 2023, «Accessibility by Design» অনুসারে, ৫ সেকেন্ডের বেশি পড়ার বাক্যাংশ জ্ঞানীয় প্রবাহকে বাধাগ্রস্ত করে।

অনন্যতা — একই স্ক্রিনে একই বিবরণ সহ দুটি উপাদান থাকা উচিত নয়। ব্যবহারকারী পার্থক্য করতে পারবেন না যে প্রথম বনাম দ্বিতীয় উপাদানে ফোকাস করলে কী ফলাফল হবে। যদি একাধিক «কিনুন» বাটন থাকে, তবে একটি শনাক্তকারী যোগ করুন: «iPhone 15 কিনুন», «iPhone 15 Pro কিনুন»।

স্থানীয়করণ — Content Description অ্যাপ দ্বারা সমর্থিত সমস্ত ভাষায় অনুবাদ করা আবশ্যক। বিবরণে স্থানীয়করণ ত্রুটি App Store-এ Accessibility Review ব্যর্থ হওয়ার সাধারণ কারণগুলির মধ্যে একটি।

বিবরণের দৈর্ঘ্য: গবেষণা

Nielsen Norman Group, 2024-এর গবেষণা দেখিয়েছে যে স্ক্রিন রিডারের জন্য সর্বোত্তম বিবরণ দৈর্ঘ্য 3–5 শব্দ (50টি অক্ষর পর্যন্ত)। দীর্ঘ বিবরণ নেভিগেশনের গতি 30% কমিয়ে দেয়, কারণ ব্যবহারকারীকে পরবর্তী ধাপের আগে ঘোষণা শেষ হওয়ার জন্য অপেক্ষা করতে হয়।

ব্যবহার করার সময় সাধারণ ভুল

অতিরিক্ততা — বিবরণ দৃশ্যমান টেক্সটের নকল করে। যদি একটি বাটনে «পাঠান» টেক্সট থাকে, তবে accessibilityHint = «পাঠান বাটন» সেট করবেন না। VoiceOver স্বয়ংক্রিয়ভাবে টেক্সট পড়বে, এবং hint অপ্রয়োজনীয় শব্দ যোগ করবে।

Label-এর সাথে বিভ্রান্তি — টেক্সট বাটনের জন্য লেবেলের পরিবর্তে contentDescription ব্যবহার করা। iOS-এ, accessibilityLabel বাটনের টেক্সটের সাথে মেলে (অথবা খালি হতে হবে যদি টেক্সট ইতিমধ্যে দৃশ্যমান হয়), এবং hint শুধুমাত্র কর্মটি স্পষ্ট করা উচিত। Google Testing Blog, 2024 অনুসারে, Play Store-এ পর্যালোচিত 23% অ্যাপে ডুপ্লিকেট বিবরণ রয়েছে।

গতিশীলতা উপেক্ষা করা — অবস্থা পরিবর্তন হলে বিবরণ আপডেট হয় না। উদাহরণস্বরূপ, একটি «Wi-Fi» টগলের বিবরণ চালু করার পরেও «Wi-Fi সক্ষম করুন» থাকে। সঠিক পদ্ধতি: অবস্থা পর্যবেক্ষণ করে বিবরণ গতিশীলভাবে «Wi-Fi নিষ্ক্রিয় করুন»-এ পরিবর্তন করা।

রেন্ডার চক্র এবং রিগ্রেশন

ডিজাইন আপডেটের (আইকন পরিবর্তন, উপাদান পুনর্বিন্যাস) পরে, Content Description প্রায়শই হারিয়ে যায়। কারণ: ডিজাইনার ছবি পরিবর্তন করে, ডেভেলপার নতুন অ্যাসেটের অ্যাক্সেসিবিলিটি প্রপার্টি পরীক্ষা করে না। সমাধান: কোড রিভিউতে অ্যাক্সেসিবিলিটি পরীক্ষাকে বাধ্যতামূলক পদক্ষেপ করুন — একটি চেকলিস্ট আইটেম যোগ করুন: «Content Description আপডেট করা হয়েছে?»

Content Description কীভাবে পরীক্ষা করবেন

• iOS-এ: Xcode → Accessibility Inspector — উপাদান নির্বাচন করুন, Label এবং Hint ফিল্ড পরীক্ষা করুন
• Android-এ: Play Store থেকে Accessibility Scanner ইন্সটল করুন — আপনার স্ক্রিনে চালান
• উভয় প্ল্যাটফর্মে: VoiceOver/TalkBack চালু করুন এবং জেসচার দিয়ে পুরো স্ক্রিন নেভিগেট করুন
• একটি UI টেস্ট লিখুন যা সমস্ত ImageView-এর জন্য contentDescription পরীক্ষা করে

iOS-এর জন্য UI টেস্ট উদাহরণ

func testContentDescriptionExists() {
    let app = XCUIApplication()
    app.launch()
    let image = app.images["chart-sales"]
    XCTAssertNotNil(image.label)
    XCTAssertGreaterThan(image.label.count, 0)
}