سهولة الوصول في React Native

سهولة الوصول (Accessibility) في التطبيقات الأصيلة (iOS وAndroid)

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

إضافةً إلى هذا التوثيق، قد يُفيدك كذلك هذا المقال حول سهولة الوصول في 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‎ (في iOS وAndroid)

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

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

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

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

‎accessibilityHint‎ (في iOS وAndroid)

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

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

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

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

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

‎accessibilityIgnoresInvertColors‎ (في iOS فقط)

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

‎accessibilityRole‎ (في iOS وAndroid)

ملاحظة: الخاصيّتان accessibilityRole و‎accessibilityStates‎ مُصمّمتان لتكونا حلًّا عابرًا للمنصّات (cross-platform) بدلًا من ‎accessibilityTraits‎ و‎accessibilityComponentType‎، اللتان ستُهمَلان (deprecated) قريبًا. استخدم accessibilityRole و‎accessibilityStates‎ عوضًا عن ‎accessibilityTraits‎ و‎accessibilityComponentType‎ متى أمكن ذلك.

يُعلِمُ دور سهولة الوصول (Accessibility Role) مُستخدمَ VoiceOver على iOS أو TalkBack على Android عن نوع العنصر المُركَّز عليه. لاستخدام هذه الميّزة، عيّن الخاصية ‎accessibilityRole‎ إلى إحدى السلاسل النّصيّة التالية:

• ‎none‎: لا دور للعنصر.
• ‎button‎: تجب معاملة العنصر كَزِرٍّ.
• ‎link‎: تجب معاملة العنصر كَرابطٍ.
• ‎search‎: تجب مُعاملة عنصر حقل النص كحقل بحث كذلك.
• ‎image‎: يجب التعامل مع العنصر كصورةٍ. يمكن جمعها مع زر أو رابط مثلًا.
• ‎keyboardkey‎:يعمل العنصر كمفتاح لوحة مفاتيحٍ.
• ‎text‎: يجب التعامل مع العنصر كنص ثابت لا يمكن تغييره.
• ‎adjustable‎: عنصرٌ يمكنُ ضبطه وتعديله (شريط تمريرٍ [slider]مثلًا).
• ‎imagebutton‎: يجب التعامل مع العنصر على أنه زر، وهوَ صورة كذلك.
• ‎header‎: يعمل العنصر كعنوانٍ لقسم من أقسام المحتوى (كعنوان شريط التنقل مثلًا).
• ‎summary‎: يمكن استخدام العنصر لتوفير ملخص سريع للظروف الحالية في التطبيق عند تشغيل التطبيق.

‎accessibilityStates‎ (في iOS وAndroid)

ملاحظة: الخاصيّتان accessibilityRole و‎accessibilityStates‎ مُصمّمتان لتكونا حلًّا عابرًا للمنصّات (cross-platform) بدلًا من ‎accessibilityTraits‎ و‎accessibilityComponentType‎، اللتان ستُهملان (deprecated) قريبًا. استخدم accessibilityRole و‎accessibilityStates‎ عوضًا عن ‎accessibilityTraits‎ و‎accessibilityComponentType‎ متى أمكن ذلك.

تُعلِمُ حالة سهولة الوصول (Accessibility State) مُستخدمَ VoiceOver على iOS أو TalkBack على Android عن حالة العنصر المُركَّز عليه حاليًّا. يمكن تعيين حالة العنصر إمّا إلى القيمة ‎selected‎ أو إلى القيمة ‎disabled‎ أو كليهما:

• ‎selected‎: العنصر في حالة تحديدٍ. مثلًا: الزّرُ محدّدٌ حاليّا.
• ‎disabled‎: العنصر معطّل ولا يمكن التفاعل معه.

لاستخدام هذه الميّزة، عيّن الخاصية ‎accessibilityStates‎ إلى مصفوفة تحتوي إمّا القيمةَ ‎selected‎ أو القيمة ‎disabled‎ أو كليهما.

‎accessibilityTraits‎ (في iOS فقط)

ملاحظة: ستُهمَل الخاصيّة ‎accessibilityTraits‎ قريبًا. استخدم accessibilityRole و‎accessibilityStates‎ عوضًا عن ‎accessibilityTraits‎ و‎accessibilityComponentType‎ متى أمكن ذلك.

تُعلِم سمات سُهولة الوصول (Accessibility traits) مستخدِمَ VoiceOver عن نوع العنصر الذي حدده. أهذا العنصر تسميّة؟ أم زر؟ أم عنوان؟ تُجيب الخاصيّةُ ‎accessibilityTraits‎ على هذه الأسئلة.

لاستخدام هذه الميّزة، عيّن الخاصية ‎accessibilityTraits‎ إلى أحد السلاسل النصيّة التّاليّة أو إلى مصفوفةٍ تحتوي على عددٍ منها:

