النماذج الأولية ومتطلبات واجهة المستخدم

متطلبات إمكانية الوصول والتدويل

18 دقيقة الدرس 9 من 10

متطلبات إمكانية الوصول والتدويل

النموذج الأولي الذي يعمل فقط مع المستخدمين القادرين جسدياً والناطقين بالإنجليزية على متصفح سطح المكتب هو نموذج غير مكتمل — بصرف النظر عن مدى صقله وجماله. ثمة فئتان من المتطلبات يُقصّر المحللون في تحديدهما كثيراً: إمكانية الوصول (a11y) — وهي ضمان استخدام الأشخاص ذوي الإعاقات للنظام — والتدويل (i18n) — وهو تصميم النظام بحيث يمكن تكييفه مع لغات وثقافات ومناطق مختلفة دون إعادة هندسة معمارية. كلا النوعين يجب جمعهما وتوثيقهما والتحقق منهما جنباً إلى جنب مع سائر المتطلبات الوظيفية.

لماذا يتولى المحلل هذه المتطلبات؟

إصلاح إخفاقات إمكانية الوصول والتدويل بعد فوات الأوان مكلف للغاية. اكتشف نظام حجز عيادة حكومية — بعد ستة أشهر من التطوير — أن أداة اختيار التاريخ غير قابلة للوصول بلوحة المفاتيح كلياً، مما أعاق المسجّلين الذين يعتمدون على قارئات الشاشة. كان إصلاحه يستلزم إعادة بناء مكتبة المكونات وإعادة اختبار كل نموذج، مما أخّر الإطلاق ثمانية أسابيع. كان المحلل الذي كتب المتطلبات قد عامل إمكانية الوصول باعتبارها ملاحظة "مستحسنة" لا متطلباً قابلاً للاختبار. هذا الدرس يمنع تكرار هذا النمط.

توضيح مصطلحات: a11y اختصار رقمي لكلمة "accessibility" (11 حرفاً بين a وy). i18n اختصار لـ"internationalization" (18 حرفاً بين i وn). l10n اختصار لـ"localization" — التكييف الفعلي لمنطقة محددة (ترجمة النصوص، تنسيق التواريخ). التدويل هو التصميم الذي يجعل التوطين ممكناً.

أساسيات إمكانية الوصول للمحللين

المعيار الدولي الرئيسي هو WCAG 2.2 (إرشادات إمكانية الوصول لمحتوى الويب)، المنظَّم حول أربعة مبادئ: القابلية للإدراك، والقابلية للتشغيل، والقابلية للفهم، والمتانة — ويُحفظ اختصارها بـPOUR. يحتوي كل مبدأ على معايير نجاح عند مستويات: A (الحد الأدنى)، وAA (مستهدف الامتثال القياسي لمعظم الأنظمة التجارية والحكومية)، وAAA (المعزّز).

  • القابلية للإدراك: كل محتوى غير نصي له بديل نصي (نص alt للصور، تعليقات توضيحية للفيديو). اللون وحده لا يكون أبداً الوسيلة الوحيدة لنقل المعلومات. الحد الأدنى لنسبة التباين 4.5:1 للنص العادي (WCAG AA).
  • القابلية للتشغيل: جميع الوظائف قابلة للوصول عبر لوحة المفاتيح وحدها. لا تتطلب أي تفاعل أكثر من إيماءة مؤشر واحدة دون بديل لوحة مفاتيح. تنبّه مهلات الجلسة المستخدمين وتتيح التمديد.
  • القابلية للفهم: حقول النماذج لها تسميات مرئية (لا نص عنصر نائب فحسب). تُحدّد رسائل الخطأ الحقلَ، وتصف المشكلة، وتقترح تصحيحاً. يُعلَن عن لغة الصفحة في الترميز.
  • المتانة: الترميز صالح وقابل للتحليل من قِبَل التقنيات المساعدة. تُستخدم أدوار ARIA والمناطق الحية استخداماً صحيحاً — لا للزينة.

دورك كمحلل هو ترجمة هذه المبادئ إلى معايير قبول قابلة للاختبار. "يجب أن يكون النظام قابلاً للوصول" ليس متطلباً. "يجب أن تحتوي جميع حقول إدخال النماذج على تسميات مرتبطة برمجياً؛ يتحقق من ذلك فحص axe الآلي الذي لا يُرجع أي انتهاكات حرجة" — هذا هو المتطلب.

