إمكانية الوصول للمواقع: معايير WCAG 2.2 بالأرقام وما تحتاجه المواقع العربية

إمكانية الوصول للمواقع (Web Accessibility، أو a11y اختصارًا) مجموعة شروط مكتوبة بأرقام: نسبة تباين لا تقل عن 4.5:1 لنص المتن، وهدف لمس لا يقل عن 24×24 بكسل CSS، وصفحة تعمل بعرض 320 بكسل من غير تمرير أفقي، وتركيز لوحة مفاتيح مرئي وغير محجوب. المرجع هو معايير WCAG 2.2 من اتحاد الويب العالمي (W3C)، وهي توصية رسمية آخر نسخة منشورة منها بتاريخ 12 ديسمبر 2024.

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

مستويات A وAA وAAA: ماذا يعني كل مستوى

المعايير في WCAG موزّعة على ثلاثة مستويات، والمطابقة تراكمية: مطابقة المستوى AA تعني تحقيق كل معايير A وAA معًا، ومطابقة AAA تعني تحقيق الثلاثة.

والملاحظة المهمة أن W3C نفسها تكتب في وثيقة المطابقة أنه «لا يُنصح باشتراط مطابقة المستوى AAA كسياسة عامة لمواقع كاملة، لأن تحقيق كل معايير AAA غير ممكن لبعض أنواع المحتوى». فالمستوى AAA مجموعة معايير بعضها متعذّر بطبيعته على محتوى معيّن، وليس ترقية تُشترى بمزيد من الميزانية. المستوى العملي الذي تبنى عليه السياسات حول العالم هو AA.

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

التباين: الأرقام الفعلية

«النص الكبير» تعريفه في المواصفة 18 نقطة، أو 14 نقطة بخط عريض. وبما أن أحدًا لا يكتب CSS بالنقاط، فإن وثيقة الفهم الخاصة بالمعيار تعطي التحويل صراحة: النقطة تساوي 1.333 بكسل، أي أن 14 و18 نقطة تعادلان تقريبًا 18.5 و24 بكسل. فالعنوان بحجم 24px أو الفقرة العريضة بحجم 19px تدخل في فئة النص الكبير وتكفيها 3:1، أما نص المتن بحجم 16px فيحتاج 4.5:1 كاملة.

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

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

أحجام أهداف اللمس والتنقّل بلوحة المفاتيح

2.5.8 الحد الأدنى لحجم الهدف معيار جديد في 2.2 بمستوى AA، ويطلب أن يكون هدف المؤشر 24×24 بكسل CSS على الأقل. وله استثناء تباعد محدد بدقة: إذا كان الهدف أصغر، تُرسم دائرة قطرها 24 بكسل حول مركزه، ويجب ألا تتقاطع مع دائرة هدف آخر. هذا ما يجعل صفّ أيقونات المشاركة الصغيرة الملتصقة ببعضها مخالفًا، بينما الأيقونات نفسها بمسافات كافية تمرّ. والمستوى AAA يرفع الرقم إلى 44×44 بكسل.

أما لوحة المفاتيح فأربعة معايير متتابعة:

• 2.1.1 لوحة المفاتيح (A): كل وظيفة في الصفحة قابلة للتشغيل من لوحة المفاتيح.
• 2.1.2 لا مصيدة تركيز (A): ما دخلته بالكيبورد تستطيع الخروج منه بالكيبورد. النافذة المنبثقة التي تحبس التركيز بداخلها هي الحالة الكلاسيكية.
• 2.4.3 ترتيب التركيز (A): تسلسل التنقل يحافظ على المعنى. هنا تحديدًا تنكسر الصفحات التي رُتّبت بصريًا بخاصية order في Flexbox أو Grid من غير تغيير ترتيب العناصر في HTML.
• 2.4.7 التركيز مرئي (AA): مؤشر التركيز ظاهر. حذف outline: none من غير بديل مخالفة مباشرة.

وأضافت 2.2 معيارًا خامسًا يعالج مشكلة شائعة: 2.4.11 التركيز غير محجوب بمستوى AA يشترط ألا يكون العنصر الذي استقبل التركيز مخفيًا بالكامل خلف محتوى من صنع المطوّر، مثل شريط سفلي ثابت أو رأس لاصق أو شريط كوكيز.

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

