الشمولية: سهولة استخدام تطبيقات React Native

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

ملاحظة: كلمة شمولية وسهولة وصول هما مصطلحان مترادفان يشيران إلى المصطلح الأجنبي Accessibility.

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

‎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: يجب أن تقاطع خدمات سهولة الوصول الكلام الجاري للإعلان فورًا عن التغييرات التي تطرأ على هذه الواجهة.

<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‎

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

• ‎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: يستخدم لتمثيل شريط الأدوات (حاوية أزرار إجراءات أو مكونات).

‎accessibilityState‎

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

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

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

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 ، يجب أن تعود هذه الدالة إلى الوراء بشكلٍ هرمي في واجهة المستخدم، وهذا يعني التحرك للأعلى أو للخلف في التسلسل الهرمي للتنقل أو رفض واجهة مستخدم مشروطة. إذا لم يحتو العنصر المحدد على دالة 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 الرسمي.