WCAG POUR Principles and Sample Success Criteria WCAG 2.2 — POUR Principles & Analyst Checklist Principle User Group Sample Acceptance Criterion (AA) P — Perceivable 1.1 – 1.4 Blind / Low vision Deaf / Hard of hearing All images shall have alt text; decorative images use alt="". Text/bg contrast ≥ 4.5:1 (verified by Colour Contrast Analyser). O — Operable 2.1 – 2.5 Motor / mobility impaired Keyboard-only users Every interactive element shall be reachable and activatable by keyboard (Tab / Enter / Space / arrows) with a visible focus indicator. U — Understandable 3.1 – 3.3 Cognitive / learning disabilities Low-literacy users Inline error messages shall identify the field by name, describe the problem, and suggest a fix. Placeholder text does not replace a visible label. R — Robust 4.1 Screen reader users Assistive technology users All interactive widgets shall use correct ARIA roles. Dynamic content updates shall announce via aria-live="polite" or equivalent.
مبادئ POUR لمعيار WCAG 2.2 مُعيَّنة على مجموعات المستخدمين ونماذج معايير القبول القابلة للاختبار لمستوى الامتثال AA.

متطلبات التدويل (i18n)

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

أبعاد التدويل الرئيسية التي يجب تحديدها:

  • اتجاه النص: اللغات العربية والعبرية والفارسية والأردية تُكتب من اليمين إلى اليسار (RTL). منصة لوجستية تتوسع في أسواق الخليج يجب أن تنص على: "يجب أن تدعم الواجهة تخطيط RTL الكامل. يجب استخدام القيم المنطقية (start/end) لا الفيزيائية (left/right). يُتحقق من انعكاس الصفحة على Chrome وFirefox."
  • تنسيقات التاريخ والوقت: اللحظة الزمنية ذاتها تظهر 06/10/2026 في أمريكا، و10/06/2026 في بريطانيا، و10 يونيو 2026 بالعربية — أو بالتقويم الهجري في سياقات معينة. حدّد مكتبة التنسيق المدركة للمنطقة وأنظمة التقويم المطلوب دعمها.
  • تنسيقات الأرقام والعملات: 1,234.56 (أمريكي) مقابل 1.234,56 (ألماني) مقابل ١٢٣٤٫٥٦ (أرقام عربية هندية). أنظمة العملات المتعددة تستلزم تحديد الدقة، وقواعد التقريب، وموضع الرمز.
  • فصل النصوص: يجب تخزين جميع النصوص المعروضة للمستخدم (تسميات، رسائل خطأ، تلميحات، قوالب بريد) في ملفات موارد، لا مُضمَّنة في الكود أبداً. حدّد صيغة المفتاح-القيمة (JSON، YAML، مصفوفات PHP) وسير عمل الترجمة.
  • التوسع النصي: الترجمات الألمانية والعربية للنصوص الإنجليزية أطول عادةً بنسبة 30-40%. يجب أن تستوعب التخطيطات هذا التوسع دون كسر. حدّد حدوداً دنيا وعليا لعدد الأحرف في عناصر UI المقيّدة كالتنقل والأزرار.
  • الفرز والترتيب الأبجدي: الترتيب الأبجدي في العربية لا يتبع ترتيب نقاط كود يونيكود. نظام يعرض قائمة أسماء منتجات عربية مرتبة يجب أن يستخدم ترتيباً مدركاً للمنطقة.
نصيحة عملية — استخدم مجسّات المنطقة في النماذج الأولية للإطار السلكي: عند مراجعة الأطر السلكية لنظام متعدد اللغات، اطلب من المصمم ملء حقول النص بأطول ترجمة محتملة، لا بنص Lorem ipsum. زر "Submit" يناسب الإنجليزية قد يتجاوز حدوده بالألمانية ("Absenden ist nicht verfügbar"). اكتشاف ذلك في مرحلة الإطار السلكي يكلف دقائق؛ إصلاحه بعد تطوير الواجهة الأمامية يكلف أياماً.

تخطيط RTL: ماذا يتغير وماذا تحدد

بالنسبة لنظام يجب أن يدعم العربية أو العبرية، يجب على المحلل توثيق ما يلي في مواصفة متطلبات واجهة المستخدم:

  • التخطيط بأكمله يُعكس أفقياً: التنقل الرئيسي ينتقل من اليسار إلى اليمين، ويتعكس ترتيب التنقل والقراءة، وتنقلب الأيقونات ذات المعنى الاتجاهي (الأسهم، مؤشرات التقدم).
  • حقول النماذج تبقى محاذاة لليسار عند كتابة أحرف لاتينية (يكتشفها المتصفح تلقائياً)، لكن التسميات والتخطيط المحيط يبقيان RTL.
  • الجداول: تدفق رؤوس الأعمدة وبيانات الصفوف من اليمين إلى اليسار. الأعمدة الرقمية (الأسعار، الكميات) يمكن إبقاؤها LTR داخل جدول RTL.
  • الصور: صورة رئيسية لشخص "ينظر نحو المحتوى" يجب انعكاسها بحيث ينظر الشخص يساراً (نحو المحتوى) في RTL.
LTR vs RTL Layout Mirroring — Wireframe Comparison Layout Mirroring: LTR (English) vs RTL (Arabic) LTR — English Logo Menu Login Home > Courses > Detail Sidebar Submit → Reading order → RTL — Arabic Logo Menu Login Home < Courses < Detail ← Submit Sidebar ← Reading order
مقارنة بين تخطيط LTR وRTL — الشريط الجانبي والتنقل وتسلسل التنقل الهرمي وأزرار الإجراءات تنعكس جميعها؛ بينما يبقى هيكل المحتوى متطابقاً.

