ما هو التصميم العالمي؟ مقدمة للتصميم العالمي

إذا كنت تدير مدونة أو نشاطًا تجاريًا عبر الإنترنت، فستحتاج إلى التأكد من أن موقعك يتوافق مع أحدث معايير التصميم.
وتشمل هذه مبادئ إمكانية الوصول التي تنطبق على جميع مواقع الويب. ومع ذلك، ربما تتساءل: ما هو التصميم الشامل، وكيف يمكنني استخدامه على موقع WordPress الخاص بي؟
ولحسن الحظ، التصميم العالمي هو مفهوم واضح ومباشر. يتعلق الأمر في الأساس بإنشاء مواقع ويب يمكن للمستخدمين ذوي القدرات والاحتياجات المختلفة الوصول إليها.
بمجرد فهم كيفية عمله، يمكنك دمجه في موقعك لإنشاء تجربة مستخدم أكثر شمولاً.
ما هو التصميم العالمي؟
WordPress عبارة عن منصة سهلة الاستخدام تمكنك من إنشاء موقع ويب مخصص دون الحاجة إلى تعلم التعليمات البرمجية.
ومع ذلك، من المهم أن تتبع كل صفحة على موقعك مبادئ التصميم الأساسية، مثل العالمية. لذا، دعونا نبدأ بالإجابة على السؤال، ما هو التصميم العالمي؟
في تطوير الويب، التصميم الشامل هو ممارسة إنشاء مواقع ويب يمكن لجميع المستخدمين الوصول إليها واستخدامها، بغض النظر عن قدراتهم البدنية والمعرفية.
ومع ذلك، يمكنك أيضًا القول أن التصميم العالمي يأخذ في الاعتبار المستخدمين من خلفيات جغرافية وثقافية مختلفة.
لكي نفهم بالضبط ما هو التصميم العالمي، دعونا نلقي نظرة على إمكانية الوصول إلى الويب. من الناحية النظرية، يجب على كل موقع ويب توفير الوصول المتساوي إلى محتواه.
وهذا يعني أنه حتى المستخدمين الذين يعانون من إعاقات بصرية أو إعاقات أخرى يجب أن يكونوا قادرين على التفاعل مع الموقع.
تم إنشاء إرشادات إمكانية الوصول إلى محتوى الويب (WCAG) لمساعدة مطوري الويب ومالكي المواقع على الالتزام بهذه المعايير.
تعطي WCAG أيضًا الأولوية للتضمين في تصميم الويب، ومعالجة قضايا مثل العمر واللغة ومعرفة الكمبيوتر والموقع الجغرافي والثقافة.
ولذلك، فإن التصميم الشامل يتضمن كلاً من إمكانية الوصول والشمول. وهذا يعني أنه يجب أن يكون المستخدمون قادرين على الوصول إلى الموقع والتفاعل معه (بما في ذلك أي شخص من ذوي الإعاقة) وفهم المحتوى (بغض النظر عن خلفيتهم اللغوية).
كيفية تنفيذ التصميم العالمي في ووردبريس
الآن بعد أن عرفنا ما هو التصميم الشامل، دعونا نلقي نظرة على كيفية تنفيذه على موقع WordPress الخاص بك.
- استخدم موضوعات جاهزة للترجمة
- تمكين التنقل باستخدام لوحة المفاتيح
- تجنب اللغة الصعبة والفروق الدقيقة
- إضافة نص بديل إلى الصور
- استخدم تباينًا كافيًا للألوان وخطوطًا واضحة
1. استخدم المواضيع الجاهزة للترجمة 🎨
كما ذكرنا سابقًا، جزء من دمج التصميم العالمي هو ضمان قدرة المستخدمين على فهم المحتوى، حتى لو كانوا يتحدثون لغة مختلفة. بالطبع، هذا لا يعني أنه يجب عليك ترجمة موقعك يدويًا إلى لغات متعددة.
يعد إنشاء موقع WordPress متعدد اللغات أمرًا سهلاً للغاية. ومع ذلك، قبل البدء، ستحتاج إلى التأكد من أنك تستخدم قالبًا جاهزًا للترجمة.
هناك الكثير من السمات المجانية التي توفر هذه الميزة. إذا كنت تتصفح دليل سمات WordPress، فيمكنك النقر فوق الزر “تصفية الميزات” وتحديد “جاهز للترجمة”:

من المهم ملاحظة أن اختيار موضوع جاهز للترجمة لن يجعل موقعك متاحًا تلقائيًا بلغات أخرى. ومع ذلك، سيتم ترميز الموضوع بطريقة تمكن من ترجمة عناصره المختلفة (مثل الأزرار والعناوين).
قد ترغب أيضًا في تحديد دعم لغة RTL كمرشح للميزات. سيمكنك هذا من ترجمة موضوعك إلى لغة من اليمين إلى اليسار مثل العربية والعبرية والفارسية.
إذا كنت بحاجة إلى مثل هذا الموضوع، فراجع Neve . إنها واحدة من المواضيع الأكثر شعبية في الدليل بشكل عام.
بمجرد اختيار موضوع جاهز للترجمة، يمكنك بسهولة ترجمة موقعك باستخدام مكون إضافي مثل TranslatePress .
تتكامل هذه الأداة مع خدمة الترجمة من Google، لذا يمكنك إعداد الترجمة التلقائية باستخدام مفتاح Google API الخاص بك.
2. تمكين التنقل عبر لوحة المفاتيح
أحد الجوانب المهمة للتصميم الشامل هو تلبية احتياجات المستخدمين ذوي الإعاقات الجسدية. على سبيل المثال، قد لا يتمكن المستخدمون الذين يعانون من اضطرابات عصبية من استخدام الماوس.
ولذلك، ستحتاج إلى التأكد من أنه يمكنهم التنقل بسهولة عبر موقع الويب الخاص بك باستخدام لوحة المفاتيح.
هناك العديد من أدوات إمكانية الوصول التي توفر هذه الميزة، بما في ذلك إمكانية الوصول إلى الويب بواسطة AccessiBe .
يستخدم هذا البرنامج المساعد تطبيقًا مدعومًا بالذكاء الاصطناعي لتمكين التنقل باستخدام لوحة المفاتيح على موقعك.
سيقوم برنامج الذكاء الاصطناعي هذا بتحليل بنية موقعك وإضافة وظائف لوحة المفاتيح إلى جميع العناصر ذات الصلة، مثل الأزرار والنماذج والقوائم.
3. تجنب اللغة الصعبة والفروق الدقيقة
يمكن أن ينطبق التصميم العالمي أيضًا على نوع اللغة المستخدمة في الموقع. إذا كنت تلبي احتياجات جمهور عالمي، فلن يكون جزء كبير من زوار موقعك على دراية بالتعابير أو الفروق الدقيقة الخاصة بالمنطقة.
لذلك، قد ترغب في الالتزام باللغة الإنجليزية “العالمية”.
بالإضافة إلى ذلك، سيكون لدى العديد من عملائك مستوى متوسط في اللغة الإنجليزية، لذا ستحتاج إلى استخدام لغة واضحة وموجزة.
حتى لو كان المستخدم يتحدث الإنجليزية كلغة أولى، فقد لا يكون على دراية ببعض التعبيرات الأمريكية أو التعبيرات البريطانية.
بالإضافة إلى ذلك، سيأتي عملاؤك من خلفيات متنوعة. على سبيل المثال، إذا كان لديك موقع خاص بالقانون، فقد يكون المستخدمون الحاصلون على مستوى تعليمي أعلى على دراية ببعض المصطلحات القانونية. ومع ذلك، سوف يحتاج البعض إلى شرح لهذه المفاهيم.
ومن المهم أيضًا أن تكون جميع النصوص الموجودة في العناصر الرئيسية لموقعك، مثل القوائم وأزرار الحث على اتخاذ إجراء، مكتوبة بلغة واضحة.
سيؤدي ذلك إلى تسهيل الوصول إلى المحتوى الخاص بك، مما يتيح للمستخدمين فهم بنية موقعك.
4. إضافة نص بديل إلى الصور
النص البديل (اختصار للنص البديل) هو عادةً جملة تصف صورة على الصفحة. وفي حين أن هذا يساعد محركات البحث على فهم محتويات تلك الصفحة بشكل أفضل، فإنه يجعل أيضًا صورك في متناول المستخدمين ذوي الإعاقات البصرية.
وذلك لأن النص البديل تتم قراءته بصوت عالٍ بواسطة برامج قراءة الشاشة.
من الناحية المثالية، يجب عليك إضافة نص بديل إلى كل صورة على موقع الويب الخاص بك. العملية سهلة جدا. في الواقع، يمكنك إضافته مباشرة من محرر الكتل.
ما عليك سوى تحديد الصورة، ثم انتقل إلى إعدادات الكتلة واكتب الوصف في حقل النص البديل:

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

من الناحية المثالية، ستحتاج إلى استخدام خلفية فاتحة ونص داكن (أو العكس). يمكنك أيضًا استخدام مدقق التباين WebAIM لاختبار الألوان:

توضح لك هذه الأداة نسبة التباين بين الألوان التي اخترتها. وسيخبرك أيضًا ما إذا كانوا يستوفون إرشادات إمكانية الوصول إلى WCAG.
تقترح WCAG حدًا أدنى لنسبة التباين يبلغ 4.5:1 للنص العادي، و3:1 للنص الكبير لضمان الوضوح الأمثل.
المصدر: themeisle
شاهد المزيد: