ReactNative/accessibility

سهولة الوصول (Accessibility)

يوفّر كل من نظامي التشغيل iOS وAndroid عروض برمجيّة لجعل التطبيقات متاحةً للأشخاص ذوي الإعاقات. إضافةً إلى أنّ النظامين كليهما يوفّران تقنيات مساعدة (assistive technologies)، مثل قارئَي الشّاشة VoiceOver (في iOS) وTalkBack (في Android) لضِعاف البصر. وبالمثل، يحتوي إطار React Native على عروض برمجيّة مُصمّمة لتزويد المطورين بأدواتٍ تُساعد على تسهيل الوصول إلى التطبيقات. لاحظ أن نظامي iOS و Android يختلفان اختلافًا طفيفًا في طريقة العمل، وبالتالي فقد تختلف طريقة العمل كذلك في React Native حسب المنصّة.

خاصيات سهولة الوصول

‎accessible‎ (في iOS وAndroid)

عندما تكون قيمتُها القيمةَ ‎true‎، فذلك يشير إلى أنّ العرض (view) هي عنصرُ سهولةِ وصولٍ. وعندها سيُجمّع أبناءه في مكونٍ واحد قابل للتحديد. افتراضيًّا، يمكن الوصول إلى جميع العناصر القابلة للمس (touchable elements).

على Android، ستُترجَم خاصيّة ‎accessible={true}‎ على عرضِ ‎View‎ إلى الخاصيّة الأصيلة ‎focusable={true}‎.

<View accessible={true}>
  <Text>text one</Text>
  <Text>text two</Text>
</View>

في المثال أعلاه، لا يمكننا الحصول على تركيزِ سهولة وصولٍ بشكل منفصلٍ لكلّ من "text one" و "text two". ونحصل بدلاً من ذلك على تركيزٍ على عرضٍ أبٍ يحمل الخاصية ‎accessible‎‎.

‎accessibilityLabel‎

عندما تعلَّم عرض على أنها عنصرُ سهولة وصولٍ، فسيُفيد تعيين خاصيّة ‎accessibilityLabel‎ لتُوفِّر تسميّةً للعرض، بحيث يعرف الأشخاص الذين يستخدمون VoiceOver العنصر الذي حدّدوه. إذ سيقرأ VoiceOver هذه السلسلة النّصيّة عندما يحدِّد المستخدم العنصر ذا الصّلة.

لاستخدام هذه الميّزة، عيّن الخاصية ‎accessibilityLabel‎ إلى سلسلةٍ نصيّةٍ مخصّصة على مكوّن ‎View‎، أو ‎Text‎، أو ‎أي مكوّن قابلٍ للمس:

<TouchableOpacity
  accessible={true}
  accessibilityLabel="Tap me!"
  onPress={onPress}>
  <View style={styles.button}>
    <Text style={styles.buttonText}>Press me!</Text>
  </View>
</TouchableOpacity>

في المثال أعلاه، ستكون القيمةُ الافتراضيّةُ لخاصيّة ‎accessibilityLabel‎ على المكوّن TouchableOpacity القيمةَ ‎"Press me!"‎. تُنشأ القيمةُ عبر تجميع جميع نصوص ‎Text‎ الأبناء مفصولة بمسافات.

‎accessibilityHint‎

يساعد تلميح سهولة الوصول (accessibility hint) المستخدمينَ على فهم ما سيحدث عند القيام بشيءٍ ما على عنصرٍ عندما لا تكون هذه النتيجة واضحةً من تسميّة سهولة الوصول (accessibility label).

لاستخدام هذه الميّزة، عيّن الخاصية ‎accessibilityHint‎ إلى سلسلةٍ نصيّةٍ مخصّصة على مكوّن ‎View‎، أو ‎Text‎، أو ‎أي مكوّن قابلٍ للمس:

<TouchableOpacity
  accessible={true}
  accessibilityLabel="رجوع"
  accessibilityHint="الانتقال إلى الشّاشة السّابقة"
  onPress={onPress}>
  <View style={styles.button}>
    <Text style={styles.buttonText}>Back</Text>
  </View>
