إمكانية الوصول في المواقع: قائمة مبسطة تجعل موقعك سهل الاستخدام للجميع

في هذا الدليل

1. ما معنى إمكانية الوصول؟
2. معيار WCAG بلغة بسيطة
3. النصوص والألوان والتباين
4. الصور والفيديو والحركة
5. لوحة المفاتيح والنماذج
6. الجوال واللمس والتكبير
7. نقاط خاصة بالمواقع العربية
8. كيف تختبر موقعك؟ والقائمة المختصرة
9. موقعك القادم مع ويبنا
10. أسئلة شائعة
11. الخلاصة

ما معنى إمكانية الوصول في المواقع؟

تعرّف مبادرة إمكانية الوصول إلى الويب (WAI) في W3C هذا المفهوم بأن تُصمَّم المواقع وتُطوَّر بحيث يستطيع الأشخاص ذوو الإعاقة استخدامها: أن يدركوا المحتوى ويفهموه، ويتنقلوا فيه، ويتفاعلوا معه. ويشمل ذلك الإعاقات البصرية والسمعية والحركية والإدراكية وغيرها مما يؤثر في استخدام الويب.

لكن الفائدة لا تتوقف عند هذه الفئة. تذكر المبادرة أمثلة لمن يستفيد أيضًا:

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

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

معيار WCAG بلغة بسيطة: ما الذي تحتاج معرفته؟

إرشادات الوصول إلى محتوى الويب (WCAG) معيار دولي تطوّره W3C بمشاركة أفراد وجهات من أنحاء العالم. وبحسب صفحة W3C التعريفية بالمعيار:

• صدر WCAG 2.0 في 11 ديسمبر 2008، وWCAG 2.1 في 5 يونيو 2018، وWCAG 2.2 في 5 أكتوبر 2023 مع تحديث في 12 ديسمبر 2024.
• يضم WCAG 2.2 ثلاثة عشر إرشادًا مرتبة تحت أربعة مبادئ، ولكل إرشاد معايير نجاح قابلة للاختبار.
• معايير النجاح على ثلاثة مستويات: A و AA و AAA، وهي التي تحدد المطابقة للمعيار.
• الإصدارات متوافقة مع ما قبلها: المحتوى المطابق لـ WCAG 2.2 مطابق أيضًا لـ 2.1 و2.0، وتشجع W3C على استخدام أحدث إصدار.

والمبادئ الأربعة أسهل مدخل لفهم المعيار كله، فاسأل عن كل صفحة في موقعك:

أي مستوى تستهدف؟ المستوى A هو الحد الأدنى، والمستوى AAA متقدم. والهدف العملي المعقول لموقع شركة أن يحقق معايير المستويين A و AA، وهي التي بنينا عليها القائمة في هذا الدليل. والمرجع الذي تعود إليه عند أي تفصيل هو المرجع السريع لـ WCAG من W3C، وفيه كل معيار مع طرق تحقيقه، ويمكن تصفيته بحسب المستوى.

ماذا عن الإرشادات السعودية؟

نشرت هيئة الحكومة الرقمية «الدليل الاسترشادي لسهولة الوصول لمحتوى المواقع الحكومية الإلكترونية». ويذكر الدليل أنه يوضح إرشادات WCAG 2.1 الصادرة عن W3C وأدوات التحقق والتقنيات المساعدة، وأنه يستهدف الجهات الحكومية والقطاع الخاص الذي يعمل مطورًا أو مشغلًا لأعمال الحكومة الرقمية، ويعد مصدرًا إرشاديًا للمهتمين من الأفراد أيضًا. فإن كان موقعك يخدم جهة حكومية أو يرتبط بخدماتها، فاقرأ الدليل وما يحيل إليه مباشرة. أما ما ينطبق نظامًا على نشاطك فارجع فيه إلى الجهة المختصة بقطاعك، فهذا المقال إرشاد عام لا استشارة قانونية.

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

التباين أول ما تفحصه، لأنه يؤثر في كل زائر تقريبًا. ويحدد WCAG 2.2 أرقامًا واضحة:

• النص العادي: نسبة تباين 4.5:1 على الأقل مع خلفيته (المعيار 1.4.3، المستوى AA).
• النص الكبير: 3:1 على الأقل. ويعرّف المعيار النص الكبير بأنه 18 نقطة على الأقل، أو 14 نقطة بخط عريض.
• العناصر غير النصية: حدود حقول الإدخال والأيقونات التي تحمل معنى تحتاج تباينًا لا يقل عن 3:1 مع ما يجاورها (المعيار 1.4.11).
• لا تعتمد على اللون وحده: إن كان الأحمر يعني «غير متوفر»، فأضف كلمة أو أيقونة (المعيار 1.4.1، المستوى A).
• تكبير النص: يجب أن يبقى المحتوى كاملًا وصالحًا للاستخدام عند تكبير النص حتى 200% (المعيار 1.4.4).

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