توثيق متطلبات إمكانية الوصول والتدويل

تنتمي هذه المتطلبات إلى قسم المتطلبات غير الوظيفية (NFR) في مواصفة متطلبات البرمجيات (SRS)، أو كقسم فرعي مخصص لـإمكانية الوصول والتدويل. استخدم لغة SHALL / SHOULD / MAY ذاتها وتأكد من قابلية كل متطلب للاختبار.

NFR-A01 [WCAG AA]: يجب أن يتوافق النظام مع WCAG 2.2 المستوى AA. الاختبار: فحص axe-core الآلي على جميع الشاشات الرئيسية يُرجع صفر انتهاكات حرجة. NFR-A02 [لوحة المفاتيح]: يجب أن تكون جميع عناصر UI التفاعلية قابلة للتشغيل بلوحة المفاتيح وحدها (Tab, Shift+Tab, Enter, Space, الأسهم). NFR-I01 [RTL]: يجب أن يعرض النظام في المنطقة العربية تخطيطاً RTL معكوساً كاملاً. يجب انعكاس الأيقونات الاتجاهية. الاختبار: قائمة تحقق QA على المنطقة العربية لكل نوع شاشة. NFR-I02 [التواريخ]: يجب أن تُعرض قيم التاريخ والوقت بالتنسيق المفضل للمنطقة. الاختبار: اختبارات وحدة لمناطق en-US وen-GB وar-SA وfr-FR. NFR-I03 [النصوص]: يجب فصل جميع النصوص المعروضة للمستخدم في ملفات موارد المناطق. صفر نصوص UI مُضمَّنة في مصدر المكونات. الاختبار: البحث عن سلاسل نصية حرفية في القوالب أثناء مراجعة الكود.

جمع هذه المتطلبات من أصحاب المصلحة

نادراً ما يُفصح أصحاب المصلحة طوعاً عن احتياجات إمكانية الوصول والتدويل. يجب على المحلل السؤال مباشرة:

  • "هل من المحتمل أن يستخدم أي من مستخدميكم تقنيات مساعدة — قارئات شاشة، أو التحكم الصوتي، أو مفاتيح التبديل؟"
  • "هل لدى مؤسستكم التزام قانوني أو تنظيمي بتحقيق مستوى WCAG AA؟" (الجهات الحكومية في الاتحاد الأوروبي والمملكة المتحدة والولايات المتحدة غالباً ما تمتلك هذا الالتزام.)
  • "ما الدول أو أسواق اللغات التي سيخدمها هذا النظام الآن، وخلال العامين المقبلين؟"
  • "هل أي من الأسواق المستهدفة ناطقة أساساً بلغات RTL؟"
  • "من سيتولى إدارة الترجمات — فريق داخلي، أم وكالة ترجمة، أم مجتمع مفتوح؟"
فخ شائع للمحللين: معاملة إمكانية الوصول باعتبارها مسألة واجهة أمامية وتجاهلها في المتطلبات. حين يسأل المطور لاحقاً "ما مستوى امتثال WCAG المطلوب؟"، يجب أن تكون الإجابة موجودة بالفعل في SRS — لا أن تُرتجل في منتصف السبرينت. يكلف تعديل الامتثال مع WCAG AA بعد إطلاق المنتج عادةً 3-5 أضعاف تكلفة بنائه منذ البداية.

التحقق من إمكانية الوصول والتدويل في النماذج الأولية

حتى النموذج الأولي HTML عالي الدقة يمكن تقييمه جزئياً مقابل متطلبات إمكانية الوصول والتدويل قبل بدء التطوير:

  • شغّل تدقيق axe DevTools أو Lighthouse على النموذج الأولي القابل للنقر لاكتشاف التسميات المفقودة وإخفاقات التباين والمعالم الناقصة.
  • استخدم إضافة متصفح (مثل NoCoffee Vision Simulator) لمحاكاة ضعف البصر وعمى الألوان والرؤية الضبابية على شاشات النموذج.
  • اختبر النموذج بقارئ شاشة (NVDA + Firefox على ويندوز، VoiceOver + Safari على macOS) — تنقّل عبر التدفق الرئيسي بعيون مغلقة.
  • للتدويل، بدّل النموذج إلى أطول ترجمة وتأكد من عدم تجاوز العناصر حدودها. لـRTL، طبّق dir="rtl" على عنصر جذر النموذج وافحص التخطيط.

وثّق النتائج بوصفها مشكلات تقييم النموذج الأولي مع درجة الخطورة (حرجة، رئيسية، ثانوية) والمعيار WCAG أو متطلب التدويل المنتهَك. تصبح هذه المدخلات بيانات متراكم السبرينت قبل كتابة سطر واحد من كود الإنتاج.