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 پر انحصار کرتا ہے۔ اگر شاپنگ کارٹ آئیکن میں وضاحت نہیں ہے تو وہ صرف «بٹن» سنتا ہے۔ یہ جاننے کے لیے کہ بٹن کیا کرتا ہے، اسے آنکھ بند کر کے دبانا پڑتا ہے — ایک ناقابل واپسی کارروائی کا خطرہ۔ «کارٹ سے آئٹم ہٹائیں» جیسی وضاحت ایک سیکنڈ میں اس مسئلے کو حل کرتی ہے۔

عارضی حدود والا صارف (باہر تیز دھوپ، ٹوٹی اسکرین) بھی 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 بٹن کے اندر ہے تو 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» کے مطابق، 5 سیکنڈ سے زیادہ پڑھنے والا فقرہ علمی بہاؤ میں خلل ڈالتا ہے۔

انفرادیت — ایک ہی اسکرین پر ایک جیسی وضاحت والے دو عناصر نہیں ہونے چاہئیں۔ صارف یہ فرق نہیں کر پائے گا کہ پہلے بمقابلہ دوسرے عنصر پر فوکس کرنے سے کیا نتیجہ نکلے گا۔ اگر متعدد «خریدیں» بٹن ہیں تو ایک شناخت کنندہ شامل کریں: «iPhone 15 خریدیں»، «iPhone 15 Pro خریدیں»۔

مقامی کاری — Content Description کا ایپ کے تمام معاون زبانوں میں ترجمہ ہونا چاہیے۔ وضاحتوں میں مقامی کاری کی غلطی ایپ اسٹور میں 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)
}