المساعدة
تسجيل الدخول

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

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

تم إنشاء الإرشادات أدناه مع وضع إرشادات إمكانية الوصول إلى محتوى الويب (WCAG) في الاعتبار. نظرًا لوجود العديد من العوامل التي يجب مراعاتها عند إنشاء موقع إلكتروني يسهل الوصول إليه، فإن مجرد اتباع الإرشادات أدناه لا يضمن أن متجرك الإلكتروني يسهل الوصول إليه بالكامل. يمكنك معرفة المزيد حول إمكانية الوصول إلى الويب من خلال زيارة موقع WCAG الإلكتروني، أو من خلال الاطلاع على الموارد المدرجة أدناه.

في هذه الصفحة

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

من المهم أن يكون النص الموجود في متجرك الإلكتروني قابلاً للقراءة للعملاء الذين يعانون من ضعف البصر أو الذين يجدون صعوبة في قراءة كتل نصية كثيفة.

تباين الألوان

عند تعديل الألوان في متجرك الإلكتروني، تأكد من أن جميع نصوصك يسهل وصول العملاء المصابين بعمى الألوان أو ضعاف البصر إليها. يعتمد هؤلاء العملاء على تباين الألوان المناسب للتمييز بصريًا بين الأشياء. يمكنك استخدام أداة نسبة التباين عبر الإنترنت للتحقق من تباين الأجزاء المختلفة في متجرك.

في المثال أدناه، تبلغ نسبة تباين النص 2.4:1 مقابل خلفيته، ويصعب على بعض العملاء قراءته.

كتلة من النص الرمادي الفاتح على خلفية بيضاء صلبة.

في المثال التالي، تبلغ نسبة تباين النص 4.8:1، وتسهل قراءته على العديد من العملاء.

كتلة من النص الرمادي الداكن على خلفية بيضاء صلبة.

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

  • لون النص الأساسي ونص الأزرار له نسبة تباين تبلغ 4.5:1 على الأقل مقابل خلفيته.
  • لون العناوين والنصوص الكبيرة الأخرى (حجم الخط 24 بكسل فأكثر) له نسبة تباين تبلغ 3:1 على الأقل مقابل خلفيته.
  • لون جميع النصوص فوق الصور، بما في ذلك عروض الشرائح واللافتات ومقاطع الفيديو، له نسب تباين كافية مقابل خلفيته. بالنسبة للنص الكبير (حجم الخط 24 بكسل فأكثر)، يكون التباين 3:1 على الأقل. وبالنسبة للنص الأصغر، يكون التباين 4.5:1 على الأقل.
  • لون العناصر غير النصية، بما في ذلك حدود الإدخال والأيقونات، له نسبة تباين تبلغ 3:1 على الأقل مقابل خلفيته.

عناوين النص

عند إضافة عناوين إلى صفحتك باستخدام محرر النص المنسق، من المهم الاحتفاظ بها بترتيب تسلسلي (1 - 6). تُستخدم العناوين بواسطة التقنيات المساعدة للإبلاغ عن كيفية تنظيم محتوى الصفحة. قد يكون تخطي المستويات، مثل عنوان من المستوى 2 متبوعًا بعنوان من المستوى 4، أمرًا مربكًا للمستخدمين. استخدم الإرشاد التالي:

  • تُستخدم العناوين بترتيب تسلسلي ولا تتخطى المستويات.

حجم النص ومحاذاته

عند تعديل إعدادات أسلوب الطباعة في قالبك، تأكد من أن النص كبير بما يكفي ليتمكن العملاء من قراءته بسهولة.

يجب أن يكون للنص أيضًا مسافات متسقة بين الكلمات والأحرف لتسهيل قراءته. في المثال أدناه، محاذاة النص مضبوطة، مما يخلق مسافات غير متسقة بين الكلمات.

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

في المثال التالي، النص محاذٍ لليسار، مما يخلق مسافات متسقة بين الكلمات.

كتلة من النص محاذاة لليسار. توجد مسافة متسقة بين كل كلمة.