معيار 1.4.12 يُفهم خطأ باستمرار. المواصفة تقول صراحة إن المحتوى غير مطالب باستخدام هذه القيم؛ المطلوب أن الصفحة لا تفقد محتوى أو وظيفة حين يفرضها المستخدم من إعداداته أو بإضافة متصفح. والفرق عملي: زر ارتفاعه ثابت بـ height: 40px ونصه سطر واحد سيقصّ نصه عند فرض ارتفاع سطر 1.5، بينما الزر الذي يعتمد على padding يتمدّد.

و256 بكسل في معيار إعادة التدفق ليست خطأ مطبعيًا. الرقم الأول (320) لعرض المحتوى الذي يُمرَّر رأسيًا، والثاني لارتفاع المحتوى الذي يُمرَّر أفقيًا مثل النصوص العمودية. والبند يستثني ما يحتاج تخطيطًا ثنائي البعد بطبيعته: الخرائط والمخططات والفيديو والجداول.

ما الذي أضافته WCAG 2.2 تحديدًا

النسخة 2.2 أضافت تسعة معايير على 2.1، وألغت معيارًا واحدًا هو 4.1.1 Parsing الذي كان يطالب بترميز صحيح خالٍ من العناصر المكررة، وصار متقادمًا لأن المتصفحات الحديثة تعالج هذه الأخطاء بنفسها.

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

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

هذا الجزء لا يوجد في الترجمات الجاهزة، لأن مصادره في توثيق التدويل لا في توثيق الوصول.

dir وlang في المكان الصحيح

توثيق التدويل في W3C قاطع في نقطتين. الأولى أن الاتجاه الأساسي يُضبط بالسمة dir="rtl" على وسم html نفسه، وأن الاتجاه الافتراضي في غياب السمة يكون من اليسار لليمين مهما كان محتوى الصفحة عربيًا. والثانية أن ضبط الاتجاه الأساسي من CSS خطأ، لأن اتجاه النص معلومة دلالية يجب أن تبقى متاحة حتى لو لم تُحمَّل الأنماط. فالسطر الصحيح في أعلى الصفحة هو: <html dir="rtl" lang="ar">

والسمة lang ليست تفصيلًا شكليًا. وثيقة فهم المعيار 3.1.1 تشرح أن قارئ الشاشة يحمّل بناءً عليها قواعد النطق الصحيحة. فصفحة عربية بلا lang="ar"، أو بقيمة lang="en" منسية في القالب، تُقرأ بمحرك نطق إنجليزي على نص عربي. وحين تدرج مصطلحًا إنجليزيًا داخل فقرة عربية، فالمعيار 3.1.2 لغة الأجزاء بمستوى AA يطلب تعليمه بـ span لغته en، مع استثناء أسماء العلم والمصطلحات التي صارت جزءًا من الكلام المحيط.

وفي CSS، استبدل left وright بالخصائص المنطقية start وend كما يوصي التوثيق نفسه، ليصحّ التخطيط في الاتجاهين من غير ملف أنماط ثانٍ.

المحتوى الذي يكتبه المستخدم

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

وفي حالة واحدة تحتاج تدخلًا يدويًا: عنوان صفحة عربية يبدأ بكلمة لاتينية. المتصفحات لا تقرأ اتجاه الوثيقة عند عرض عنوان التبويب أو المفضّلة، بل تخمّن الاتجاه من أول حرف قوي، فيخرج الترتيب مقلوبًا. والحل الذي يوصي به التوثيق هو إضافة علامة اليمين لليسار (&rlm;) في بداية العنوان.

الأرقام العربية واتجاهها

وثيقة متطلبات تخطيط العربية والفارسية الصادرة عن W3C توضح تفصيلة يقع فيها المطوّرون. الأرقام العربية الهندية (٠ ١ ٢ ٣) المستخدمة في مصر والسعودية والعراق تصنيفها في خوارزمية الاتجاهين AN، بينما الأرقام الأوروبية (0 1 2 3) تصنيفها EN، والاثنان لا يترتبان بالطريقة نفسها داخل نص عربي مختلط. وفي كل الأحوال تُكتب الأرقام نفسها من اليسار لليمين حتى داخل نص يُقرأ من اليمين.

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

الخط العربي وارتفاع السطر

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

أسماء الأزرار والحقول للقارئ

المعيار 2.5.3 التسمية في الاسم بمستوى A يطلب أن يحتوي الاسم البرمجي للعنصر النصَّ المعروض بصريًا. والحالة التي تكسره في مشاريعنا متكررة: زر مكتوب عليه «إرسال الطلب» ومضاف له aria-label بقيمة Submit. المستخدم الذي يشغّل الصفحة بالأوامر الصوتية يقول ما يراه، فلا يجد ما يطابقه.

