Accessibility Trait: সারমর্ম, প্রকার এবং ডেভেলপমেন্টে এটি কীভাবে কাজ করে

Accessibility Trait কী

Accessibility Trait হল একটি UIView উপাদানে সেট করা ফ্ল্যাগ যা VoiceOver-কে এর শব্দার্থিক ভূমিকা নির্দেশ করে। ট্রেইট হল Apple-এর অ্যাক্সেসিবিলিটি ত্রয়ীর তিনটি উপাদানের একটি: Label (নাম), Hint (বিবরণ), Trait (ভূমিকা)। iOS UIAccessibilityTraits বিটমাস্ক (UInt64) ব্যবহার করে, যেখানে প্রতিটি বিট একটি নির্দিষ্ট ভূমিকার সাথে মিলে যায়। VoiceOver Label এবং Hint-এর পরে ভূমিকা পড়ে: «সাবমিট বাটন। একটি ফর্ম খুলবে» — UIAccessibilityTraitButton ট্রেইটের জন্য «বাটন» যুক্ত হয়েছে।

ডিফল্টভাবে, UIButton UIAccessibilityTraitButton পায়, UILabel UIAccessibilityTraitStaticText পায়, UIImageView UIAccessibilityTraitImage পায়। কাস্টম কন্ট্রোল ব্যবহার করার সময়, ডেভেলপারকে ম্যানুয়ালি ট্রেইট সেট করতে হয়। Apple Human Interface Guidelines, 2024, একে «অ্যাক্সেসিবিলিটি নিশ্চিত করার সবচেয়ে গুরুত্বপূর্ণ পদক্ষেপগুলির মধ্যে একটি» বলে।

সঠিক ট্রেইট ছাড়া, ব্যবহারকারী জানতে পারে না কোন জেসচার প্রয়োগ করতে হবে: সিঙ্গেল ট্যাপ (বাটন সক্রিয়করণ), ডাবল ট্যাপ (জুম) বা সোয়াইপ জেসচার (টগল)। ট্রেইট নির্ধারণ করে যে VoiceOver-এর কোন জেসচার উপাদানটিতে সক্রিয় হয়।

UIAccessibilityTraits-এর প্রযুক্তিগত বাস্তবায়ন

UIAccessibilityTraits হল একটি typealias UInt64। প্রতিটি ট্রেইট একটি কনস্ট্যান্ট যেখানে ঠিক একটি বিট সেট থাকে। উদাহরণস্বরূপ, UIAccessibilityTraitButton = 0x0000000000000001, UIAccessibilityTraitLink = 0x0000000000000002, UIAccessibilityTraitHeader = 0x0000000000000008। বিটওয়াইজ OR-এর মাধ্যমে সংমিশ্রণ অর্জিত হয়: 0x0001 | 0x0008 = 0x0009। VoiceOver মাস্ক বিশ্লেষণ করে এবং আচরণ নির্ধারণ করে।

iOS ট্রেইটের প্রধান প্রকার

iOS 15টিরও বেশি ট্রেইট কনস্ট্যান্ট প্রদান করে। আসুন 90% দৃশ্যকল্পে ব্যবহৃত প্রধান ট্রেইটগুলি দেখি:

কনস্ট্যান্টগুলি iOS 3.0 থেকে UIKit-এ উপলব্ধ। iOS 14+ .accessibilityAddTraits() মডিফায়ারের মাধ্যমে SwiftUI-তে UIAccessibilityTraits সমর্থন যুক্ত করেছে।

বিরল কিন্তু দরকারী ট্রেইট

UIAccessibilityTraitAdjustable — সামঞ্জস্যযোগ্য মানের জন্য (স্লাইডার, পিকার, ভলিউম স্লাইডার)। VoiceOver accessibilityIncrement এবং accessibilityDecrement-এর মাধ্যমে নির্ধারিত ধাপে মান পরিবর্তন করতে উপরে/নিচে সোয়াইপ করার অনুমতি দেয়। UIAccessibilityTraitUpdatesFrequently — ঘন ঘন পরিবর্তনশীল মানের উপাদানের জন্য (টাইমার, প্রগতি নির্দেশক)। VoiceOver প্রতিটি পরিবর্তনে মান পড়ে না বরং একটি বিরতি নেয়। UIAccessibilityTraitAllowsDirectInteraction — যে উপাদানগুলির সাথে ব্যবহারকারী সরাসরি ইন্টারঅ্যাক্ট করতে পারে (কীবোর্ড, আঁকা), VoiceOver জেসচার এড়িয়ে।