• ‎none‎: لا سمةَ للعنصر.
• ‎button‎: تجب معاملة العنصر كَزِرٍّ.
• ‎link‎: تجب معاملة العنصر كَرابطٍ.
• ‎header‎: يعمل العنصر كعنوانٍ لقسم من أقسام المحتوى (كعنوان شريط التنقل مثلًا).
• ‎search‎: تجب مُعاملة عنصر حقل النص كحقل بحث كذلك.
• ‎image‎: يجب التعامل مع العنصر كصورةٍ. يمكن جمعها مع زر أو رابط مثلًا.
• ‎selected‎: العنصر مُحدَّد، كصفّ مُحدَّدٍ في جدولٍ أو زرّ مُحدّد مثلًا.
• ‎plays‎: يُشغِّل العنصر صوتًا خاصًّا به عند تنشيطه.
• ‎key‎:يعمل العنصر كمفتاح لوحة مفاتيحٍ.
• ‎text‎: يجب التعامل مع العنصر كنص ثابت لا يمكن تغييره.
• ‎summary‎: يمكن استخدام العنصر لتوفير ملخص سريع للظروف الحالية في التطبيق عند تشغيل التطبيق. على سبيل المثال، عند تشغيل تطبيق الطقس، سيُحدَّد عنصر حالة طقسِ اليومِ بهذه السمة.
• ‎disabled‎: التحكم مُعطّل على هذا العنصر ولا يستجيب لمدخلات المستخدم.
• ‎frequentUpdates‎: يُحدِّث العنصرُ بشكل متكرر تسميّتَه أو قيمتَه، ولكنّ معدّل التحديثات كبيرٌ وغير مُناسبٍ لإرسال إشعارات التّحديث. هذا يسمح لعميل سهولة الوصول (accessibility client) بإجراء استطلاع للتغييرات (poll for changes). كساعة توقيتٍ مثلًا.
• ‎startsMedia‎: يُستخدَم هذا الخيار عندما يبدأ تنشيطُ عنصرٍ ما جلسةَ وسائطٍ (media session)، (كتشغيل مقطعٍ مرئيّ أو تسجيل صوت) بحيث لا ينبغي مقاطعتها من طرَف مُخرَج تقنيةٍ مساعدةٍ مثل VoiceOver.
• ‎adjustable‎: عنصرٌ يمكنُ ضبطه وتعديله (شريط تمريرٍ [slider]مثلًا).
• ‎allowsDirectInteraction‎: يسمح العنصرُ بالتفاعل المباشر عن طريق اللمس لمستخدمي VoiceOver (على سبيل المثال، عرضٌ يمثّل لوحة مفاتيح بيانو).
• ‎pageTurn‎: يُعلِم هذا الخيارُ المُساعدَ VoiceOver بوجوب الانتقال إلى الصفحة التالية عندما ينتهي من قراءة محتويات العنصر.

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

‎onAccessibilityTap‎ (في iOS فقط)

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

‎onMagicTap‎ (في iOS فقط)

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

‎accessibilityComponentType‎ (في Android فقط)

ملاحظة: ستُهمَل الخاصيّة ‎accessibilityComponentType‎ قريبًا. استخدم accessibilityRole و‎accessibilityStates‎ عوضًا عن ‎accessibilityTraits‎ و‎accessibilityComponentType‎ متى أمكن ذلك.

في بعض الحالات، قد نرغب كذلك بتنبيه المستخدم عن نوع المكون المحدَّد (أي إخباره مثلًا أنّ هذا المُكوِّن زرٌّ قابل للضغط). إذا كنّا نستخدم أزرارًا أصيلة، فسيعمل هذا تلقائيًا. لكن لأنّنا نستخدم JavaScript، فإنّنا نحتاج إلى توفير سياقٍ أكثر لأداة TalkBack. للقيام بهذا، يجب عليك تحديد الخاصية ‎accessibilityComponentType‎ في أي مكون من مكونات واجهة المستخدم (UI component). تدعم هذه الخاصيّة القيم: ‎none‎، و‎button‎، و‎radiobutton_checked‎، و‎radiobutton_unchecked‎.

<TouchableWithoutFeedback accessibilityComponentType="button"
  onPress={this._onPress}>
  <View style={styles.button}>
    <Text style={styles.buttonText}>Press me!</Text>
  </View>
</TouchableWithoutFeedback>

في المثال أعلاه، سيُعلَن عن المُكوِّن ‎TouchableWithoutFeedback‎ على أنّه زرّ أصيل فيTalkBack.

‎accessibilityLiveRegion‎ (في Android فقط)

عندما تتغير المكونات ديناميكيًا، فسنرغب بتنبيه المستخدم عبر TalkBack. هذا مُمكن من خلال الخاصية ‎accessibilityLiveRegion‎. يُمكن تعيين القيم ‎assertive‎، ‎polite‎، ‎none‎ لها:

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

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

في المثال أعلاه، يُغيّر التّابع ‎_addOne‎ متغيّر الحالة ‎state.count‎. سيقرأ TalkBack النصّ الموجود في عرض ‎Text‎ بمجرد نقر المستخدم على المكوّن ‎TouchableWithoutFeedback‎، وذلك لوجود الخاصية ‎accessibilityLiveRegion="polite"‎ عليه.

‎importantForAccessibility‎ (في Android فقط)

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

<View style={styles.container}>
  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    backgroundColor: 'green'}} importantForAccessibility=”yes”>
    <Text> First layout </Text>
  </View>
  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    backgroundColor: 'yellow'}} importantForAccessibility=”no-hide-descendants”>
    <Text> Second layout </Text>
  </View>
</View>

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

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

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

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

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

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

_onPress: function() {
  const radioButton = this.state.radioButton === 'radiobutton_checked' ?
    'radiobutton_unchecked' : 'radiobutton_checked'

  this.setState({
    radioButton: radioButton
  });

  if (radioButton === 'radiobutton_checked') {
    UIManager.sendAccessibilityEvent(
      findNodeHandle(this),
      UIManager.AccessibilityEventTypes.typeViewClicked);
  }
}

<CustomRadioButton
  accessibilityComponentType={this.state.radioButton}
  onPress={this._onPress}/>

أنشأنا في المثال أعلاه زر انتقاءٍ (radio button) مخصصٍ أصبح يسلك سلوك أزرار الانتقاء الأصيلة. بعبارة أدقّ، أصبَحت أداة TalkBack الآن تُعلن بشكل صحيح عن التغييرات الحاصلة في تحديد زر الانتقاء.

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

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

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

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

مصادر

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