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

سهولة الوصول (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) إلى أن يصِل إلى عرضٍ يحتوي على هذه الدّالة.

أ

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

تسمح لك عرض ‎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 الرسمي.