Accessibility Label — ما هو، الأساسيات وكيفية الاستخدام لـ iOS و Android

ما هو Accessibility Label

Accessibility Label هي خاصية نصية تحدد اسم العنصر لتقنيات المساعدة. عندما يمرر المستخدم إصبعه عبر الشاشة مع تفعيل VoiceOver، يقرأ قارئ الشاشة تسمية العنصر المركز. بدون تسمية، يسمع المستخدم فقط نوع العنصر: «زر»، «صورة» — دون تحديد الغرض.

وفقًا لـ Google I/O 2024، «Accessibility Testing»، 35% من انتهاكات إمكانية الوصول الحرجة في تطبيقات المتاجر ترتبط بعدم وجود أو عدم صحة التسميات. يكتشف Accessibility Scanner على Android عدم وجود التسمية كخطأ ذي أعلى درجة خطورة.

قيد أساسي: لا يجب أن تحتوي التسمية على نوع العنصر. يضيف VoiceOver و TalkBack تلقائيًا الدور (زر، رأس، رابط) إلى الإعلان. إذا احتوت التسمية على «زر إرسال»، سيسمع المستخدم: «زر إرسال، زر» — تكرار.

Label و WCAG 4.1.2: الاسم والدور والقيمة

يتطلب WCAG 4.1.2 (المستوى A) أن يكون لكل عنصر في واجهة المستخدم اسم ودور وقيمة قابلة للتحديد برمجيًا. يوفر Accessibility Label الاسم. إذا كانت التسمية مفقودة، يعتبر المعيار منتهكًا، ولا يجتاز التطبيق الشهادة الأساسية.

iOS: خاصية accessibilityLabel

في iOS، accessibilityLabel يورث جميع UIView من بروتوكول UIAccessibility. إذا كان العنصر يحتوي على نص (UIButton بعنوان، UILabel بنص)، تتم تعيين التسمية تلقائيًا لذلك النص. بالنسبة لـ UIImageView والعناصر المخصصة والحاويات، يجب تعيين التسمية يدويًا.

مثال لخلية جدول مخصصة:

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 يوصي: إذا كان العنصر يتكون من عدة عناصر فرعية (على سبيل المثال، بطاقة منتج باسم وسعر)، قم بدمجها في عنصر إمكانية واحد بتسمية مركبة. ضبط isAccessibilityElement = true على العنصر الأصلي و false على الأبناء.

NSAttributedString و accessibilityLabel

إذا كان UILabel يستخدم NSAttributedString، فإن accessibilityLabel الافتراضي يساوي .string (نص عادي). إذا كنت تحتاج إلى تمرير قيمة مختلفة دلاليًا (على سبيل المثال، أيقونة رمز تقرأ كـ «نجمة» بدلاً من الرمز ★)، ضبط accessibilityLabel صراحةً. VoiceOver لا يقرأ رموز Unicode بصورة ذات معنى.

Android: Label عبر contentDescription

في Android، contentDescription تؤدي وظيفة Label لـ ImageView و ImageButton والعناصر المخصصة. بالنسبة لـ 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، تتم تعيين التسمية عبر محور semantics:

Image(
    painter = painterResource(R.drawable.ic_search),
    contentDescription = "بحث عن منتجات",
    modifier = Modifier.semantics {
        contentDescription = "بحث عن منتجات"
    }
)

في Compose، contentDescription هو معلم إجباري لـ Image — بدونه لن يتم تجميع الكود (تحذير). هذا يحسن إمكانية الوصول إجباريًا من خلال تصميم API.

Label و Hint: اختلاف الأدوار

Accessibility Label يجيب على السؤال «ما هذا العنصر؟». Hint (accessibilityHint في iOS، نص إضافي في contentDescription في Android) — «ماذا سيحدث عند التفاعل؟». VoiceOver ينطقهما تسلسليًا: أولاً Label، ثم Hint.

مثال لـ زر الحذف:

• Label: «حذف»
• Hint: «يحذف الصورة المحددة بشكل نهائي»
• VoiceOver: «حذف. يحذف الصورة المحددة بشكل نهائي»

وفقًا لـ Deque University, 2024، الفصل الصحيح بين Label و Hint يحسن معدل إكمال المهام لمستخدمي VoiceOver بنسبة 28%. المستخدمون ذوو الإعاقات المعرفية يعتمدون بشكل خاص على Hint: عند عدم اليقين بشأن ضغط «حذف» دون شرح، 40% يرفضون الإجراء.

عندما لا يكون Hint مطلوبًا

• عنصر بإجراء مفهوم بشكل حدسي («رجوع»، «إغلاق» — Label كافي)
• Label يصف النتيجة بالفعل («إرسال رسالة» — فعل في الاسم نفسه)
• عناصر النظام (UISwitch، UIButton بنوع نظامي) — سلوكها قياسي