الخط العربي والقراءة

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

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

الصور والفيديو والحركة

يطلب المعيار 1.1.1 (المستوى A) بديلًا نصيًا لكل محتوى غير نصي يؤدي الغرض نفسه. في التطبيق العملي يعني ذلك سمة alt مكتوبة لكل صورة تحمل معلومة، وسمة alt فارغة للصور الزخرفية حتى يتجاوزها قارئ الشاشة. والسؤال الذي تكتب به النص البديل: لو اختفت الصورة، ما الجملة التي تعوّض الزائر عنها؟

الصورة	نص بديل ضعيف	نص بديل مفيد
صورة واجهة مكتبك	صورة1	مدخل المكتب في الطابق الأرضي بجوار موقف السيارات
صورة منتج	منتج، أفضل منتج، منتج رخيص	علبة هدايا من الخشب بغطاء منزلق وثلاثة أقسام داخلية
أيقونة واتساب بلا نص	أيقونة	تواصل معنا عبر واتساب
زخرفة خلفية	زخرفة إسلامية جميلة	سمة alt فارغة لأنها لا تحمل معلومة

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

وللفيديو والحركة ثلاث قواعد أساسية:

• ترجمة نصية للفيديو المسجل الذي فيه كلام (المعيار 1.2.2، المستوى A)، وتفيد أيضًا من يشاهد دون صوت في مكان عام.
• زر إيقاف لكل حركة تلقائية: أي محتوى يتحرك تلقائيًا أكثر من خمس ثوانٍ بجانب محتوى آخر، مثل شرائح العرض المتحركة، يحتاج وسيلة لإيقافه أو إخفائه (المعيار 2.2.2).
• لا تشغّل الصوت تلقائيًا: الفيديو الذي يبدأ بصوت يربك مستخدم قارئ الشاشة لأنه يغطي صوت القارئ نفسه.

لوحة المفاتيح والتركيز والنماذج

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

• كل شيء بلوحة المفاتيح (2.1.1، المستوى A): الروابط والأزرار والقوائم المنسدلة والنوافذ المنبثقة تُفتح وتُستخدم وتُغلق دون فأرة.
• مؤشر تركيز ظاهر (2.4.7، المستوى AA): إطار واضح حول العنصر الذي وصل إليه الزائر بمفتاح Tab. لا تحذفه في التصميم دون بديل أوضح.
• التركيز لا يختفي (2.4.11، المستوى AA، جديد في 2.2): الرأس الثابت أو شريط ملفات تعريف الارتباط أو زر المحادثة العائم لا يغطي العنصر المركّز عليه بالكامل.
• تجاوز الأجزاء المتكررة (2.4.1، المستوى A): رابط «انتقل إلى المحتوى» في أعلى الصفحة يوفّر على مستخدم لوحة المفاتيح المرور بالقائمة كاملة في كل صفحة.
• المساعدة في مكان ثابت (3.2.6، المستوى A، جديد في 2.2): إن كان رقم الهاتف أو زر واتساب أو رابط التواصل متكررًا في الصفحات، فاجعله في الترتيب نفسه في كل صفحة.

نماذج التواصل والطلب

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

1. تسمية ظاهرة لكل حقل (3.3.2، المستوى A): «الاسم» و«رقم الجوال» فوق الحقل، مربوطة به في الشيفرة. والنص الباهت داخل الحقل الذي يختفي عند الكتابة لا يكفي تسمية.
2. رسالة خطأ بالكلمات (3.3.1، المستوى A): «رقم الجوال يجب أن يبدأ بـ 05 ويتكون من 10 أرقام» أفضل من إطار أحمر حول الحقل وحده.
3. لا تطلب المعلومة مرتين (3.3.7، المستوى A، جديد في 2.2): ما أدخله الزائر في خطوة سابقة من العملية نفسها يُعبّأ له أو يُتاح له اختياره.
4. دخول بلا ألغاز (3.3.8، المستوى AA، جديد في 2.2): لا يعتمد تسجيل الدخول على تذكّر أو حل لغز دون بديل، فاسمح بلصق كلمة المرور وبمديري كلمات المرور.

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

الجوال واللمس والتكبير

يصل كثير من زوار مواقع الشركات من الجوال، فمعايير هذا القسم تمس جزءًا كبيرًا من جمهورك مباشرة:

• حجم الهدف (2.5.8، المستوى AA، جديد في 2.2): الزر أو الرابط لا يقل عن 24 × 24 بكسل CSS، أو تحيط به مسافة كافية تفصله عن الأهداف المجاورة. وأزرار الاتصال والواتساب الرئيسية تستحق أكبر من الحد الأدنى بكثير.
• إعادة التدفق (1.4.10، المستوى AA): يظهر المحتوى دون تمرير أفقي وبدون فقدان معلومات عند عرض يعادل 320 بكسل CSS، وهو ما يعادل تكبير صفحة عرضها 1280 بكسل إلى 400%.
• لا تمنع التكبير: بعض القوالب تعطّل تكبير الصفحة بالإصبعين في إعدادات العرض، فيُحرم ضعيف البصر من أبسط وسيلة يعتمد عليها.
• بدائل للسحب (2.5.7، المستوى AA، جديد في 2.2): كل ما يُنجز بالسحب، مثل شريط اختيار نطاق السعر، يجب أن يعمل أيضًا بالنقر دون سحب.

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

إمكانية الوصول في المواقع العربية وثنائية اللغة

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

• لغة الصفحة (3.1.1، المستوى A): يجب أن تكون لغة كل صفحة محددة برمجيًا، أي lang="ar" في الصفحات العربية وlang="en" في الإنجليزية. ومع اللغة العربية تُضاف سمة الاتجاه dir="rtl" وفق ممارسات HTML المعتادة.
• لغة الأجزاء (3.1.2، المستوى AA): العبارة الإنجليزية داخل فقرة عربية، مثل اسم خدمة أو شعار، تُعلَّم بلغتها، مع استثناءات يذكرها المعيار مثل أسماء العلم والمصطلحات التقنية.

وهذه نقاط عملية نراها كثيرًا في مراجعة المواقع العربية:

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

ولأساسيات تصميم الواجهة العربية نفسها، من الخطوط إلى تخطيط الاتجاه، راجع دليل تصميم المواقع العربية، ولتخطيط موقع بلغتين راجع تصميم موقع بلغتين عربي وإنجليزي.

كيف تختبر إمكانية الوصول في موقعك؟

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

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

القائمة المختصرة لإمكانية الوصول في موقعك

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

البند	ما تفحصه	المعيار (المستوى)
اللغة والاتجاه	lang وdir صحيحان في كل صفحة، والعبارات الأجنبية معلّمة بلغتها	3.1.1 (A)، 3.1.2 (AA)
التباين	النص 4.5:1، والنص الكبير 3:1، وحدود الحقول والأيقونات 3:1	1.4.3 (AA)، 1.4.11 (AA)
الصور	نص بديل مفيد بلغة الصفحة، وفارغ للزخرفة	1.1.1 (A)
اللون	لا معلومة تعتمد على اللون وحده	1.4.1 (A)
لوحة المفاتيح	كل رابط وزر وقائمة يعمل دون فأرة، ورابط تجاوز للمحتوى	2.1.1 (A)، 2.4.1 (A)
التركيز	مؤشر ظاهر لا تغطيه العناصر الثابتة	2.4.7 (AA)، 2.4.11 (AA)
النماذج	تسميات ظاهرة، ورسائل خطأ بالكلمات، ولا إدخال مكرر	3.3.2 (A)، 3.3.1 (A)، 3.3.7 (A)
اللمس	الأهداف 24 × 24 بكسل CSS على الأقل أو بمسافة كافية	2.5.8 (AA)
التكبير	النص حتى 200% دون فقد، والعرض 320 بكسل CSS دون تمرير أفقي	1.4.4 (AA)، 1.4.10 (AA)
الوسائط والحركة	ترجمة نصية للفيديو، وإيقاف لما يتحرك أكثر من خمس ثوانٍ	1.2.2 (A)، 2.2.2 (A)
المساعدة	وسائل التواصل في الترتيب نفسه في كل صفحة	3.2.6 (A)

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

موقعك القادم مع ويبنا: كيف تستفيد من هذه القائمة؟

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

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

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

أسئلة شائعة عن إمكانية الوصول في المواقع

الخلاصة

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

المراجع (تمت المراجعة في نوفمبر 2026): W3C: نظرة عامة على WCAG 2، والمرجع السريع: كيف تحقق WCAG 2، ونص معيار WCAG 2.2، ومقدمة W3C إلى إمكانية الوصول إلى الويب. هيئة الحكومة الرقمية: الدليل الاسترشادي لسهولة الوصول لمحتوى المواقع الحكومية الإلكترونية. ومن ويبنا: أداة فحص تباين الألوان وصفحة الأسعار. أرقام المعايير ونصوصها مأخوذة من المعيار نفسه، والصياغة العربية تبسيط لها. هذا المقال إرشاد عام، وليس استشارة قانونية.