React Native / أنظمة أصلية شاملة وأدلة الإصدار / الدرس 13
الإتاحة العربية واتجاه العرض
احفظ المعنى عبر الرسائل المترجمة والتخطيط المنطقي وتكبير النص وسلوك التقنيات المساعدة الخاص بالمنصة.
في هذه الصفحة
أهداف الدرس
- تبدأ الإتاحة من المهمة المطلوبة
- أظهر الحالة والإجراء الفعليين
- يختلف اتجاه العرض عن ترجمة النص
تبدأ الإتاحة من المهمة المطلوبة
يجب أن يوضح التحكم فعله وحالته الحالية ونتيجته دون الاعتماد على شكل الأيقونة أو اللون أو الحركة وحدها. استخدم دورا مناسبا وتسمية مفهومة، ثم افحص هل يكرر التجميع محتوى مفيدا أو يخفيه. يختلف سلوك VoiceOver وTalkBack بحسب المنصة، فلا تعتمد خاصية واحدة أو قراءة المصدر التجربتين معا. يقدم المثال الأول اختيار تفضيل شبيها بمربع اختيار مع حالة checked صريحة. وينبغي ترجمة تسميته في التطبيق. لا تعلن كل عرض أو ضغطة؛ واختر انتقالات تساعد المستخدم على إكمال المهمة والتعافي من الفشل.
أظهر الحالة والإجراء الفعليين
تستقبل الوحدة الأولى قيمة منطقية ورد تغيير من مالكها. ويتفق دورها وحالتها المحددة مع علامة الاختيار المرئية. تطلب قيمة جديدة بدلا من تعديل المحفوظ مستقلة. ويحدد عقد أمر الأب هل يُحفظ التفضيل فورا أم يبقى مسودة قابلة للإلغاء. ويحتاج التصميم المخصص أيضا حجم هدف وتباينا ووضوح تركيز وسلوك تعطيل مفهوما. الدلالات المذكورة خصائص مقصودة، وليست نص نطق مختبرا. ويبقى التفاعل المساعد الأصلي غير منفذ في بيئة الدورة.
import {Pressable, Text} from 'react-native';
export default function FavoriteChoice({checked, onChange}) {
return <Pressable accessibilityRole="checkbox" accessibilityLabel="Favorite workshop"
accessibilityState={{checked}} onPress={() => onChange(!checked)}>
<Text>{checked ? 'Selected' : 'Not selected'}</Text>
</Pressable>;
}
The control exposes checkbox intent and the supplied checked state.
يملك الأب checked وسياسة التحديث. وتحتاج العبارة المنطوقة وترتيب التركيز وقابلية الهدف إلى فحوص المنصة.
يختلف اتجاه العرض عن ترجمة النص
تستخدم الوحدة الثانية مسافة البداية المنطقية وتختار سهم تقدم القراءة من حالة RTL الحالية. هذه سياسة سهم دلالية واحدة، وليست إذنا بعكس كل علامة أو أيقونة وسائط. قد يحوي النص العربي معرّفات لاتينية وأرقاما يحتاج اتجاهها إلى مراجعة. وإعدادات I18nManager مثل forceRTL شأن تطوير وإعداد بحفظ وتأثير بعد إعادة البدء، وليست زر لغة فوري يستدعى أثناء العرض. ويحتاج التطبيق المترجم رسائل كاملة وصيغ جمع وتنسيق أعداد وتواريخ. لا يحفظ لصق أجزاء مترجمة حول عدد قواعد العربية.
import {I18nManager, View, Text} from 'react-native';
export default function NextSection({label}) {
return <View style={{flexDirection: 'row', alignItems: 'center'}}>
<Text>{label}</Text>
<Text style={{marginStart: 8}}>{I18nManager.isRTL ? '←' : '→'}</Text>
</View>;
}
The example’s reading-progress arrow points left in RTL and right in LTR.
تتبع المسافة المنطقية اتجاه القراءة. ولا يتغير إعداد RTL أو تنفذ إعادة بدء أو عملية تخطيط أصلية.
احترم نمو النص وشروط المنصة
قد يغير تكبير الخط عدد الأسطر وارتفاع الصف ومتطلبات التمرير. فضّل تركيبا متكيفا على تعطيل التكبير لحفظ نموذج بصري. تحتاج الخصائص الخاصة بمنصة إلى شروطها: accessibilityLanguage موثقة لـ iOS، وaccessibilityLiveRegion لـ Android. لا تدّع أن خاصية واحدة تصنع إعلانات متطابقة في كل مكان. اربط نص الخطأ بحقله، ولا تحرك التركيز إلا لسبب واضح يخدم المهمة. ولتغير النتائج المهم، نسّق الإعلان مع هوية الطلب المقبول حتى لا يقاطع خطأ متقادم نجاحا أحدث. وتنتمي تفضيلات تقليل الحركة إلى سياسة الحركة، لا مفتاح مرئي غير مرتبط.
افحص تدفقات التعافي المترجمة كاملة
راجع الإنجليزية والعربية والترجمات الطويلة والمعرّفات المختلطة والنص الكبير والتفاعل بلوحة المفاتيح وحدها حيث يدعم وقارئات الشاشة المقصودة. أدرج التحكم المعطل وفشل التحقق والتصحيح الناجح وعودة التركيز بعد إغلاق الحوار. قد تكشف فحوص الموارد رسائل مفقودة، لكنها لا تثبت الكلام الفعلي أو التركيز المفيد. يفحص اختبار مكوّن مجهز الأدوار المعلنة، بينما تثبت اختبارات الهدف سلوك المنصة. لم يُشغّل VoiceOver أو TalkBack أو جهاز أو محلّل JSX أو عارض React هنا. أبق الحدود غير المتحققة صريحة إلى جانب توقعات المصدر.
الأخطاء الشائعة وإصلاحها
عدم توضيح الأيقونة فعلا منطوقا
- لماذا يحدث؟
- حل التعرف المرئي محل تسمية دلالية مفهومة.
- كيف تصلحه؟
- استخدم دور تحكم مناسبا وتسمية إجراء مترجمة.
- كيف تتجنب تكراره؟
- اختبر مهمة القارئ كاملة لا تفريغ الخصائص فقط.
استدعاء تبديل اللغة forceRTL مرارا أثناء العرض
- لماذا يحدث؟
- اعتُبر الإعداد المحفوظ حساب عرض فوريًا.
- كيف تصلحه؟
- عالج الاتجاه عبر سير ترجمة التطبيق المراجع.
- كيف تتجنب تكراره؟
- افصل موارد النص والاتجاه ومتطلبات إعادة البدء.
الوعد بخاصية خاصة بمنصة على كل الأهداف
- لماذا يحدث؟
- أُغفلت شروط المنصة في التوثيق.
- كيف تصلحه؟
- احفظ شروط iOS وAndroid وافحص السلوك المقصود لكل منهما.
- كيف تتجنب تكراره؟
- أبق حالات الإتاحة الخاصة بالهدف في مصفوفة الاختبار.
اختبر فهمك
1. لماذا لا ينبغي عكس كل سهم تلقائيا في العربية؟
اعرض الحل المشروح
يتبع الاتجاه المعنى. قد ينعكس سهم تقدم مرتبط بترتيب القراءة، بينما يكون لاتجاه مادي أو علامة تجارية أو عرف وسائط حكم آخر. وثّق كل فئة دلالية واختبرها بمحتوى مترجم، بدلا من تطبيق تحويل واحد على كل العناصر.
2. هل يثبت نجاح فحص موارد الرسائل التعافي من الخطأ باستخدام TalkBack؟
اعرض الحل المشروح
لا. يثبت وجود صيغ الرسائل المختبرة وتنسيقها كما هو متوقع. يحتاج ارتباط الخطأ وتوقيت الإعلان ونقل التركيز ومسار تعافي المستخدم إلى دليل مكوّن ودليل هدف فعلي. اذكر هذه الحدود منفصلة عند الإبلاغ عن عمل الإتاحة.
أهم ما تعلمته
- تبدأ الإتاحة من المهمة المطلوبة
- افحص تدفقات التعافي المترجمة كاملة