</TouchableOpacity>

سلوك المثال أعلاه في منصّة iOS: سيقرأ VoiceOver التلميح بعد قراءة التسمية إذا كان المستخدم قد فعَّل التلميحات في إعدادات VoiceOver الخاصة بالجهاز. اقرأ المزيد حول ‎ accessibilityHint‎ على توثيق مطوري iOS.

سلوك المثال أعلاه في منصّة Android: سيقرأ Talkback التلميح بعد قراءة التسمية. لا يمكن في الوقت الحالي تعطيل التلميحات على Android.

‎accessibilityIgnoresInvertColors‎ (في iOS فقط)

عكس ألوان الشاشة ميزةُ سهولةِ وصولٍ تجعل شاشات iPhone و iPad أريَح للعينين للأشخاص ذوي حساسيةٍ تجاه السطوع، وسهلَة التمييز للأشخاص الذين يعانون من عمى الألوان وللأشخاص الذين يعانون من ضعف في الرؤية. لكن أحيانًا تحتاج إلى عرض عروضٍ مثل الصور دون عكس ألوانها. في هذه الحالة، يمكنك تعيين هذه الخاصيّة لتكون القيمةَ false كي لا تُعكَس ألوان هذه العروض المحددة.

accessibilityLiveRegion (في Android فقط)

نريد أن ينبه Talkbackالمستخدم النهائي عندما تتغير المكونات بشكلٍ ديناميكيّ، وهذا ممكن باستخدام الخاصية accessibilityLiveRegion. والتي تأخذ إحدى القيم noneأوpolite أوassertive

• none: لا تعلن خدمات سهولة الوصول عن التغييرات لهذه العرض.
• polite: يجب أن تعلن خدمات سهولة الوصول عن التغييرات لهذه العرض.
• assertive: يجب أن تقاطع خدمات سهولة الوصول الكلام الجاري للإعلان فورًا عن التغييرات التي تطرأ على هذه العرض.

<TouchableWithoutFeedback onPress={addOne}>
  <View style={styles.embedded}>
    <Text>Click me</Text>
  </View>
</TouchableWithoutFeedback>
<Text accessibilityLiveRegion="polite">
  Clicked {count} times
</Text>

‎في المثال أعلاه تغير الدالة addOne متحول الحالة countمباشرة عندما يضغط المستخدم TouchableWithoutFeedback، يقرأ TalkBack النص في العرض Text لأن الخاصية accessibilityLiveRegion="polite"

accessibilityRole‎

‎accessibilityRole ينقل الغرض من المكون إلى مستخدم التكنولوجيا المساعدة. وتأخذ إحدى القيم التالية:

• ‎adjustable: تستخدم عندما يكون العنصر قابلًا للتعديل (كشريط تمرير slider).
• alert: يستخدم عندما يحتوي العنصر على نص مهم ليقدَّم للمستخدم.
• ‎button‎: تجب معاملة العنصر كَزِرٍّ.
• checkbox: تستخدم عندما يكون العنصر مربع اختيار يمكن تحديده أو إلغاء اختياره أو وجود حالة اختيار مختلطة.
• combobox: يستخدم عندما يمثل العنصر مربع خيارات متعددة، مما يسمح للمستخدم بالاختيار من بين عدة خيارات.
• ‎header‎: تستخدم عندما يعمل العنصر كعنوانٍ لقسم من أقسام المحتوى (كعنوان شريط التنقل مثلًا).
• ‎image‎: تستخدم عندما يجب التعامل مع العنصر كصورةٍ. يمكن جمعها مع زر أو رابط مثلًا.
• ‎imagebutton‎: تستخدم عندما يجب التعامل مع العنصر على أنه زر، وهوَ صورة كذلك.
• ‎keyboardkey‎: تستخدم عندما يعمل العنصر كمفتاح لوحة مفاتيحٍ.
• ‎link‎: تستخدم عندما يجب معاملة العنصر كَرابطٍ.
• menu: يُستخدم عندما يكون المكون عبارة عن قائمة اختيارات.
• menubar: تُستخدم عندما يكون العنصر عبارة عن حاوية قوائم متعددة.
• menuitem: تستخدم لتمثيل عنصر داخل قائمة.
• none‎: لا دور للعنصر.
• progressbar: يستخدم لتمثيل مكون يشير إلى تقدم المهمة.
• radio: تستخدم لتمثيل زر اختيار.
• radiogroup: تستخدم لتمثيل مجموعة من أزرار الاختيار.
• scrollbar: تستخدم لتمثيل شريط التمرير.
• search: يُستخدم عندما يجب معاملة عنصر حقل النص كحقل بحث أيضًا.
• spinbutton: يستخدم لتمثيل زر يفتح قائمة خيارات.
• ‎summary‎: يمكن استخدام العنصر لتوفير ملخص سريع للظروف الحالية في التطبيق عند تشغيل التطبيق.
• switch: تستخدم لتمثيل مفتاح يمكن تشغيله وإيقافه.
• tab: تستخدم لتمثيل علامة تبويب.
• tablist: تستخدم لتمثيل قائمة من علامات التبويب.
• ‎text‎: يجب التعامل مع العنصر كنص ثابت لا يمكن تغييره.
• timer: تستخدم لتمثيل مؤقت.
• toolbar: يستخدم لتمثيل شريط الأدوات (حاوية أزرار إجراءات أو مكونات).