ودليل ممارسات ARIA من W3C يصف أثر aria-label بوضوح: مستخدم التقنية المساعدة يدرك محتوى السمة فقط، لا نص الرابط المرئي. فترجمة منسية في سمة واحدة تُلغي النص العربي كله عن قارئ الشاشة.

هل الوصول الرقمي إلزامي في السعودية ومصر؟

السعودية

هيئة الحكومة الرقمية أصدرت وثيقة بعنوان «إمكانية الوصول لمحتوى المواقع الحكومية الإلكترونية» ونشرتها في 1 ديسمبر 2022، مصنَّفة في إطارها التنظيمي ضمن «الأدلة الإسترشادية»، وهي فئة منفصلة عن «السياسات» وعن «الضوابط والمعايير». ونطاقها كما تصفه الهيئة هو «المنصات والبوابات الرقمية والمواقع الإلكترونية الحكومية»، والوثيقة تقدّم إرشادات WCAG وأدوات التحقق والتقنيات المساعدة. أي أنها دليل موجَّه للجهات الحكومية بصفة استرشادية، لا لائحة تفرض مستوى مطابقة محددًا.

بجانب ذلك تلتزم جهات بعينها في سياساتها المنشورة. سياسة الوصول إلى المعلومات والخدمات الحكومية الرقمية في هيئة الاتصالات والفضاء والتقنية تنص في البند 4.8 على «الامتثال للحد الأدنى لمعايير إمكانية الوصول وسهولة الاستخدام المعتمدة من قبل (W3C) وإرشادات الوصول إلى محتوى الويب للوصول (WCAG 2.0) في كل منصات الهيئة». وهذا التزام تفرضه الجهة على منصاتها هي، وبنسخة WCAG 2.0 لا 2.2.

مصر

قانون حقوق الأشخاص ذوي الإعاقة رقم 10 لسنة 2018، المنشور في الجريدة الرسمية العدد 7 مكرر (ج) بتاريخ 19 فبراير 2018، يعرّف في مادته الثالثة «النفاذ إلى الاتصالات وتكنولوجيا المعلومات» بأنه «إزالة الحواجز بما يكفل تمكين الأشخاص ذوي الإعاقة من الوصول إلى تكنولوجيا المعلومات والاتصالات بما في ذلك شبكة الإنترنت، والخدمات الإلكترونية، وخدمات الطوارئ». وفي المادة الرابعة، البند 12، تلتزم الدولة باتخاذ التدابير التي تكفل وصول الأشخاص ذوي الإعاقة واستخدامهم للمعلومات والاتصالات والتكنولوجيا.

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

الخلاصة العملية لمالك موقع تجاري

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

وهذه إجابة أنفع من التهويل: نفّذ ما يستحق التنفيذ لأنه يصلح المنتج، لا خوفًا من مفتش لن يأتي.

قائمة فحص من الكود

البنية الدلالية. استخدم header وnav وmain وfooter وbutton وa لما صُنعت له، ورتّب العناوين h1 إلى h6 بتسلسل من غير قفز. المعيار 1.3.1 يطالب بأن تكون البنية والعلاقات قابلة للتحديد برمجيًا، وهذا ما يفعله HTML الصحيح مجانًا.

ARIA بحساب. القاعدة الأولى لاستخدام ARIA أن تستخدم عنصر HTML الأصلي إن كان يحمل الدلالة والسلوك المطلوبين أصلًا. ودليل الممارسات يلخّص الخطر في جملة: «لا ARIA أفضل من ARIA سيئة»، ويشرح أن role="button" على عنصر div وعد بأنك كتبت بنفسك تفاعل لوحة المفاتيح الذي يأتي مع عنصر button جاهزًا. وممنوع وضع aria-hidden="true" أو role="presentation" على عنصر قابل للتركيز، لأن المستخدم عندها يقف على «لا شيء».

ترتيب التركيز. اجعل ترتيب HTML هو الترتيب المنطقي، وتجنّب tabindex بقيم موجبة. وفي النوافذ المنبثقة: انقل التركيز إليها عند الفتح، واحبسه داخلها ما دامت مفتوحة، وأعده إلى الزر الذي فتحها عند الإغلاق، مع إبقاء الخروج بمفتاح Esc متاحًا حتى لا تتحول النافذة إلى مصيدة تخالف 2.1.2.