ট্রেইট একত্রিতকরণ

একটি একক উপাদানে একসঙ্গে একাধিক ট্রেইট থাকতে পারে — বিটওয়াইজ OR (|) ব্যবহার করে সংমিশ্রণ সেট করা হয়। উদাহরণ: একটি বাটন যা বর্তমানে নির্বাচিত — Button | Selected। VoiceOver ঘোষণা করবে: «নির্বাচিত। দাম অনুযায়ী ফিল্টার করা হয়েছে। বাটন।»

কোডে ট্রেইট সেট করা:

filterButton.accessibilityTraits.insert(.button)
filterButton.accessibilityTraits.insert(.selected)

// অথবা মাস্কের মাধ্যমে:
filterButton.accessibilityTraits = [.button, .selected]

কাস্টম UIView-এর জন্য যেখানে ট্রেইট ডিফল্টভাবে সেট নেই:

class CustomToggle: UIControl {
    override var accessibilityTraits: UIAccessibilityTraits {
        get {
            if isOn {
                return [.button, .selected]
            } else {
                return .button
            }
        }
        set {}
    }
}

একত্রিতকরণ নিয়ম: প্রতি উপাদানে 3-4 ট্রেইটের বেশি নয়। অতিরিক্ত ট্রেইট (যেমন Button + Link + Header) VoiceOver ঘোষণাকে খুব দীর্ঘ এবং বিভ্রান্তিকর করে তোলে। Apple-এর মতে, «প্রতিটি অতিরিক্ত বৈশিষ্ট্য ব্যবহারকারীর জ্ঞানীয় বোঝা বাড়ায়»।

SwiftUI: ট্রেইট মডিফায়ার

SwiftUI-তে, ট্রেইটগুলি .accessibilityAddTraits() এবং .accessibilityRemoveTraits() মডিফায়ারের মাধ্যমে সেট করা হয়। উদাহরণ: Text(«শিরোনাম»).font(.largeTitle).accessibilityAddTraits(.isHeader)। .isHeader মডিফায়ার UIAccessibilityTraitHeader যোগ করে। SwiftUI ট্রেইট তালিকা: .isButton, .isHeader, .isLink, .isSelected, .isImage, .isSearchField, .isKeyboardKey, .isStaticText, .isSummaryElement, .isToggle, .playsSound, .startsMediaSession, .updatesFrequently, .allowsDirectInteraction, .causesPageTurn, .isModal, .tabBar।

ট্রেইট নির্বাচনে সাধারণ ভুল

বাটনের পরিবর্তে StaticText — একটি কাস্টম কন্ট্রোল যা দেখতে বাটনের মতো ডিফল্টভাবে StaticText ট্রেইট পায়। VoiceOver কোনো সক্রিয়করণ জেসচার প্রদান করে না, তাই ব্যবহারকারী উপাদানটি «চাপতে» পারে না। সমাধান: স্পষ্টভাবে .button সেট করুন।

ট্রেইট ছাড়া ছবি — অ্যাক্সেসিবিলিটি সক্ষম UIImageView Image ট্রেইট পায়, এমনকি যদি এটি আসলে ফটো বড় করার বাটন হয়। .button এবং Label «ফটো বড় করুন» নির্ধারণ করুন। WWDC 2023, «Deliver an Exceptional Accessibility Experience» অনুসারে, নতুন অ্যাপ সংস্করণে 40% অ্যাক্সেসিবিলিটি রিগ্রেশন ট্রেইট অমিলের কারণে ঘটে।