‎accessibilityStates‎

يصف الحالة الحالية للمكون لمستخدم التكنولوجيا المساعدة. وهي كائن يحوي الحقول التالية:

الاسم	الوصف	النمط	مطلوب
disabled	يشير إلى ما إذا كان العنصر معطلاً أم لا.	قيمة منطقية	لا
selected	يشير إلى ما إذا كان العنصر القابل للتحديد محددًا حاليًا أم لا.	قيمة منطقية	لا
checked	يشير إلى حالة العنصر القابل للفحص. يمكن أن يأخذ هذا الحقل قيمة منطقية أو سلسلة "مختلطة" لتمثيل مربعات اختيار مختلطة.	قيمة منطقية (boolean)	لا
busy	يحدد فيما إذا كان العنصر مشغولًا حاليًا أو لم.	قيمة منطقية (boolean) أو مختلطة	لا
expanded	يشير إلى ما إذا كان العنصر القابل للتوسع موسعًا حاليّا أو مطويًا.	قيمة منطقية (boolean)	لا

لاستخدام هذه الميّزة، عيّن الخاصية ‎accessibilityStates‎ إلى كائن بتعريف محدد

accessibilityValue

تمثل قيمة المكون الحالية، ويمكن أن تكون وصفًا نصيًّا لقيمته، أو معلومات المجالات في المكونات التي تعتمد المجالات كأشرطة التمرير أو التقدم (كالقيمة الحالية والحدود العليا والدنيا). وهي كائن يحوي الحقول التالية:

الاسم	الوصف	النمط	مطلوب
min	قيمة الحد الأدنى لمجال المكون	عدد (integer)	فقط عندما تحدد now
max	قيمة الحد الأعلى لمجال المكون	عدد (integer)	فقط عندما تحدد now
now	القيمة الحالية لمجال المكون	عدد (integer)	لا
text	وصف نصي لمجال المكون، وإضا تم تعيينه فسيتجاوز قيم min و max و now	سلسلة نصية (string)	لا

‎‎accessibilityViewIsModal‎ (في iOS فقط)

قيمة منطقيةٌ تشير إلى ما إذا كان يجب على VoiceOver تجاهل العناصر الموجودة في العروض الشّقيقة للمُستقبِل.

على سبيل المثال، في نافذةٍ تحتوي على عرضين شقيقين ‎A‎ و‎B‎، سيؤدي تعيين ‎accessibilityViewIsModal‎ إلى القيمة ‎true‎ على العرض ‎B‎ إلى تجاهل VoiceOver لعناصر العرض ‎A‎. من ناحية أخرى، إذا كان العرض ‎B‎ يحتوي على عرضٍ فرعيّ ‎C‎ وقمت بتعيين الخاصيّة ‎accessibilityViewIsModal‎ إلى القيمة ‎true‎ على العرض ‎C‎، فلن يتجاهل VoiceOver العناصر الموجودة في العرض ‎A‎.

