قائمة تحقق لتطوير موقع عربي

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

تفترض القائمة موقعًا بالعربية والإنجليزية في قاعدة شيفرة واحدة، وأغلب بنودها يصلح لغيرها من اللغات المكتوبة من اليمين إلى اليسار. ومبادئ التصميم البصري في مقال [تصميم المنتجات ثنائية اللغة](/blog/designing-bilingual-rtl-products)، والتخطيط الأوسع في دليل [المنتجات ثنائية اللغة بالعربية والإنجليزية](/guides/bilingual-arabic-english-products).

اللغة والمحتوى

• **اكتب بالعربية مباشرة وبالفصحى المعاصرة.** الترجمة الحرفية تحتفظ بترتيب الجملة الإنجليزية فيأتي النص متكلفًا، ولا تُستعمل العامية إلا في مواضع قصيرة ومقصودة.
• **خطط للغتين قبل البناء.** قرر أي الصفحات توجد باللغتين وأيها يخص سوقًا واحدًا، حتى لا يقود رابط إلى صفحة غير موجودة.
• **اعتمد قائمة مصطلحات واحدة.** مصطلح عربي متفق عليه لكل منتج وميزة وباقة، وقاعدة للأسماء التي تبقى بالحروف اللاتينية، يبقيان الموقع متسقًا.
• **اختر نوع الأرقام مرة واحدة.** الأرقام الغربية (0 إلى 9) أو الهندية الشرقية، وطبّقه في كل مكان، فالجمع بينهما في صفحة واحدة يبدو إهمالًا.
• **أبعد الكلمات عن الصور.** النص داخل الصورة لا يُترجم ولا يُبحث فيه ولا يقرؤه قارئ الشاشة.
• **ترجم التفاصيل الصغيرة.** النص البديل وعناوين الأزرار ورسائل الخطأ وشريط ملفات الارتباط وصفحة 404 والرسائل البريدية هي ما يُترك بالإنجليزية في الغالب.

التخطيط والعكس

• **اضبط lang وdir في كل صفحة.** السمتان lang=ar وdir=rtl على وسم html تخبران المتصفح وقارئ الشاشة ومحركات البحث بلغة الصفحة واتجاهها.
• **اكتب التخطيط بخصائص CSS المنطقية،** أي البداية والنهاية بدل اليسار واليمين، لتخدم ورقة أنماط واحدة الاتجاهين. ثم اقلب ما لا ينقلب وحده: التحويلات والتدرجات والظلال ومواضع الخلفيات.
• **اعكس بالتقدير.** تنعكس الأسهم وعلامات التقدم والخطوات، ولا تنعكس الشعارات والساعات والصور. وتشرح صفحة [التصميم العربي من اليمين إلى اليسار](/services/ui-ux-design/arabic-rtl-design) القاعدة.
• **اعزل النص المختلط.** ضع الأسماء والرموز المُدرجة داخل وسم bdi، واستعمل dir=auto في الحقول التي يكتب فيها المستخدم، وأبقِ البريد الإلكتروني والهاتف وعناوين الويب من اليسار إلى اليمين. وإلا قفزت علامات الترقيم إلى طرف الجملة الخطأ.
• **اعكس الإيماءات والمنزلقات،** واختبر الشيفرة التي تقرأ مواضع التمرير، لأن التمرير الأفقي يتصرف بشكل مختلف في الحاويات من اليمين إلى اليسار.
• **افحص أدوات الأطراف الثالثة.** المحادثة والخرائط والحجز ونماذج الدفع كثيرًا ما تبقى من اليسار إلى اليمين أو لا تدعم العربية.

الخطوط والطباعة

• **اختر عائلة خط تدعم العربية فعلًا** وبنسخة لاتينية تطابقها في الوزن والحجم. فالخط البديل الذي يسد الفجوات يجعل الأسطر المختلطة غير متناسقة.
• **لا تضف تباعدًا بين الحروف العربية، وتجنب المائل والأحرف الكبيرة.** التباعد يقطع وصل الحروف، وليس في العربية مائل ولا أحرف كبيرة.
• **امنح الأسطر مساحة.** يصلح نحو 1.6 إلى 1.8 ضعف حجم الخط نقطة بداية للنص الأساسي، وتحتاج العناوين أكثر، لأن علامات العربية تعلو السطر وتنزل عنه فتُقتطع في الصناديق الضيقة.
• **قصّ الخطوط بعناية.** تتغير هيئة الحرف بحسب موضعه، فالمجموعة الجزئية التي تحذف بيانات التشكيل الحرفي تقطع الوصل. أبقِ هذه البيانات، وافصل اللاتينية والعربية في ملفين بخاصية unicode-range.
• **حمّل الخطوط دون قفزات.** استعمل WOFF2، وحمّل مسبقًا الوزن الظاهر في أعلى الصفحة، واضبط font-display، واختر خطًا بديلًا بمقاييس قريبة حتى لا يتحرك النص حين يصل الخط.

النماذج والبيانات