প্রত্যেক উপাদানে Header — Header ট্রেইট স্ক্রিনের কাঠামোগত হেডারের জন্য। যদি প্রতিটি UILabel-কে হেডার বানানো হয়, VoiceOver রোটার «হেডার» মোডে অকেজো হয়ে যায় — এটি প্রতিটি শব্দে থামবে।

কীভাবে ঠিক করবেন: চেকলিস্ট

• প্রত্যেক ইন্টারঅ্যাকটিভ কাস্টম উপাদান Button, Link বা Adjustable ট্রেইট পায়
• সেকশন হেডারগুলি Header ট্রেইট পায় (StaticText নয়)
• ইমেজ বাটনগুলি নির্বাচিত অবস্থায় Button + Selected ট্রেইট পায়
• জেসচার ছাড়া উপাদান — StaticText বা Image (শুধুমাত্র পড়া)

UIButton-কে UIControl-এ পরিবর্তন করার সময় রিগ্রেশন বাগ

ট্রেইট হারানোর একটি সাধারণ কারণ হল রিফ্যাক্টরিং: ডেভেলপার কাস্টম ডিসপ্লের জন্য UIButton-কে UIControl-এ পরিবর্তন করে। UIButton স্বয়ংক্রিয়ভাবে Button ট্রেইট পায়, UIControl পায় না। রিফ্যাক্টরিংয়ের পরে, আপনাকে স্পষ্টভাবে accessibilityTraits = .button সেট করতে হবে। কোড রিভিউতে একটি চেক যোগ করুন: «যদি আপনি UIButton-কে UIControl-এ পরিবর্তন করেন — ট্রেইট চেক করুন»।

ট্রেইট এবং গতিশীল অবস্থা

পরিবর্তনশীল অবস্থার উপাদানের জন্য (যেমন লাইক বাটন), ট্রেইট গতিশীলভাবে পরিবর্তন হওয়া উচিত। «পছন্দ না করা» অবস্থায় — Button, «পছন্দ করা» অবস্থায় — Button + Selected + Image (যদি আইকন থাকে)। VoiceOver ঘোষণা পরিবর্তন করে: «পছন্দ করুন। বাটন।» বনাম «নির্বাচিত। পছন্দ করুন। বাটন।» Selected ট্রেইট অপর্যাপ্ত হলে অবস্থা জানাতে accessibilityValue ব্যবহার করুন। সাবস্ক্রাইব বাটন, পছন্দ, ফিল্টার এবং টগলের জন্য প্রাসঙ্গিক।

Android সমতুল্য: role এবং className

Android-এ, ট্রেইটের কোনো সরাসরি সমতুল্য নেই। বিটমাস্কের পরিবর্তে, নিম্নলিখিতগুলি ব্যবহার করা হয়:

• className — AccessibilityNodeInfo.className-এর মান (android.widget.Button, android.widget.TextView)
• role — একটি XML অ্যাট্রিবিউট (ভূমিকা View-এর প্রকার দ্বারা নির্ধারিত হয়)
• stateDescription — Selected-এর সমতুল্য: অবস্থার বিবরণ যোগ করা (সক্ষম/অক্ষম)

Android-এ কাস্টম View-এর জন্য, আপনাকে onInitializeAccessibilityNodeInfo ওভাররাইড করতে হবে:

class CustomButton @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null
) : View(context, attrs) {

    override fun onInitializeAccessibilityNodeInfo(
        info: AccessibilityNodeInfo
    ) {
        super.onInitializeAccessibilityNodeInfo(info)
        info.className = "android.widget.Button"
        info.isClickable = true
    }
}

Flutter ডেভেলপারদের Semantics উইজেটে semanticsRole প্যারামিটার ব্যবহার করা উচিত: button, header, image, link, textField এবং অন্যান্য। অতিরিক্তভাবে, semanticsLabel এবং semanticsHint উপলব্ধ — iOS ত্রয়ী Label + Hint + Trait-এর সম্পূর্ণ সমতুল্য।

ওয়েব সমতুল্য: WAI-ARIA role