‎accessibilityElementsHidden‎ (في iOS فقط)

قيمةٌ منطقيةٌ تشير إلى ما إذا كانت عناصر سهولة الوصول الموجودة داخل عنصرُ سهولة الوصول الحاليّ مخفيةً أو لا.

على سبيل المثال، في نافذةٍ تحتوي على عرضين شقيقين ‎A‎ و‎B‎، سيؤدي تعيين ‎accessibilityElementsHidden‎ إلى القيمة ‎true‎ على العرض ‎B‎ إلى تجاهل VoiceOver للعناصر في العرض ‎B‎. وهي مُشابهة للخاصيّة ‎importantForAccessibility="no-hide-descendants"‎ في Android.

‎importantForAccessibility‎ (في Android فقط)

في حالة تراكب مكونَين من مكوّنات عرض مستخدم يمتلكان نفس المكوّن الأب، يمكن أن يكون تركيز سهولة الوصول الافتراضي سلوكًا غير متوقع. ستحلّ خاصية ‎importantForAccessibility‎ هذه المشكلة عبر التحكم في ما إذا كان عرضٌ قادرًا على إطلاق أحداث سهولة الوصول وما إذا كانت هذه الأحداث ستُرسَل إلى خدمات سهولة الوصول. يمكن تعيين الخاصيّة إلى القيمة ‎auto‎، أو ‎yes‎، أو ‎no‎، أو ‎no-hide-descendants‎ (تُرغِم هذه القيمةُ الأخيرة خدماتِ سهولة الوصول على تجاهل المكوّن وكل أطفاله).

<View style={styles.container}>
  <View
    style={[styles.layout, { backgroundColor: 'green' }]}
    importantForAccessibility="yes">
    <Text>First layout</Text>
  </View>
  <View
    style={[styles.layout, { backgroundColor: 'yellow' }]}
    importantForAccessibility="no-hide-descendants">
    <Text>Second layout</Text>
  </View>
</View>

في المثال أعلاه، لن يظهر التخطيط الأصفر وأحفاده أبدًا لأداة TalkBack ولجميعِ خدمات سهولة الوصول الأخرى. لذلك يمكننا بسهولة استخدام طرق العرض المتداخلة ذات نفس المكوّن الأب دون إرباك أداة TalkBack.

onAccessibilityEscape (في iOS فقط)

استخدم هذه الخاصية لتعيين دالة مخصصة لاستدعائها عندما تنفَذ المستخدم الإيماءة "escape"، وهي إيماءة بإصبعين من الشكل Z (Z shaped)، يجب أن تعود هذه الدالة إلى الوراء بشكلٍ هرمي في واجهة المستخدم، وهذا يعني التحرك للأعلى أو للخلف في التسلسل الهرمي للتنقل أو رفض واجهة مستخدم مشروطة. إذا لم يحتو العنصر المحدد على دالة onAccessibilityEscape فسيحاول النظام اجتياز التسلسل الهرمي للعرض حتى يحصل على عرض يعمل أو سيشير إلى أنه غير قادر على إيجاده.

‎onAccessibilityTap‎

استخدم هذه الخاصية لتعيين دالّةٍ مخصصة لاستدعائها عندما يُنشِّط المُستخدم عنصرَ سهولةِ وصولٍ عبر النقر المزدوج (double tapping) عليه أثناء تحديده.

‎onMagicTap‎ (في iOS فقط)

استخدم هذه الخاصية لتعيين دالّةٍ مخصصة لاستدعائها عندما يؤدّي المُستخدم إيماءة نقرٍ سحريّ (magic tap) وهيَ نقرٌ مزدوجٌ بإصبعين اثنين. يجب أن تُنجِز دالّةُ النقر السحري أنسَبَ إجراءٍ يمكن للمستخدم إنجازه على المكوّن. في تطبيق الهاتف على جهاز iPhone، يُجيب النّقر السّحري على مكالمةٍ هاتفية أو يُنهي الاتصال الحالي. إذا لم يحتوِ العنصرُ المحدَّد على دالّة onMagicTap، فسينتقل النظام إلى أعلى تسلسل العروض الهرمي (view hierarchy) إلى أن يصِل إلى عرضٍ يحتوي على هذه الدّالة.