عند تخصيص حجم النص ومحاذاته، استخدم الإرشادات التالية:

  • الحد الأدنى لحجم خط النص الأساسي يعادل 16 بكسل.
  • محاذاة النص غير مضبوطة. فالنص المضبوط يخلق مسافات غير متسقة بين الكلمات.

الروابط النصية

يجب وضع خط تحت الروابط النصية أو تمييزها بنمط مرئي مختلف مقارنة بالنص العادي. نظرًا لأن بعض العملاء يواجهون صعوبة في رؤية الألوان، فلا يمكنك الاعتماد على تغيير اللون وحده لتمييز الرابط عن النص العادي.

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

إذا قمت بتعديل ورقة الأنماط الخاصة بقالبك، فتأكد من عدم إزالة أنماط الروابط النصية. استخدم الإرشادات التالية:

  • إما أن يوضع خط تحت الروابط النصية أو يكون لها مميز مرئي آخر بخلاف اللون فقط ليتمكن العملاء من تمييز الروابط عن النص العادي.
  • تُفتح الروابط النصية في علامة التبويب نفسها عند النقر عليها.

النص البديل للصور

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

يمكنك إضافة نص بديل لصور منتجاتك من مسؤول Shopify. كما يمكنك إضافة نص بديل للصور الأخرى في قالبك من محرر القوالب.

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

صديقان يرتديان حقائب ظهر ويضعان أذرعهما حول بعضهما البعض، وينظران إلى المحيط

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

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

إمكانية الوصول لعروض الشرائح ومقاطع الفيديو

عند إضافة مقاطع فيديو إلى متجرك الإلكتروني، تأكد من مراعاة احتياجات العملاء الذين يعانون من ضعف البصر، أو العملاء الصم أو ضعاف السمع، أو العملاء الذين قد يكونون عُرضة لـ اضطرابات دهليزية.

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

قد يشعر العملاء الذين يعانون من اضطرابات دهليزية بالدوار مع المحتوى المتحرك. ولهذا السبب، من المهم ألا يتم تشغيل عروض الشرائح ومقاطع الفيديو تلقائيًا، وأن يتمكن العميل من التحكم في عرض الشرائح باستخدام أزرار التحكم.

عروض الشرائح

عند إضافة عرض شرائح إلى متجرك الإلكتروني، استخدم الإرشادات التالية:

  • لا يتم تشغيل عروض الشرائح تلقائيًا.
  • إذا تم تشغيل عروض الشرائح تلقائيًا، فيجب أن تتضمن عناصر تحكم في عرض الشرائح يمكن للعملاء استخدامها لإيقاف العرض مؤقتًا، أو تقديمه، أو إيقافه تمامًا.

مقاطع الفيديو

عند إضافة مقطع فيديو إلى متجرك الإلكتروني، استخدم الإرشادات التالية:

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

تنطبق هذه الإرشادات أيضًا على مقاطع الفيديو الموجودة ضمن عرض الشرائح.

دعم لوحة المفاتيح

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

شاشة تسجيل دخول العميل في متجر إلكتروني تعرض حقول نماذج للبريد الإلكتروني وكلمة المرور. حقل البريد الإلكتروني محدد باللون الأزرق.

إذا قمت بتعديل ورقة أنماط قالبك، فتأكد من عدم إزالة نمط تركيز لوحة المفاتيح من أي من عناصر الصفحة. استخدم الإرشاد التالي:

  • تحتوي جميع عناصر الصفحة التفاعلية على مؤشر مرئي واضح عندما يكون تركيز لوحة المفاتيح عليها. وتشمل هذه العناصر الروابط، والأزرار، وحقول النماذج.

الموارد

لمعرفة المزيد حول إمكانية الوصول إلى الويب للمواضيع التي تمت مناقشتها في هذه المقالة، راجع الموارد التالية.

موارد تباين الألوان

موارد النصوص

موارد النص البديل

موارد عروض الشرائح ومقاطع الفيديو

موارد دعم لوحة المفاتيح

في هذا القسم