RTL وإمكانية الوصول
المنتج عربي أولاً. يعني RTL مش ترجمة بعد الإنجليزي، هو الأصل واللي بيتعكس هو LTR. وإمكانية الوصول هنا مش قايمة فحص في الآخر، دي جزء من التصميم لأن العاملة ممكن تكون بتقرا بصعوبة، وممكن تستخدم موبايل رخيص في ضوء الشمس، وممكن تكون لغتها الأمهرية. جرّب زر "LTR / English" فوق وشوف الأمثلة بتتعكس.
مبادئ RTL
- خصائص منطقية دايماً.
margin-inline-start،padding-inline،inset-inline-end،text-align: start. ممنوعmargin-leftوright: 0في المكوّنات. - الاتجاه من attribute واحد.
<html dir="rtl">والباقي يتبعه. مفيش كلاسات "rtl" متفرقة. - ترتيب القراءة هو ترتيب الـ DOM. زر "التالي" بعد "السابق" في الكود، وهو بيظهر يسار الأخير في RTL تلقائي.
- الأيقونات التقدمية بتتعكس والرمزية لا. الجدول التحت بيحدد.
- الخط: Readex Pro للنص وTajawal للعناوين والأرقام الكبيرة، وNoto Sans Ethiopic للأمهرية والتغرينية. ما بنعملش letter-spacing للعربي أبداً.
نفس الماركب في RTL و LTR: بدّل الاتجاه من الشريط
إيه بيتعكس وإيه لا
بيتعكس (اتجاه تقدّم أو قراءة)
الأسهم والشيفرونالتالي، السابق، دخول لتفاصيل
الأسهم الاتجاهيةمتابعة، رجوع، تحويل
إرسالالطيارة الورقية
تسجيل الخروجبتتجه ناحية الخروج
تراجع وسجلالدوران اللي بيرجع
إظهار اللوحة الجانبيةالجانب هو بداية السطر
ما بيتعكسش
علامة الصحرمز عالمي مش اتجاهي
الساعةالعقارب ماشية في اتجاه واحد
أزرار الوسائطتشغيل، إيقاف، تقديم. نفس الشكل في الاتجاهين
الأرقام وأرقام الموبايلبتتقرا شمال ليمين دايماً
العدسةبتتحط في بداية الحقل
اللوجوالعلامة ثابتة والكلمة بتتبدل بحسب اللغة
القاعدة: لو الأيقونة بتقول "فين الأمام"، اتعكس. لو بتقول "إيه ده"، متتعكسش. في الكود بنكتب الأيقونة بمنطق LTR (التالي = chevron-right) والنظام يعكسها في RTL.
مكوّنات بتتعكس: Stepper، شريط تقدّم، Range، Tabs
الهوية
الوجه
الفيش
جرّب الأسهم ← → على التبويبات. الاتجاه بيتبع القراءة.
لوحة التبويب التاني.
لوحة التبويب التالت.
النص المختلط (Bidi)
الأرقام والإنجليزي جوه الجملة العربية بتتلخبط في الترتيب لو ما اتعزلتش. الحل: <bdi> للنص المتغير (اسم، رقم)، و.ltr للقيم اللي لازم تتقرا شمال ليمين (موبايل، رقم عقد، بريد). الأمهرية بتتكتب بخطها وبـ lang="am".
صح وغلط
صح: رقم الموبايل +20 101 234 5678 ورقم العقد AM-2026-00418.
صح: الاسم المكتوب: Mona Ali والاسم بالعربي: منى علي.
للأمهرية: እንኳን ደህና መጡ، يعني "أهلاً بيكم".
مختلط ومعزول: السعر 9,000 جنيه شهرياً.
رقمي 0101 234 5678
الرقم معزول، فبيتقرا زي ما هو.
رقمي 0101 234 5678 (بعد الاسم Mona)
لما ما نعزلش، علامات الترقيم ممكن تنط جنب النص الإنجليزي.
الأرقام والتواريخ والعملة
| العنصر | القاعدة | مثال |
|---|---|---|
| الأرقام | غربية 0-9 في الواجهة كلها. الأرقام الهندية اختيار في الإعدادات. | 9,000 · 01012345678 |
| العملة | الرقم ثم "جنيه" أو "ج" في المساحات الضيقة، ومسافة بينهم. | 9,000 جنيه |
| التاريخ | ميلادي افتراضي: يوم + اسم الشهر + سنة. الهجري اختياري في الإعدادات. | 14 نوفمبر 2026 |
| الوقت | 12 ساعة مع ص / م، توقيت القاهرة. | 7:30 م |
| أسماء الأيام | الأسبوع بيبدأ السبت في تقويم الحضور. | سبت أحد إثنين ... |
| التواريخ النسبية | "من 3 أيام" و"باقي ساعتين". نتجنب "منذ" الفصحى. | من 3 أيام |
| محور الزمن في الرسوم | الفترة الأولى على اليمين في RTL، والأرقام نفسها غربية. | شوف صفحة الرسوم البيانية |
الكيبورد والتركيز
- الأسهم الأفقية بتتبع اتجاه القراءة: في RTL السهم الأيمن بيروح للعنصر السابق.
- الترتيب بالـ Tab هو ترتيب القراءة، ومفيش
tabindexموجب. - Esc بيقفل القوائم والنوافذ، والتركيز بيرجع للزر اللي فتحها.
- أي حاجة بتتعمل بسحب ليها بديل بزر (مثلاً: قايمة "نقل إلى" في الكانبان).
حلقة التركيز
حلقة مزدوجة: حلقة بلون السطح (فاصل) وحلقة خارجها بلون الحبر على الفاتح وفيروزي على الغامق (--border-focus)، وحقول الإدخال بتاخد كمان ظل صلب فيروزي. بتتشاف على أي خلفية وتعدي 3:1 (القياس تحت في جدول التباين).
شكل الحلقة (الضغط على Tab في الأمثلة بيعرضها)
عنصر عليه تركيز
رابط
قايمة إمكانية الوصول
الهدف: WCAG 2.2 AA على كل الشاشات. تطبيق العاملة بيستهدف نص أساسي بتباين 7:1 (AAA).
| البند | المطلوب |
|---|---|
| منطقة اللمس | 44px كحد أدنى للويب، 48dp لتطبيق الأسرة، 56dp لتطبيق العاملة. مسافة 8px على الأقل بين الأهداف. |
| اللون لوحده | أي حالة (نجاح، تحذير، خطأ، مستوى توثيق) لازم تتعرض بأيقونة + نص. |
| الحركة | كل حركة ليها بديل في prefers-reduced-motion، وبتفضل الحركة للتعبير عن حالة بس. |
| الألوان القسرية | دعم forced-colors: حدود ظاهرة وحلقة التركيز بلون النظام. |
| التكبير | الواجهة بتشتغل لحد 200% من غير قص ولا تمرير أفقي. الخطوط بالـ rem. |
| أخطاء النماذج | الخطأ جنب الحقل، role="alert"، aria-invalid، بيقول المطلوب وإزاي يتصلح. التركيز بيروح لأول خطأ. |
| قارئ الشاشة | كل أيقونة وحدها ليها aria-label بالعربي. الصور المعلوماتية ليها نص بديل. الحالة بتتعلن (aria-live). |
| المحتوى الصوتي | كل شرح صوتي ليه نص مكتوب (transcript). الرسائل الصوتية في المحادثة ليها نص اختياري. |
| المهلة | مفيش مهلة تلقائية على النماذج المهمة (العقد، الدفع). كود التحقق صالح 5 دقايق مع إعادة إرسال. |
| اللغة | lang صحيحة على كل نص (ar-EG، en، am، ti). |
نموذج بخطأ: كيف يظهر ويتعلن
الرقم ناقص. اكتب 11 رقم يبدأ بـ 01.
التباين (بيتقاس لايف)
الأرقام بتتحسب في المتصفح من الألوان الفعلية في الفاتح والغامق (مش مكتوبة بإيدينا)، فلو token اتغير الجدول بيتغير معاه. في تطبيق العاملة بنستخدم text وtext-2 للنص الأساسي لأنهم فوق 7:1، ونتجنب text-3 للنص الأساسي. النص على الألوان الصريحة (فيروزي، شمس، طماطم) حبر دايماً، والأبيض بس على الحبر أو الفيروزي الغامق.
| الزوج | الوضع | النسبة | الحد | AAA 7:1 |
|---|---|---|---|---|
| Aa النص الأساسي على الورق | فاتح | … | 4.5 | … |
| Aa النص الثانوي على الورق | فاتح | … | 4.5 | … |
| Aa النص الخافت وplaceholder على أبيض | فاتح | … | 4.5 | … |
| Aa حدود الحقول على أبيض (عنصر واجهة) | فاتح | … | 3 | … |
| Aa نص الزر الأساسي (حبر على فيروزي) | فاتح | … | 4.5 | … |
| Aa نص الزر المميز (حبر على شمس) | فاتح | … | 4.5 | … |
| Aa نص زر الخطر (حبر على طماطم) | فاتح | … | 4.5 | … |
| Aa أبيض على الفيروزي الغامق | فاتح | … | 4.5 | … |
| Aa الرابط على أبيض | فاتح | … | 4.5 | … |
| Aa حلقة التركيز وخط الحبر على الورق | فاتح | … | 3 | … |
| Aa نص النجاح على خلفيته | فاتح | … | 4.5 | … |
| Aa نص التحذير على خلفيته | فاتح | … | 4.5 | … |
| Aa نص الخطأ على خلفيته | فاتح | … | 4.5 | … |
| Aa غامق: النص على الورق | غامق | … | 4.5 | … |
| Aa غامق: النص الثانوي على السطح | غامق | … | 4.5 | … |
| Aa غامق: النص الخافت على السطح | غامق | … | 4.5 | … |
| Aa غامق: حلقة التركيز (فيروزي) | غامق | … | 3 | … |
ألوان الرسوم البيانية بتتقاس في صفحة الرسوم البيانية. لو لون في الرسم تحت 3:1 على السطح بنوفر labels مباشرة وجدول بديل.
القراءة المنخفضة واللغات
تطبيق العاملة بيفترض إن القراءة ممكن تكون صعبة. المبدأ: أيقونة + كلمة + صوت لكل خطوة، وجملة واحدة في الشاشة، وزر واحد كبير.
شاشة بسيطة: أيقونة، كلمة، شرح صوتي، لغات (data-surface="worker")
صوّري بطاقتك
حطي البطاقة على سطح مستوي وصوري الوشّين. استني لحد ما الإطار يبقى أخضر.
| اللغة | الاستخدام | ملاحظات |
|---|---|---|
| العربية (مصر) | الأسرة والعاملة والمكاتب | اللغة الأساسية. RTL. |
| English | الأسر المقيمة والمرتبطة بشركات، وبعض العاملات | نفس المنتج LTR. |
| አማርኛ (الأمهرية) | عاملات من إثيوبيا | خط Noto Sans Ethiopic. محتاج مراجعة متحدثين. |
| ትግርኛ (التغرينية) | عاملات من إريتريا | نفس الخط. مراجعة متحدثين. |
| Kiswahili | عاملات من كينيا وأوغندا | لاتيني. مراجعة متحدثين. |
| Filipino | عاملات فلبينيات (لو اتأكد المسار القانوني) | لاتيني. |
أوفلاين والشبكة الضعيفة
- Skeleton مكان المحتوى، مش spinner في النص.
- الإجراءات المهمة بتتحفظ محلياً وتتبعت لما النت يرجع: تسجيل الحضور، بلاغ، رفع مستند.
- الحالة واضحة: "اتحفظ على موبايلك، هيتبعت لما النت يرجع" بدل خطأ مبهم.
- أول شاشة بتشتغل بدون نت من آخر نسخة محفوظة، مع علامة "آخر تحديث".
حالة بدون اتصال
مفيش اتصال بالنت
تقدري تكملي. اللي تعمليه هيتحفظ على موبايلك وهيتبعت لما النت يرجع.تسجيل الحضور 8:05 صمحفوظ على الموبايلفي الانتظار
الخصوصية من التصميم
- نعرض الحالة مش المستند. الأسرة بتشوف "الفيش: اتراجع، لا يوجد أحكام"، مش صورة الفيش.
- موافقة صريحة ومفصلة قبل جمع أي بيانات حساسة (صحية، جنائية، وجه). كل نوع بموافقته.
- مدة الاحتفاظ ظاهرة. والعاملة تقدر تشوف وتطلب حذف حسب القانون.
- الكاميرات: مش جزء من المنتج. لو الأسرة بتستخدم كاميرا خاصة، بنذكر الشروط والموافقة في العقد.
شاشة موافقة على جمع بيانات حساسة
محتاجين موافقتك على 3 حاجات
الأمان
- بلاغ سري متاح من أي شاشة، بنقرة، بصوت أو كتابة أو صورة.
- SOS: زر ظاهر في تطبيق العاملة بيبعت موقعها لجهة اتصال اختارتها، مع تأكيد بسيط عشان ما يتضغطش بالغلط.
- مفيش بلاغ "هروب" تلقائي. لو أسرة بلّغت عن غياب عاملة، الأول فحص سلامة: بنتواصل معاها وبنسألها إنها بخير. وبعدين بندعم الأسرة في الإجراء المطلوب بصيغة محايدة.
- مؤشرات الاتجار بالبشر (احتجاز مستندات، ديون، منع تواصل، حرمان من الأجر) في الأسئلة الدورية بتفتح مسار إحالة.
فحص سلامة قبل أي تصعيد
قبل ما نكمل، عايزين نتأكد إن منى بخير
الأسرة بلّغت إنها ماجتش النهارده. هنتواصل معاها الأول. الأسرة هتتأكد من النتيجة.متطلبات وصول لكل مكوّن
| المكوّن | المطلوب |
|---|---|
| زر | <button> حقيقي. زر الأيقونة له aria-label. التحميل: aria-busy="true". |
| حقل | <label for> ظاهر. الخطأ role="alert" وaria-describedby. Placeholder مش بديل. |
| Checkbox و Radio | داخل fieldset + legend للمجموعة. منطقة لمس 44px على الأقل. |
| Tabs | role="tablist/tab/tabpanel"، الأسهم تتبع القراءة، Home و End. |
| Dialog / Sheet | <dialog> مع aria-labelledby، Esc، رجوع التركيز، وحبس التركيز جوه. |
| Menu | aria-haspopup، aria-expanded، أسهم، Esc. |
| Table | scope على الترويسة، aria-sort، تحديد الصف له label. |
| Stepper | قايمة مرتبة، الحالي aria-current="step". |
| Toast | role="status"، 4 ثواني على الأقل، وقابل للإيقاف لو فيه إجراء. |
| Chart | لها عنوان، legend، ونسخة جدول، والـ hover له مقابل بالكيبورد (أسهم). |
| Tier و Legal | نص + أيقونة. الحالة قابلة للإعلان لقارئ الشاشة، والخطوة التالية زر حقيقي. |
| Voice و SOS | حالة الضغط aria-pressed. SOS ليه تأكيد ومنطقة لمس 56dp. |