إجراءات سهولة الوصول

تسمح إجراءات سهولة الوصول للتقنية المساعدة باستدعاء إجراءات المكون برمجيًا، ولدعم الإجراءات يجب أن يقوم المكون بأمرين:

• تعريف الإجراءات التي يدعمها في الخاصية accessibilityActions.
• تنفيذ الدالة onAccessibilityAction للتعامل مع طلبات الإجراء.

يجب أن تحوي الخاصية accessibilityActionsقائمة من أغراض الإجراءات، يحوي كل غرض منها الحقول التالية:

الاسم	النمط	مطلوب
name	سلسلة نصية (string)	نعم
label	سلسلة نصية (string)	لا

يمكن أن تكون الإجراءات قياسية، كالضغط على زر أو ضبط شريط تمرير، أو إجراءات مخصصة لمكون محدّد كحذف رسالة بريد إلكتروني، والحقل name مطلوب لكلا النوعين، لكن الحقل label اختياري في الإجراءات القياسية.

عند إضافة الدعم للإجراءات القياسية يجب أن تكون للحقل name إحدى القيم التالية:

• 'magicTap' : (في iOS فقط) قام المستخدم بالنقر مرتين بإصبعه أثناء تركيز VoiceOver على المكون أو ضمنه.
• 'escape': (في iOS فقط) قام المستخدم بإيماءة إلغاء بإصبعين (يسار، يمين، يسار) أثناء تركيز VoiceOver على المكون أو ضمنه.
• 'activate': تفعيل المكون، يجب أن يؤدي هذا إلى تنفيذ نفس الإجراء عندما ينقر المستخدم على مكون ما أو يلمسه عندما لا يستخدم التقنية المساعدة، والذي ينشأ عندما ينقر مستخدم قارئ الشاشة مرتين على المكون.
• 'increment': تكبير مكون قابل للتعديل، في iOS ينشئ VoiceOver هذا الإجراء عندما يكون للمكون وظيفة 'adjustable' وقام المستخدم بالتركيز عليه والنقر لأعلى، وفي Android ينشئ TalkBack هذا الإجراء عندما يضع المستخدم تركيز سهولة الوصول على المكون ويضغط على زر رفع الصوت.
• 'decrement': تصغير مكون قابل للتعديل، في iOS ينشئ VoiceOver هذا الإجراء عندما يكون للمكون وظيفة 'adjustable' وقام المستخدم بالتركيز عليه والنقر لأسفل، وفي Android ينشئ TalkBack هذا الإجراء عندما يضع المستخدم تركيز سهولة الوصول على المكون ويضغط على زر خفض الصوت.
• 'longpress' (في Android فقط) ينشَأ هذا الإجراء عندما يركز المستخدم سهولة الوصول على المكون وينقر مرتين ويبقي إصبعًا واحدًا على الشاشة، يجب أن يؤدي هذا إلى تنفيذ نفس الإجراء عندما يستمر المستخدم بالضغط بإصبع واحد على المكون عندما لا يستخدم التقنية المساعدة.

الحقل label اختياري في الإجراءات القياسية، ولا يستخدم عادة في التقنية المساعدة، أما بالنسبة للإجراءات المخصصة فهو سلسلة نصية محلية تحوي وصف الإجراء الذي سيقدم للمستخدم.

يجب أن ينفذ المكون الدالة onAccessibilityAction لمعالجة طلبات الإجراءات، المعامل الوحيد لهذه الدالة هو حدث يحوي اسم الإجراء الذي سينفذ، يوضح المثال التالي من RNTester كيفية إنشاء مكون يعرّف عدة إجراءات مخصصة ويعالجها:

<View
  accessible={true}
  accessibilityActions={[
    { name: 'cut', label: 'cut' },
    { name: 'copy', label: 'copy' },
    { name: 'paste', label: 'paste' }
  ]}
  onAccessibilityAction={(event) => {
    switch (event.nativeEvent.actionName) {
      case 'cut':
        Alert.alert('Alert', 'cut action success');
        break;
      case 'copy':
        Alert.alert('Alert', 'copy action success');
        break;
      case 'paste':
        Alert.alert('Alert', 'paste action success');
        break;
    }
  }}
/>

التحقق مما إذا كان قارئ شاشةٍ مفعلًا أو لا

تسمح لك الواجهة ‎AccessibilityInfo‎ البرمجيّة بتحديد ما إذا كان قارئ الشاشة نشطًا أو لا. انظر توثيق ‎AccessibilityInfo‎ للاستزادة.

إرسال أحداث سهولة الوصول (في Android فقط)

من المُفيد أحيانًا إطلاق حدث سهولة وصولٍ (accessibility event) على مكونٍ من مكوّنات عرض المستخدم (عند ظهور عرض مُخصّص على الشاشة أو عند تحديد زر اختيار مخصّص مثلًا). توفّر وحدة UIManager الأصيلة التّابع ‎sendAccessibilityEvent‎ لهذا الغرض. ويأخذ هذا التّابع معاملين: وسم العرض (view tag) ونوع الحدث. أنماط الأحداث المدعومة هي typeWindowStateChangedو typeViewFocused و typeViewClicked

import {
  Platform,
  UIManager,
  findNodeHandle
} from 'react-native';

if (Platform.OS === 'android') {
  UIManager.sendAccessibilityEvent(
    findNodeHandle(this),
    UIManager.AccessibilityEventTypes.typeViewFocused
  );
}

اختبار دعم TalkBack (في Android فقط)

لتفعيل أداة TalkBack انتقل إلى تطبيق الإعدادات على جهاز Android الخاص بك أو محاكيه، انقر على سهولة الوصول ( Accessibility)، ثم على TalkBack.بدّل المفتاح "Use service" لتفعيله أو إلغاء تفعيله.

ملاحظة: لا يحوي محاكي Android الأداة TalkBack بشكل افتراضي، لتحميله اتبع الخطوات:

• حمل ملف TalkBack من https://google-talkback.en.uptodown.com/android.
• اسحب الملف .apk المحمل إلى المحاكي.

يمكن استخدام اختصار مفتاح الصوت لتعطيل أو تفعيل الأداة TalkBack، لتشغيل هذا الاختصار اذهب إلى تطبيق الإعدادات ثم اختر سهولة الوصول (Accessibility)، ثم شغل اختصار مفتاح الصوت (Volume key shortcut).

لاستخدام اختصار مفتاح الصوت اضغط على مفتاحي الصوت معًا لمدة 3 ثوانٍ لبدء أداة سهولة الوصول.

يمكنك تعطيل أو تفعيل الأداة TalkBack باستخدام سطر الأوامر بالشكل التالي:

# disable
adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService

# enable
adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService

اختبار دعم VoiceOver (في iOS فقط)

لتفعيل أداة VoiceOver، انتقل إلى تطبيق الإعدادات على جهاز iOS الخاص بك. انقر على قسم الإعدادات العامّة (General)، ثم سهولة الوصول (Accessibility). ستجد في هذا القسم العديد من الأدوات التي يستخدمها الأشخاص لجعل أجهزتهم أكثر قابلية للاستخدام، كالنصوص الأكثر ثخانةً (bolder text)، وزيادة التباين (contrast)، وأداة VoiceOver.

لتمكين VoiceOver، انقر على VoiceOver داخل خيار الرؤية (Vision) وبدّل المفتاح الذي يظهر في الأعلى.

يوجد خيار "اختصار سهولة الوصول (Accessibility Shortcut)" في الجزء السفلي من إعدادات سهولة الوصول. يمكنك استخدام هذا لتفعيل أو تعطيل أداة VoiceOver عن طريق النقر الثلاثي (النقر ثلاثة مرّات: triple click) على زر المنزل (Home button).

مصادر

• صفحة Accessibility في توثيق React Native الرسمي.