• **اقبل الأسماء العربية.** النمط الذي يسمح بالحروف اللاتينية وحدها يرفض عملاء حقيقيين. اسمح بحروف أي لغة والمسافات وعلامات الاسم الشائعة.
• **اقبل الأرقام الهندية الشرقية وحوّلها.** تكتبها لوحات المفاتيح العربية. حوّلها إلى 0 إلى 9 قبل التحقق أو التخزين، وإلا فشل التحقق من الهاتف والبطاقة.
• **وحّد الكتابة قبل البحث والمقارنة.** يكتب الناس الكلمة الواحدة بصور مختلفة للألف، والياء أو الألف المقصورة، والتاء المربوطة أو الهاء، وبتشكيل أو دونه، وبالمدّ أو دونه. اجمعها في صورة واحدة ليجد البحث الكلمة.
• **خزّن النص بترميز UTF-8 في كل خطوة.** خطوة واحدة بترميز آخر تحوّل العربية إلى علامات استفهام. وقد تحتاج ملفات CSV المصدّرة إلى علامة ترتيب البايت حتى يقرأها Excel قراءة صحيحة.
• **نسّق بأدوات اللغة.** استعمل واجهات Intl في المتصفح وحدد نظام الترقيم صراحة، مثل الامتداد u-nu-latn، فالإعدادات الافتراضية تختلف بين اللغات العربية المحلية.
• **اترك العناوين مرنة.** كثير من الأماكن تستعمل صندوق بريد أو منطقة أو معلمًا أو رمز عنوان وطني بدل الشارع والرمز البريدي، فلا تجعل كل الحقول إلزامية.
• **راسل القارئ بلغته.** تحتاج الرسائل البريدية إلى dir=rtl أيضًا. والرسالة النصية بالعربية تستعمل ترميزًا مختلفًا وتتسع لنحو 70 حرفًا مقابل 160 في النص اللاتيني العادي، فاجعل رموز التحقق قصيرة.

الروابط وhreflang والبحث

• **امنح كل لغة رابطها.** الصفحة التي تبدّل اللغة بملف ارتباط أو بالموقع تجعل محركات البحث ترى نسخة واحدة فقط.
• **اربط كل نسخة ببدائلها بوسوم hreflang.** تذكر كل صفحة نفسها وكل ترجماتها، والروابط متبادلة، وقيمها رموز صحيحة مثل ar وen، أو ar-SA لبلد بعينه. وأضف x-default للصفحة التي تظهر حين لا تتطابق أي لغة.
• **اجعل الرابط المرجعي يشير إلى صفحته.** الرابط المرجعي في الصفحة العربية الذي يسمّي الصفحة الإنجليزية يطلب من محركات البحث تجاهل العربية.

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

الأداء

• **اختبر على هاتف متوسط وشبكة أبطأ،** لا على حاسوب المطور وحده. فكثير من الزوار يتصفحون بالهاتف.
• **ضع ميزانية لـ JavaScript والخطوط.** الحزم الثقيلة تضر أكثر على الهواتف المتوسطة، فحمّل رسائل اللغة الفعالة فقط وأوزان الخط التي تستعملها فقط.
• **حدد أحجام الصور واحجز مساحتها** حتى لا يتحرك التخطيط في أي اتجاه.
• **قدّم المحتوى من مكان قريب من قرّائك.** استعمل شبكة توصيل محتوى لها حضور في منطقتك أو قربها، وقس زمن الاستجابة الفعلي من هناك.
• **قس كل لغة على حدة.** قد يؤثر الخط العربي الأثقل في Largest Contentful Paint وCumulative Layout Shift لصفحات العربية وحدها.

إمكانية الوصول

• **اعتمد [WCAG](/glossary/wcag) 2.2 بمستوى AA أساسًا.** فهو المعيار الذي تستند إليه مراجعات إمكانية الوصول.
• **افحص التباين في النص العربي.** الخطوط الرفيعة والنقاط الصغيرة تفقد وضوحها، فاجعل التباين 4.5 إلى 1 على الأقل في النص الأساسي واختبره بالأحجام الحقيقية.
• **علّم المقاطع الأجنبية بـ lang.** اسم المنتج الإنجليزي داخل جملة عربية يحتاج lang=en ليبدّل قارئ الشاشة صوته.
• **اختبر بقارئات شاشة حقيقية.** VoiceOver وTalkBack وNVDA بأصوات عربية تُظهر كيف يُسمع ترتيب القراءة والتسميات.
• **اجعل مفاتيح الأسهم تطابق الاتجاه البصري** في التبويبات والمنزلقات والقوائم، وأبقِ ترتيب التركيز موافقًا للتخطيط.
• **اجعل أهداف اللمس كبيرة بما يكفي.** يطلب WCAG 2.2 أهدافًا لا تقل عن 24 في 24 بكسل CSS مع بعض الاستثناءات. والأكبر أرحم على الهواتف.

الاختبار والإطلاق

• **اختبر على أجهزة حقيقية** باللغتين: iPhone وAndroid ومتصفحات سطح المكتب. فالخطوط ولوحات المفاتيح تختلف بين الأجهزة.
• **شغّل كل قالب بمحتوى صعب:** أطول عنوان، واسم بالعربية واللاتينية، ورقم طويل، وحالات الفراغ والخطأ. فالتخطيط ينكسر عند الأطراف.
• **اطلب من قارئ عربي أصلي مراجعة الموقع** بقائمة مهام قصيرة. وحده يلتقط الصياغة المتكلفة والمصطلحات الخاطئة والعيوب الصغيرة في النص المختلط.
• **افحص hreflang والروابط المرجعية بزاحف.** رابط عودة مفقود واحد قد يجعل الزوج مُتجاهَلًا.
• **افحص الرسائل البريدية وملفات PDF والطباعة** مثل الفواتير والإيصالات من اليمين إلى اليسار.
• **راجع أساسيات الإطلاق باللغتين:** إعادة التوجيه من الروابط القديمة، وصفحة 404، وملف robots.txt وخريطة الموقع، ومعاينات المشاركة، وشريط الموافقة، والتحليلات مفصولة بحسب اللغة. وتغطي [قائمة الأمان الافتراضي للويب](/blog/secure-by-default-web-checklist) بروتوكول HTTPS والترويسات.
• **عيّن مسؤولًا عن كل لغة** بعد الإطلاق. فالموقع العربي يتقادم حين لا يُحدَّث إلا الإنجليزي.