Accessibility Label — یہ کیا ہے، بنیادی باتیں اور iOS اور Android کے لیے کیسے استعمال کریں

Accessibility Label کیا ہے

Accessibility Label ایک سٹرنگ پراپرٹی ہے جو معاون ٹیکنالاجیز کے لیے ایلیمنٹ کا نام تعریف کرتی ہے۔ جب صارف VoiceOver چالو ہونے پر سکرین پر انگلی پھیراتا ہے، سکرین ریڈر فوکسشدہ ایلیمنٹ کا Label پڒھتا ہے۔ لیبل کے بغیر، صارف صرف ایلیمنٹ کی قسم سنتا ہے: «بٹن»، «تصویر» — بغیر مقصد کے بتائے۔

Google I/O 2024, «Accessibility Testing» کے مطابق، سٹور ایپلیکیشنز میں 35% تنقیدی رسائی خلاف ورزیاں لیبل کی غیرموجودگی یا غلطی سے متعلق ہیں۔ Android پر Accessibility Scanner لیبل کی غیرموجودگی کو سب سے شدید غلطی کے طور پر پتا لگاتا ہے۔

ایک بنیادی حد: لیبل میں ایلیمنٹ کی قسم نہیں ہونی چاہیے۔ VoiceOver اور TalkBack خودکار ایلان میں کردار (بٹن، ہیڈر، لنک) شامل کرتے ہیں۔ اگر لیبل میں «بھیجیں بٹن» ہے، تو صارف سنے گا: «بھیجیں بٹن، بٹن» — تکرار۔

Label اور WCAG 4.1.2: نام، کردار، قیمت

WCAG 4.1.2 (سطح A) کو درکار ہے کہ ہر صارف انٹرفیس ایلیمنٹ کا پروگرامیٹکلی قابل تعین نام، کردار اور قیمت ہو۔ Accessibility 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 والے ایلیمنٹ پر لے جائے گا۔ لهذا، Label میں وہ کلیچہ لفظ ہونے چاہیں جنہیں صارف تلاش کرے گا۔

CI/CD پائپ لائن میں انضمام

پائپ لائن میں Label جانچ شامل کریں۔ iOS پر، fastlane scan کے ساتھ XCUITest استعمال کریں۔ Android پر، خالی contentDescription کا پتا لگانے والے AccessibilityCheckRule کے ساتھ Accessibility Test Framework استعمال کریں۔ یہ نئی سکرینز کو مرج کرتے وقت تنزل کو روکتا ہے۔