تساعد إمكانية الوصول إلى المواقع الزوار على الوصول إلى المحتوى وإتمام الإجراءات باستخدام أدوات مختلفة. يساعدك هذا الدليل، استنادًا إلى WCAG، على تكييف اختبارات لوحة المفاتيح والتباين والنص البديل والنماذج وسهولة القراءة مع موقع أعمالك.
قد يعجز زائر عن الوصول إلى القائمة باستخدام لوحة المفاتيح، أو عن سماع اسم حقل في النموذج، أو عن تمييز السعر بسبب ضعف التباين. تتسبب هذه العوائق في انقطاع العملاء المحتملين عن مسار طلب عرض السعر أو حجز الموعد أو الشراء.
تساعد إمكانية الوصول إلى المواقع الأشخاص ذوي القدرات وظروف الاستخدام المختلفة على إتمام الإجراءات في موقعك. ولا يقتصر الأمر على الزوار الذين يستخدمون قارئات الشاشة؛ فالإصابة المؤقتة وضوء الشمس الساطع والشاشة الصغيرة والاتصال البطيء تؤثر أيضًا في تجربة الوصول.
ما الذي تقدّمه إمكانية الوصول إلى الموقع لأعمالك؟
WCAG إطار دولي يُعرف باسم إرشادات إتاحة محتوى الويب. ويوفّر WCAG 2.2 نقاط تحقّق مشتركة للمصممين وفرق المحتوى والمطورين. وتعتمد معظم مواقع الأعمال المستوى AA مرجعًا لهدفها الأولي.
- قابلية الإدراك: ينبغي أن يتمكن الزائر من فهم النصوص والصور والوسائط باستخدام حواس مختلفة.
- قابلية التشغيل: ينبغي أن يتمكن الزائر من إتمام كل مهمة باستخدام الفأرة أو لوحة المفاتيح أو التقنيات المساعدة.
- قابلية الفهم: ينبغي أن توضح العناوين والتعليمات ورسائل الخطأ المسار الواجب اتباعه.
- التوافق التقني: ينبغي أن تعمل الشيفرة بصورة متسقة مع المتصفحات والتقنيات المساعدة.
تتعلق هذه المبادئ بالمكوّنات أكثر من تعلقها بالصفحات منفردة. افحص أولًا العناصر المتكررة، مثل القائمة والنافذة المنبثقة والبحث والتصفية والنموذج. وقيّم المتطلبات القانونية بصورة مستقلة وفق عقدك وقطاع عملك.
لا يوفّر المستوى AA وحده أدلة كافية لإصدار بيان بشأن إمكانية الوصول. احتفظ بسجلات الاختبارات لكل صفحة ومكوّن، وأدرج كل ميزة جديدة ضمن نطاق هذه السجلات.
حدّد نطاق المراجعة وفق رحلة الزائر
لا تبدأ المراجعة بجميع الصفحات. اختر مسارات تمثيلية تبدأ بما يريد الزائر إنجازه لدى أعمالك. ففي منشأة خدمية، تكتسب أهميةً كلٌّ من استمارة طلب عرض السعر ورابط الاتصال الهاتفي وخطوة حجز الموعد. أما في موقع للبيع، فتبرز خطوات البحث عن المنتجات والتصفية والسلة والدفع.
في مسار طلب عرض السعر مثلًا، يفتح الزائر صفحة الخدمة ويطّلع على الباقة ويرسل النموذج. يجب أن تعمل العناوين والروابط وحقول الاختيار ورسائل الخطأ معًا في هذا المسار؛ فلا يكفي فحص النموذج وحده.
دوّن نقاط البداية واتخاذ القرار والإتمام في كل مسار. واجمع الصفحات التي تستخدم القالب نفسه في مجموعات. بهذه الطريقة، ستتمكن من رؤية أثر الخطأ في مكوّن واحد على الموقع بأكمله.
لا تحصر المراجعة في الصفحة الرئيسية. فقد تقطع صفحة نتائج البحث أو السلة الفارغة أو صفحة الخطأ مسار الإجراء أيضًا. واختبر تفضيلات ملفات تعريف الارتباط في سيناريو مستقل.
- عنوان الصفحة واسم المكوّن.
- الإجراء الذي يريد الزائر إتمامه.
- الجهاز أو التقنية المساعدة التي يظهر عند استخدامها العائق.
- معيار WCAG ذي الصلة وأولوية المعالجة.
- الشخص المسؤول وشروط القبول والتاريخ المستهدف.
في المشاريع الجديدة، أضف هذه البنود إلى موجز متطلبات تصميم الموقع. بذلك تعمل فرق التصميم والتطوير وفق معايير القبول نفسها.
أكمل جميع الإجراءات باستخدام لوحة المفاتيح
يتنقل الأشخاص الذين لا يستخدمون الفأرة في الصفحة بأكملها عبر لوحة المفاتيح. ويُعد اختبار لوحة المفاتيح أسرع خطوة للفحص اليدوي ضمن مراجعة إمكانية الوصول. أعد تحميل الصفحة وأكمل الإجراء المستهدف باستخدام مفاتيح Tab وShift+Tab وEnter ومفتاح المسافة وEsc فقط.
تظهر معظم أخطاء المكوّنات المخصّصة في هذه المرحلة. فكل عنصر يبدو بصريًا كزر يجب أن يتيح الإجراء نفسه عبر لوحة المفاتيح. وينبغي ألا ينتقل تركيز لوحة المفاتيح إلى عنصر غير مرئي أو مغلق.
اجعل تسلسل التركيز واضحًا
يجب أن يحمل كل عنصر قابل للتركيز مؤشر تركيز واضحًا. ويجب أن يتوافق ترتيب التركيز مع ترتيب القراءة على الشاشة. وينبغي ألا يحجب إشعار ملفات تعريف الارتباط أو نافذة المحادثة الثابتة إطار التركيز.
- ميّز لون التركيز عن الخلفية.
- قارن ترتيب التركيز بالترتيب البصري.
- تأكّد من أن التركيز لا ينتقل إلى عناصر غير مرئية عند تحميل الصفحة.
حافظ على عودة التركيز في المكوّنات المنبثقة
تحتاج القوائم المنسدلة وعلامات التبويب والنوافذ المشروطة، أي مربعات الحوار التي تظهر على الشاشة، إلى اختبار مستقل. يجب أن يشغّل مفتاحا Enter والمسافة الأزرار، وأن يغلق Esc الطبقة المنبثقة. وأثناء فتح النافذة المشروطة، يجب أن يبقى التركيز داخلها. وعند إغلاقها، يجب أن يعود التركيز إلى الزر الذي فتحها.
أضف رابطًا لتجاوز العناصر والانتقال إلى المحتوى الرئيسي عند أول نقطة تنقّل بلوحة المفاتيح في الصفحة. اجعل الرابط مرئيًا عند حصوله على التركيز. واستخدم عنصر button، أي الزر، للعناصر التي تنفّذ إجراءً عند النقر. لا تكتفِ بإضافة حدث نقر إلى عنصر div، أي الحاوية العامة.
فحص تباين الألوان وسهولة القراءة
يجب ألا يكون اللون الإشارة الوحيدة التي تنقل المعنى. لا تحدّد الحقل غير الصحيح بإطار أحمر فقط؛ بل أضف نصًا يوضح الخطأ أو أيقونة أو عنوانًا للحقل. واتبع النهج نفسه مع معلومات المخزون والخصومات والحقول الإلزامية.
قِس نسب التباين لكل مكوّن
للمستوى AA، استهدف نسبة تباين لا تقل عن 4,5:1 للنص العادي، ولا تقل عن 3:1 للنص الكبير. وتحقّق أيضًا من نسبة 3:1 لحدود الأزرار وحدود حقول النماذج والرموز الرسومية.
افحص التباين بصورة مستقلة في برنامج التصميم وفي الصفحة الفعلية. فالطبقات الشفافة والخلفيات المصوّرة وخيارات الوضع الداكن تغيّر المظهر النهائي. لا تعتمد على رمز اللون في ملف التصميم وحده.
ارفع مستوى تكبير المتصفح إلى %200. وتحقّق من عدم تداخل النصوص ومن عدم الاضطرار إلى التمرير الأفقي. ولا تعتمد على اختلاف اللون وحده في الروابط داخل النص؛ بل أضف خطًا سفليًا أو إشارة بصرية أخرى.
قسّم النص بالعناوين، واكتب فقرات قصيرة. وادعم ارتفاعًا للسطر لا يقل عن 1,5 ضعف حجم الخط. ولا تحشر النص داخل صناديق ذات ارتفاع ثابت.
وضّح الغرض من الصورة بالنصوص البديلة
ينقل قارئ الشاشة وظيفة الصورة أو معلوماتها من خلال النص البديل. ولا يصف النص البديل كل بكسل في الصورة، بل ينقل المعلومات التي ينبغي للزائر فهمها من خلالها.
اتخذ القرار وفق نوع الصورة
- صورة معلوماتية: اشرح الموضوع والسياق بإيجاز.
- أيقونة وظيفية: سمِّ الإجراء الذي تبدأه الأيقونة.
- صورة زخرفية: استخدم نصًا بديلًا فارغًا، حتى لا يقرأ قارئ الشاشة معلومات غير ضرورية.
- رسم بياني أو مخطط: وضّح النتيجة الرئيسية في النص، وقدّم البيانات في قائمة عند الحاجة.
إذا كانت الصورة تتضمن نصًا، فقدّم النص نفسه داخل الصفحة أيضًا. ولا تستخدم اسم الملف أو سلسلة من الكلمات المفتاحية بدلًا من النص البديل. ولا تترك حقل النص البديل فارغًا في شاشة الرفع للصور المعلوماتية.
أتِح لمحرّر المحتوى تحديد الغرض من الصورة. وينبغي أن يحافظ النظام على النص البديل الفارغ عند اختيار صورة زخرفية. وفي صور المنتجات، اكتب المعلومات المميّزة مثل اللون أو الطراز أو محتويات العبوة. ولا تكرّر المعلومات نفسها في كل صورة.
اختبر تسميات حقول النماذج ومسار معالجة الأخطاء
تؤثر نماذج التواصل وطلب عروض الأسعار والدفع مباشرةً في نتائج الأعمال. ويجب أن يحمل كل حقل إدخال تسمية واضحة. فالنص النائب لا يكفي وحده ليحل محل التسمية؛ إذ يختفي بمجرد أن يبدأ المستخدم بالكتابة.
سمِّ الحقول بوضوح
- اربط حقول الاسم والبريد الإلكتروني والهاتف بعنصر label، أي تسمية الحقل.
- اجمع أزرار الاختيار ومربعات الاختيار داخل عنصر fieldset، أي مجموعة الحقول.
- وضّح مجموعة الخيارات باستخدام عنصر legend، أي عنوان المجموعة.
- بيّن إلزامية الحقل بالنص إلى جانب علامة النجمة.
- حدّد سمة الملء التلقائي لحقول الاسم والعنوان والهاتف.
قدّم رسالة الخطأ مع طريقة المعالجة
عندما يرسل المستخدم النموذج، وضّح صراحةً الحقل الذي توجد فيه المشكلة. ولا تكتفِ باللون الأحمر أو أيقونة علامة التعجب. اعرض ملخص الأخطاء أعلى النموذج وانقل التركيز إليه. واحتفظ بالبيانات المدخلة باستثناء كلمة المرور.
يجب أيضًا أن يكون فتح روابط نص قانون حماية البيانات الشخصية التركي KVKK والمعلومات المسبقة والعقد ممكنًا باستخدام لوحة المفاتيح. وينبغي أن يوضح اسم الرابط المستند الذي سيفتحه.
في مواقع التجارة الإلكترونية التي تتضمن خطوات العنوان والتوصيل وبيانات البطاقة، راجع الحدود الزمنية أيضًا. وأتِح للزائر طلب وقت إضافي أو الاطّلاع على تنبيه بشأن الوقت قبل الإجراء.
قائمة التحقّق من إمكانية الوصول إلى الموقع قبل النشر
تكشف أدوات الفحص الآلي بعض مشكلات الشيفرة. لكنها لا تستطيع وحدها تقييم ترتيب التركيز أو سياق النص. وفي كل إصدار، اجمع بين الفحص الآلي والمراجعة اليدوية وسيناريوهات المهام الواقعية.
- تحقّق من لغة الصفحة وتسلسل العناوين وإمكانية الانتقال إلى المحتوى الرئيسي.
- صِغ غرض كل رابط بوضوح بحيث يُفهم أيضًا بمعزل عن النص المحيط به.
- اختبر ترتيب التنقّل باستخدام Tab ووضوح التركيز وسلوك مفتاح Esc.
- قِس نسب التباين في ألوان النصوص والمكوّنات وحالاتها.
- راجع النصوص البديلة للصور.
- راجع الترجمة النصية لمقاطع الفيديو والتفريغات النصية للمحتوى الصوتي.
- أرسل النموذج ببيانات غير صحيحة وأخرى صحيحة. واستمع إلى رسائل الخطأ والنجاح باستخدام قارئ الشاشة.
- اختبر المسار الأساسي على شاشة هاتف محمول، وعند مستوى تكبير مرتفع، وباستخدام قارئ شاشة واحد على الأقل.
عيّن شخصًا مسؤولًا وأولوية وموعدًا للمعالجة لكل مشكلة تجدها. وقدّم المشكلات التي تعوق إتمام الإجراءات، مثل مشكلات القائمة الرئيسية أو الدفع. وأدرج قواعد النص البديل والعناوين في دليل النشر للفرق التي تضيف المحتوى.
اربط المراجعة بسير العمل
لا تؤجل إمكانية الوصول إلى يوم النشر. اعتمد نماذج الألوان والحالات في ملف التصميم. وراجع HTML الدلالي، أي ترميز العناصر بما يعبّر عن معناها، وسلوك لوحة المفاتيح في مرحلة التطوير. وبعد النشر، سجّل ملاحظات المستخدمين بانتظام.
يوحّد هذا النهج قرارات المحتوى والتصميم والبرمجة حول هدف واحد في مشاريع تصميم المواقع المؤسسية.
الأسئلة الشائعة
ما هو WCAG؟
يقدّم WCAG معايير لإمكانية الوصول إلى محتوى الويب. في المشاريع الجديدة، دوّن معايير WCAG 2.2 وهدف المستوى AA منذ بداية المشروع. وليُدرج الفريق هذا الهدف ضمن اختبارات التصميم والتطوير والنشر.
هل يكفي المستوى AA من WCAG لموقع أعمال؟
يوفّر المستوى AA نقطة انطلاق عملية لمعظم مواقع الأعمال. لكن الجهات الحكومية والخدمات المالية والمشاريع التعاقدية قد تفرض متطلبات إضافية. راجع التشريعات ذات الصلة وشروط العقد مع فريقك القانوني.
هل يكفي الفحص الآلي لإمكانية الوصول؟
لا. قد تكشف الأدوات التسميات المفقودة وبعض مشكلات التباين. لكن أجرِ اختبارًا بشريًا لترتيب التنقّل بلوحة المفاتيح وجودة الأوصاف ومسار معالجة الأخطاء. فسيناريو المهمة الواقعية يكشف مشكلات لا تراها الأدوات.
هل يمكنني جعل الموقع الحالي قابلًا للوصول دون إعادة تصميمه بالكامل؟
حدّد أولًا القوالب الأكثر استخدامًا ومسارات التحويل. ويمكن لفريقك تحسين صفحات عديدة في الوقت نفسه عبر إصلاح المكوّنات المشتركة. ثم عالج عناصر المحتوى والوسائط تدريجيًا.
الخلاصة والخطوة التالية
في مشروع موقع جديد أو تجديد موقع قائم، أدرج قرارات إمكانية الوصول في خطة التصميم والتطوير منذ البداية. شاركنا مسار صفحاتك عبر نموذج طلب عرض السعر؛ لنحدّد معًا أهدافك وأولوياتك والنطاق التقني.