মোবাইল অ্যাপের ওয়েব সংস্করণের জন্য (PWA, WebView), WAI-ARIA থেকে role অ্যাট্রিবিউট ব্যবহার করা হয়: role="button", role="heading", role="link"। এটি accessibilityTraits-এর সরাসরি সমতুল্য। হাইব্রিড অ্যাপে, যাচাই করুন যে WebView ARIA ভূমিকাগুলি নেটিভ অ্যাক্সেসিবিলিটি লেয়ারে পাঠায়। এর জন্য, iOS-এ UIAccessibilityContainerDataTable প্রোটোকল বা Android-এ setAccessibilityDelegate ব্যবহার করুন। JavaScript সক্ষম WebView ARIA ভূমিকাগুলি সঠিকভাবে নাও পাঠাতে পারে — আলাদাভাবে পরীক্ষা করুন।

AccessibilityNodeInfo: অতিরিক্ত ক্রিয়া

Android-এ, আপনি AccessibilityNodeInfo-তে কাস্টম ক্রিয়া যোগ করতে পারেন: AccessibilityNodeInfo.AccessibilityAction.ACTION_CLICK এবং ACTION_LONG_CLICK। এটি অতিরিক্ত জেসচার সহ Button ট্রেইটের সমতুল্য। স্লাইডারের জন্য, ACTION_SET_PROGRESS ব্যবহার করুন — Adjustable-এর সমতুল্য। Spinner এবং DatePicker-এর জন্য — ACTION_SET_SELECTION, ACTION_SET_DATE এবং ACTION_SET_TIME।

ট্রেইট পরীক্ষা এবং যাচাইকরণ

Xcode Accessibility Inspector iOS-এর জন্য প্রাথমিক টুল: একটি উপাদান নির্বাচন করুন এবং Traits ফিল্ড দেখুন। এটি সেট করা ট্রেইটের তালিকা দেখাবে। «উপাদান» মোড সহ VoiceOver রোটার স্ক্রিনের সমস্ত কন্ট্রোলে নেভিগেট করার অনুমতি দেয়।

ট্রেইট পরীক্ষার জন্য স্বয়ংক্রিয় Swift টেস্ট:

func testSubmitButtonTrait() {
    let app = XCUIApplication()
    app.launch()
    let submitButton = app.buttons["জমা দিন"]
    XCTAssertTrue(submitButton.isEnabled)
    // XCUIElement ট্রেইটগুলিতে সরাসরি অ্যাক্সেস প্রদান করে না
    // জেসচার সক্রিয়করণের মাধ্যমে যাচাইকরণ
    submitButton.tap()
    XCTAssertTrue(app.staticTexts["ফর্ম জমা দেওয়া হয়েছে"].exists)
}

VoiceOver-এর মাধ্যমে ম্যানুয়াল যাচাইকরণ: VoiceOver চালু করুন, উপাদানে সোয়াইপ করুন, ডাবল-ট্যাপ করুন — এটি বাটন হলে উপাদানটি সক্রিয় হওয়া উচিত। যদি উপাদানটি ডাবল-ট্যাপে সাড়া না দেয়, ট্রেইট ভুল। মোডের মধ্যে স্যুইচ করতে Rotor জেসচার ব্যবহার করুন («হেডার», «লিংক», «বাটন») — প্রতিটি মোড শুধুমাত্র সংশ্লিষ্ট ট্রেইটযুক্ত উপাদান দেখাবে।

iOS-এ ট্রেইটের ইউনিট টেস্টিং

iOS 14-এর আগে, ইউনিট টেস্টের accessibilityTraits-এ সরাসরি অ্যাক্সেস ছিল না। iOS 14 থেকে শুরু করে, বৈশিষ্ট্যটি উপলব্ধ: XCTAssertEqual(customButton.accessibilityTraits, .button)। কাস্টম কন্ট্রোল যাচাই করতে ইউনিট টেস্টে এটি ব্যবহার করুন। প্রতিটি নতুন কাস্টম UIView-এর সঠিক ট্রেইটের জন্য পরীক্ষা করার পরামর্শ দেওয়া হয়, বিশেষ করে রিফ্যাক্টরিং বা প্যারেন্ট ক্লাস পরিবর্তনের পরে।