أخطاء شائعة: Label بدلاً من Hint

خطأ شائع: كتابة «زر حذف» في Label بدلاً من «حذف». نوع العنصر (زر) يضاف تلقائيًا عبر VoiceOver من خلال سمة. نتيجة ذلك، يسمع المستخدم: «زر حذف، زر» — تكرار. Label الصحيح: «حذف»، Hint: «يحذف الصورة المحددة».

الترجمة وأفضل الممارسات

ترجمة التسميات إجبارية — تتم عبر الآليات القياسية: NSLocalizedString في iOS، موارد السلسلة @string/ في Android. لا تقم أبدًا بتعيين Label عن طريق الستر باللغة الإنجليزية دون ترجمة.

قواعد Label الجيد، استنادًا إلى W3C WCAG 2.2:

• ابدأ بالكلمة المفتاحية — «بحث عن منتجات»، ليس «حقل لبحث عن منتجات»
• لا تضمن كلمات «زر»، «حقل»، «صورة» — يتم إضافة الدور تلقائيًا
• استخدم لغة طبيعية مفهومة للجمهور المستهدف
• تجنب الاختصارات (باستثناء المقبولة عامًا: «قطعة»، «كجم») — قارئ الشاشة يقرأها حرفيًا
• لعناصر الإدخال، أضف مثالًا: «البريد الإلكتروني (مثال@نطاق.كوم)»

اتساق Label على مستوى العلامة التجارية

استخدم قاموسًا موحدًا للتسميات في جميع أنحاء التطبيق. إذا كتب على شاشة واحدة «المفضلة» وعلى أخرى «العلامات»، فإن المستخدم يرتبك. أنشئ جدول مصطلحات إمكانية الوصول — تنسق مع المصممين والمترجمين.

Label لعناصر النماذج

لـ حقول الإدخال (UITextField، EditText)، يجب أن تتطابق Label مع نص الناظر أو تسمية الحقل. ولكن الناظر غالبًا ما يختفي بعد إدخال النص. استخدم accessibilityLabel للاسم الدائم و accessibilityValue لمحتوى الحقل الحالي — هذا هو معيار WCAG 4.1.2. الحل: ضبط accessibilityLabel ثابتًا (يساوي تسمية الحقل)، و accessibilityValue ديناميكيًا (يساوي النص المدخل). في iOS هذا تلقائي، ولكن للحقول المخصصة — يدويًا عن طريق إعادة تعريف accessibilityValue. تحقق من أن VoiceOver يقرأ: «البريد الإلكتروني، مثال@نطاق.كوم، حقل نص» بدلاً من «، حقل نص».

كيفية اختبار تسميات إمكانية الوصول

الاختبار الآلي هو الطريقة الوحيدة لضمان صحة Label على جميع الشاشات. يوفر iOS XCUIApplication مع إتاحة .label، و 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,
        "تم العثور على تسميات مكررة")
}

مثال لـ Android مع Espresso:

@Test
fun testButtonHasAccessibilityLabel() {
    onView(withId(R.id.btnSubmit))
        .check(matches(
            withContentDescription(containsString("إرسال"))
        ))
}

الاختبار اليدوي: قم بتفعيل VoiceOver (iOS) أو TalkBack (Android) واسحب لليمين عبر جميع عناصر الشاشة. يجب أن يتلقى كل عنصر إعلانًا ذا معنى. إذا سمعت فقط «زر» أو «صورة» — فالتسمية مفقودة.

الدوار VoiceOver والتنقل السريع

بعد تكوين Label، يمكن لمستخدمي VoiceOver استخدام الدوار للتنقل السريع: أوضاع «الأزرار»، «العناوين»، «الروابط» وغيرها. إذا كانت Label مضبوطة بشكل صحيح، يقوم VoiceOver بضم العنصر إلى وضع الدوار المناسب. تحقق من أن جميع الأزرار ظاهرة في وضع «الأزرار» وجميع العناوين في «العناوين».

تؤثر Label أيضًا على بحث VoiceOver. يمكن للمستخدم كتابة كلمة في وضع البحث، وسينقل VoiceOver التركيز إلى العنصر ذو Label المطابقة. لذا، يجب أن تحتوي Label على كلمات مفتاحية سيبحث عنها المستخدم.

التكامل مع خط أنابيب CI/CD

أضف فحص Label إلى خط أنابيب التطوير. على iOS، استخدم XCUITest مع fastlane scan. على Android، استخدم Accessibility Test Framework مع قاعدة AccessibilityCheckRule التي تكتشف contentDescription الفارغ. هذا يمنع الانتكاسات عند دمج شاشات جديدة.