النماذج. لكل حقل عنصر label مرتبط بـ for وid، لا placeholder وحده. وعند الخطأ: اذكر الحقل ووصف المشكلة بالنص لا باللون فقط (3.3.1)، واقترح التصحيح إن كان معروفًا (3.3.3)، واربط الرسالة بالحقل بالسمة aria-describedby. ورسائل الحالة التي تظهر من غير أن ينتقل إليها التركيز، مثل «تمت الإضافة إلى السلة»، يغطيها 4.1.3 وتحتاج role="status" لتُقرأ.

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

الاختبار اليدوي الذي لا بديل عنه. أغلق الفأرة وتنقّل في مسار الشراء أو التسجيل كاملًا بمفاتيح Tab وShift+Tab وEnter وEsc. أكثر الأعطال الحقيقية تظهر في أول دقيقتين من هذا الاختبار.

أدوات مجانية، وحدودها المعلنة

• WAVE من WebAIM: أداة على الويب وإضافة لكروم وفايرفوكس وإيدج، تعرض الأخطاء فوق الصفحة نفسها.
• axe DevTools من Deque: إضافة متصفح تُدمج في أدوات المطوّر، وهي المحرك الذي تعتمد عليه أدوات أخرى في ترجيح نتائجها.
• Lighthouse المدمجة في Chrome DevTools: تعطي درجة لإمكانية الوصول ضمن تقرير الصفحة.
• NVDA من NV Access: قارئ شاشة مجاني ومفتوح المصدر لويندوز، مترجم لأكثر من 50 لغة ومعه مُصنّع نطق يدعم أكثر من 55 لغة. وهو أسرع طريقة لتسمع صفحتك العربية كما يسمعها مستخدمها.

والحدّ الذي يجب أن يُقال: W3C تكتب صراحة أن «الأدوات لا تستطيع فحص كل جوانب إمكانية الوصول آليًا. الحكم البشري مطلوب… أدوات التقييم لا تستطيع تحديد إمكانية الوصول، بل تساعد فقط في ذلك». وتوثيق Chrome نفسه يوضح أن درجة Lighthouse متوسط مرجَّح للفحوص الآلية، وأن الفحوص اليدوية لا تدخل في الحساب. فدرجة 100 تعني أن الفحوص الآلية مرّت، لا أن الموقع مطابق.

ما الذي يتحسّن للجميع

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

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

أما حجم الفئة الأساسية فمن مصدر أوّلي: منظمة الصحة العالمية تقدّر في صحيفة وقائعها المحدَّثة في 7 مارس 2023 أن نحو 1.3 مليار شخص، أي 16% من سكان العالم أو واحد من كل ستة، يعيشون بإعاقة ملموسة.

من أين تبدأ عمليًا

ابدأ بالأربعة التي تُصلح أكبر قدر بأقل مجهود: مطابقة التباين لـ 4.5:1 و3:1 في طبقة الألوان، وإعادة مؤشر تركيز مرئي لكل عنصر تفاعلي، وضبط dir وlang على وسم html، والمرور على مسار التحويل الرئيسي بلوحة المفاتيح وحدها. بعدها انتقل إلى أحجام الأهداف والنماذج ورسائل الخطأ.

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

المصادر

• Web Content Accessibility Guidelines (WCAG) 2.2، W3C، توصية بتاريخ 12 ديسمبر 2024.
• What's New in WCAG 2.2، W3C WAI.
• Understanding SC 1.4.3 Contrast (Minimum)، W3C WAI.
• Structural markup and right-to-left text in HTML، W3C i18n.
• Arabic & Persian Layout Requirements، W3C، ملاحظة مجموعة عمل بتاريخ 2 أكتوبر 2025.
• ARIA Authoring Practices Guide: Read Me First، W3C WAI.
• إمكانية الوصول لمحتوى المواقع الحكومية الإلكترونية، هيئة الحكومة الرقمية، السعودية.
• سياسة الوصول إلى المعلومات والخدمات الحكومية الرقمية، هيئة الاتصالات والفضاء والتقنية.
• قانون حقوق الأشخاص ذوي الإعاقة رقم 10 لسنة 2018، الجريدة الرسمية المصرية، العدد 7 مكرر (ج)، 19 فبراير 2018.
• Selecting Web Accessibility Evaluation Tools، W3C WAI.