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 में यह स्वचालित है, लेकिन कस्टम फ़ील्ड के लिए — accessibiltyValue को ओवरराइड करके मैनुअली। सत्यापित करें कि 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 वाले एलिमेंट पर ले जाएगा। इसलिए, Label में मुख्य शब्द होने चाहिए जिन्हें उपयोगकर्ता खोजेगा।

CI/CD पाइपलाइन में एकीकरण

पाइपलाइन में Label जांच जोड़ें। iOS पर, fastlane scan के साथ XCUITest का उपयोग करें। Android पर, Accessibility Test Framework का उपयोग AccessibilityCheckRule के साथ करें जो खाली contentDescription का पता लगाता है। यह नए स्क्रीन मर्ज करते समय प्रतिक्रमणों को रोकता है।