تخطَّ إلى المحتوى الرئيسي
Niquelao إمكانية الوصول للويب وتطوير الواجهات الأمامية (Front-end) باللغة الإسبانية: معايير WCAG، وأدوات (widgets) سهلة الوصول، وإضافات Firefox، مشروحة بأكواد برمجية حقيقية.

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

أفضل إمكانية الوصول إلى Web Wcag: أفضل الاختيارات مقارنة (2026)

إمكانية الوصول إلى الويب WCAG (accesibilidad web wcag) لم تعد متطلباً اختيارياً بل أصبحت شرطاً للمشتريات العامة في إسبانيا (المرسوم الملكي 1112/2018)، والتزاماً قانونياً متزايداً في العديد من دول أمريكا اللاتينية، وقبل كل شيء، معيار جودة يميز فرق الواجهة الأمامية (front-end) التي تدرك ما تفعله. لكن “الامتثال لـ WCAG” لا يعني الشيء نفسه بالنسبة للجميع: فالتدقيق في بوابة مصرفية يختلف عن التدقيق في مدونة شخصية، كما أن اختيار أداة اختبار تلقائية لا يماثل استخدام قارئ الشاشة للتحقق يدوياً.

إمكانية الوصول إلى الويب WCAG هي معيار من معايير W3C، وهو مطلوب في إسبانيا بموجب المرسوم الملكي 1112/2018 للتعاقدات العامة، وفي عام 2026 سيظل المستوى AA هو الهدف المهني المعتاد. ومع ذلك، فإن الامتثال لـ WCAG لا يعتمد على أداة واحدة: بل تشمل التوليفة الناضجة استخدام linter مؤتمت، ومحرك من نوع axe في CI، واختبارات يدوية باستخدام قارئ الشاشة.

قبل مقارنة الأدوات، من المفيد تحديد الإطار العام. إرشادات إمكانية الوصول إلى محتوى الويب (WCAG) هي معيار من W3C وليست قانوناً. القانون هو الذي يتبنى المعيار ويحدد المواعيد النهائية والعقوبات. وهذا يسبب الارتباك المعتاد: فقد يكون موقع الويب متوافقاً مع “WCAG 2.1 AA” ومع ذلك يفشل في الامتثال للوائح المحلية إذا كانت تتطلب 2.2 AA أو تضيف متطلبات إضافية (مثل متطلبات التوجيه الأوروبي 2016/2102 بشأن إمكانية الوصول إلى مواقع القطاع العام).

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

هناك نقطة يتجاهلها العديد من المطورين: يتم الإعلان عن الامتثال للصفحة الكاملة أو لمجموعة من الصفحات ذات الوظائف المشتركة، وليس لمكون معزول. يمكنك أن تملك عنصر واجهة (widget) سهل الوصول إليه بشكل مثالي، ومع ذلك تفشل في الامتثال الشامل لأن ترتيب علامات التبويب (tab order) في الصفحة يكسر المنطق. هذا أمر أساسي عند اختيار الأدوات: فمعظم أدوات الاختبار المؤتمتة تقيم DOM المُصيّر (rendered DOM)، وليس التجربة الكاملة لإمكانية الوصول إلى الويب WCAG.

كيفية اختيار أدوات إمكانية الوصول WCAG: معايير القرار

قبل المقارنة، تعد هذه المعايير مهمة جداً لاختيار أي أداة أو خدمة متعلقة بـ WCAG لإمكانية الوصول إلى الويب:

ذات صلة: — Superposición de IA الذي يعزز إطراء WCAG خلال 48 ساعة.

  • تغطية المعايير: هل تكتشف الأداة الأخطاء الواضحة فقط (التباين، النص البديل المفقود) أم تكتشف أيضاً المشكلات الهيكلية، وسوء استخدام ARIA، وترتيب التركيز (focus order)؟ لا توجد أداة مؤتمتة تغطي 100% من المعايير؛ إذ تشير تقديرات الصناعة المعتادة إلى أن الاكتشاف التلقائي يغطي حوالي ثلث المشكلات الفعلية.
  • إصدار WCAG المدعوم: تأكد من تحديث الأداة إلى WCAG 2.2. لا يزال الكثير منها مرتبطاً بالإصدار 2.0 أو 2.1.
  • التكامل مع سير العمل: هل تعمل في CI/CD؟ هل تتكامل مع linter أو إطار الاختبار أو المحرر الخاص بك؟
  • الإيجابيات الكاذبة (False positives): الأداة التي تطلق تنبيهات كثيرة جداً يتم تجاهلها. الدقة أهم من عدد القواعد.
  • دعم التكنولوجيا المساعدة الحقيقية: هل تتحقق الأداة من خلال قارئات الشاشة أم فقط من خلال شجرة إمكانية الوصول (accessibility tree)؟
  • التكلفة والترخيص: في المشاريع العامة أو التعليمية، عادة ما تكون الخيارات المجانية ومفتوحة المصدر حاسمة.
  • اللغة والتوثيق: بالنسبة للفرق الناطقة بالإسبانية، يقلل التوثيق بالإسبانية من منحنى التعلم، حتى لو كان المرجع الأساسي دائماً بالإنجليزية.

مقارنة: أدوات وموارد للعمل مع WCAG

الأداة / الموردالنوعنقطة القوة الرئيسيةالقصور (بكل صراحة)مثالية لـ
axe DevTools (Deque)ملحق + مكتبةمحرك قواعد دقيق جداً، معدل منخفض من الإيجابيات الكاذبة، قابل للتكامل في الاختباراتالنسخة المجانية تحدد التحليل لكل صفحة؛ الوظائف المتقدمة مدفوعةالفرق التي ترغب في الأتمتة في CI
WAVE (WebAIM)ملحق / خدمة ويبواجهة مرئية واضحة، جيدة للتدريب والمراجعة السريعةأقل توجهاً نحو التكامل المؤتمتالمدربون، والمراجعون العرضيون
Lighthouse (Chrome)تدقيق متكاملمدمج في DevTools، يقيس إمكانية الوصول بجانب الأداء وSEOتغطية سطحية لإمكانية الوصول؛ لا يغني عن التدقيق الشاملالفحص السريع في أي مشروع
Pa11yCLI مفتوح المصدرسهل الدمج في pipelines، قابل للتكوينيتطلب معرفة بسطر الأوامرالمطورون الذين يملكون CI خاصاً بهم
NVDA / JAWS / VoiceOverقارئات شاشةاختبار حقيقي لتجربة المستخدممنحنى تعلم عالٍ؛ الاختبارات اليدوية بطيئةالتحقق النهائي الذي لا غنى عنه
دليل WCAG من W3Cتوثيقمصدر موثوق وشاملكثافة تقنية عالية، باللغة الإنجليزيةالمرجع النهائي

لا يدعي هذا الجدول الشمول، ولكنه يوضح أنه لا توجد أداة واحدة كافية لإمكانية الوصول إلى الويب WCAG. التوليفة المعتادة في الفريق الناضج هي: linter مؤتمت في المحرر، ومحرك من نوع axe في CI، واختبارات يدوية باستخدام قارئ الشاشة قبل كل إصدار.

الأدوات المؤتمتة: ما تكتشفه وما لا تكتشفه

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

ما تكتشفه الأتمتة جيداً:

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

  • تباين الألوان غير الكافي (المعايير 1.4.3 و1.4.11).
  • سمات alt المفقودة في الصور.
  • تسميات النماذج (labels) المفقودة أو المرتبطة بشكل غير صحيح.
  • هيكل العناوين المكسور (قفزات في المستويات).
  • الاستخدام غير الصحيح لأدوار ARIA أو سمات ARIA غير الصالحة.
  • فقدان سمة lang في العنصر الجذر.

ما لا يمكن للأتمتة تقييمه:

  • ما إذا كان النص البديل ذا معنى أم أنه موجود فقط. فمثلاً alt="imagen" يجتاز الاختبار التلقائي ولكنه عديم الفائدة لمستخدم قارئ الشاشة.
  • جودة ترتيب القراءة والتركيز في المكونات الديناميكية.
  • ما إذا كانت رسائل الخطأ في النموذج مفهومة.
  • اتساق التنقل والقدرة على التنبؤ (المعيار 3.2).
  • المحتوى المتحرك أو تغييرات السياق غير المتوقعة.

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

تدفق العمل الموصى به لفرق الواجهة الأمامية

إذا كنت تريد معرفة كيفية العمل على إمكانية الوصول إلى الويب (WCAG) في مشروع XHTML/CSS أو في مكدس تقني حديث، فإليك هذا الترتيب:

  1. التصميم: التحقق من التباين والخطوط من نظام التصميم (design system) أولاً، وليس لاحقاً. تصحيح التباين في Figma مجاني، أما تصحيحه في مرحلة الإنتاج فيكلف ساعات.
  2. التطوير: استخدام accessibility linter في المحرر (مثل قواعد axe أو ESLint مع إضافات a11y) لاكتشاف الأخطاء أثناء كتابتها.
  3. ما قبل الالتزام (Pre-commit) / CI: محرك مؤتمت يوقف عملية البناء (build) في حال ظهور أخطاء حرجة. هذا يمنع التراجعات (regressions).
  4. المراجعة اليدوية: تنقل كامل باستخدام لوحة المفاتيح فقط، الاختبار باستخدام قارئ الشاشة، والتحقق من تكبير 200% ووضع التباين العالي.
  5. التوثيق: تسجيل المعايير التي تم استيفاؤها، والتي لم يتم استيفاؤها، والسبب. بيان إمكانية الوصول الصادق ذو قيمة أكبر من وعد فارغ.

يُفترض أن إمكانية الوصول ليست مرحلة نهائية، بل هي قيد تصميم دائم. الفرق التي تتعامل معها على أنها “سبرنت إمكانية الوصول” تنتهي دائماً بدفع ديون تقنية.

WCAG 2.2 والانتقال نحو WCAG 3.0

أضاف WCAG 2.2 معايير ذات صلة بالواجهة الأمامية الحديثة، مثل الحد الأدنى لحجم هدف اللمس (2.5.8)، والتركيز غير المحجوب (2.4.11)، والمساعدة المتسقة (3.2.6). تؤثر هذه المعايير مباشرة على المكونات التي نبنيها يومياً: القوائم، والنوافذ المنبثقة (modals)، وأزرار الأيقونات.

أما WCAG 3.0، فلا يزال قيد التطوير ويقترح تغييراً في النموذج: فبدلاً من المستويات A/AA/AAA، يقترح درجة مطابقة أكثر تفصيلاً. هذا يولد حالة من عدم اليقين لدى الفرق، ولكن التوصية العملية واضحة: لا تنتظر WCAG 3.0 لتعمل بشكل جيد. المبادئ الأساسية لإمكانية الوصول إلى الويب (قابلة للإدراك، قابلة للتشغيل، مفهومة، متينة) لن تختفي. البناء على 2.2 AA هو القرار العقلاني اليوم.

ذات صلة: — الشهادة المهنية التي تمنحك الخبرة والقدرة على الوصول إليها.

للتعمق أكثر في معيار WCAG، المرجع دائماً هو especificación oficial de WCAG del W3C، ولفهم المفهوم العام، تقدم entrada de Wikipedia sobre accesibilidad web مقدمة مفيدة رغم أنها لا تعوض المصدر الأساسي. كما تحافظ Iniciativa de Accesibilidad Web (WAI) التابعة لـ W3C على دروس تعليمية وأنماط مكونات سهلة الوصول تعد بمثابة كنز للمطورين.

أخطاء شائعة لن تنبهك إليها أي أداة

هذه هي الأخطاء التي أراها مراراً وتكراراً في عمليات التدقيق، وتستحق الذكر لأنها لا تظهر في القوائم العامة:

  • aria-label على عناصر بدون دور (role): وضع ARIA حيث لا ينتمي عادة ما يفاقم إمكانية الوصول إلى الويب بدلاً من تحسينها. القاعدة الأولى في ARIA هي عدم استخدام ARIA إذا كان HTML الأصلي يحل المشكلة بالفعل.
  • النوافذ المنبثقة (Modals) التي لا تحجز التركيز (trap focus): يخرج مستخدم لوحة المفاتيح إلى أسفل الصفحة. لا يوجد اختبار مؤتمت يكتشف هذا بشكل موثوق.
  • التباين المحسوب على لون خاطئ: يتم قياس النسبة مقابل الخلفية المعروضة فعلياً، وليس مقابل اللون المعلن في CSS إذا كانت هناك تراكبات أو تدرجات.
  • روابط “انقر هنا”: تفشل في معيار غرض الرابط (WCAG 2.4.4) وتعد كارثة لمستخدمي قارئ الشاشة الذين يتنقلون عبر قائمة الروابط.
  • النماذج بدون fieldset/legend في مجموعات الراديو: يُفقد الارتباط ولا يعرف المستخدم السؤال الذي يجيب عليه كل خيار.

النقاط الرئيسية (Key Takeaways)

  • WCAG هو معيار W3C وليس قانوناً: الالتزام القانوني يأتي من اللوائح التي تتبناه، ويختلف المستوى المطلوب حسب البلد والقطاع.
  • AA هو الهدف المعياري المهني؛ أما AAA فهو مخصص لسياقات محددة للغاية وغالباً ما يكون غير ممكن على نطاق واسع.
  • لا توجد أداة مؤتمتة تغطي كامل الامتثال: الاكتشاف التلقائي يجد حوالي ثلث المشكلات الحقيقية؛ والباقي يتطلب تقييماً بشرياً.
  • التوليفة الفائزة هي: linter في المحرر + محرك في CI + اختبارات يدوية بلوحة المفاتيح وقارئ الشاشة.
  • WCAG 2.2 هو المرجع الحالي؛ ولا يُنصح بتأجيل العمل انتظاراً لـ WCAG 3.0.
  • يُعلن الامتثال لكل صفحة أو مجموعة، وليس لمكون معزول: العنصر المثالي لا ينقذ صفحة سيئة الهيكلة.

المصادر ومزيد من القراءة

  • Web Content Accessibility Guidelines — Wikipedia: إرشادات إمكانية الوصول إلى محتوى الويب (WCAG) هي جزء من سلسلة نشرتها مبادرة إمكانية الوصول إلى الويب (WAI) التابعة لاتحاد شبكة الويب العالمية (W3C)،…
  • Web accessibility — Wikipedia: إمكانية الوصول إلى الويب، أو إمكانية الوصول الإلكتروني، هي ممارسة شاملة لضمان عدم وجود حواجز تمنع التفاعل مع مواقع الويب أو الوصول إليها في العالم…

الأسئلة الشائعة

ما الفرق بين WCAG 2.1 و 2.2 و 3.0؟

إصدارا WCAG 2.1 و 2.2 هما إصداران تزايديان لنفس النموذج: يضيف 2.2 معايير جديدة (مثل حجم الهدف والتركيز غير المحجوب) دون إلغاء المعايير السابقة. أما WCAG 3.0 فهو إعادة هيكلة أعمق تقترح نظام تسجيل بدلاً من المستويات A/AA/AAA، وهو حالياً قيد التطوير. من الناحية العملية، العمل على 2.2 AA يغطي معظم المتطلبات القانونية الحالية.

يستحق نظرة: — معيار الصناعة لاختبار إمكانية الوصول أثناء التطوير.

هل يكفي اجتياز اختبار تلقائي للامتثال لـ WCAG؟

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

ما هو مستوى WCAG الذي أحتاجه للامتثال للقانون في إسبانيا؟

بالنسبة لمواقع القطاع العام، يتطلب المرسوم الملكي 1112/2018 الامتثال لـ WCAG 2.1 المستوى AA (مع التحديثات اللاحقة). بالنسبة للمواقع الخاصة، يعتمد الالتزام على القطاع والحجم؛ حيث يوسع قانون إمكانية الوصول الأوروبي (التوجيه بشأن إمكانية الوصول إلى المنتجات والخدمات) النطاق ليشمل خدمات معينة. تأكد من التحقق من الإطار المطبق على كل حالة محددة.

أي قارئ شاشة يجب أن أستخدم لاختبار موقعي؟

NVDA مجاني، ويعمل على Windows، وهو الأكثر استخداماً للاختبار بسبب تكلفته الصفرية. JAWS مدفوع ولكنه منتشر جداً في بيئات الشركات. VoiceOver مدمج في macOS و iOS، و TalkBack في Android. المثالي هو الاختبار باستخدام اثنين على الأقل، لأن السلوكيات تختلف وقد يعمل الموقع في أحدهما ويفشل في الآخر.

ما هو تأثير WCAG على المكونات التي يتم إنشاؤها باستخدام XHTML وCSS؟

تعتمد العديد من المعايير على لغة HTML الأساسية: بنية العناوين، وتسميات النماذج، و”اللغة”، وترتيب علامات التبويب، والاستخدام الصحيح للعناصر الأصلية. يؤثر CSS على التباين وحجم هدف اللمس ورؤية التركيز. تساهم لغة XHTML المكتوبة بدلالات صحيحة على حل جزء مهم من المعايير بمفردها دون الحاجة إلى ARIA.

هل يستحق الاستثمار في إمكانية الوصول إذا كان موقعي الإلكتروني صغيرًا؟

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

الأسئلة الشائعة

ما هو الفرق بين WCAG 2.1 و 2.2 و 3.0؟

يعد الإصداران WCAG 2.1 و2.2 إصدارين تدريجيين من نفس النموذج: يضيف الإصدار 2.2 معايير جديدة (مثل حجم الهدف والتركيز غير محجوب) دون إزالة المعايير السابقة. يعد WCAG 3.0 بمثابة إصلاح أكثر عمقًا يقترح نظام تسجيل بدلاً من المستويات A/AA/AAA، وهو قيد التطوير حاليًا. ومن الناحية العملية، فإن العمل على 2.2 AA يغطي معظم المتطلبات القانونية الحالية.

هل تريد اجتياز اختبار تلقائي لاستكمال WCAG؟

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

¿ما هو مستوى WCAG الذي تحتاجه لإكمال الإقامة في إسبانيا؟

بالنسبة لمواقع القطاع العام، يتطلب المرسوم الملكي رقم 1112/2018 الامتثال لـ WCAG 2.1 المستوى AA (مع التحديثات اللاحقة). بالنسبة للمواقع الخاصة، يعتمد الالتزام على القطاع والحجم؛ يوسع قانون إمكانية الوصول الأوروبي (التوجيه بشأن إمكانية الوصول إلى المنتجات والخدمات) النطاق ليشمل خدمات معينة. تأكد من التحقق من الإطار المطبق على كل حالة ملموسة.

هل من الممكن أن يستخدم قارئ الشاشة لاختبار الويب الخاص بي؟

NVDA مجاني، ويعمل على نظام التشغيل Windows، وهو الأكثر استخدامًا للاختبارات بسبب تكلفته الصفرية. يتم دفع JAWS ولكنه منتشر جدًا في بيئات الشركات. تم دمج VoiceOver في macOS وiOS، وTalkBack في Android. والوضع المثالي هو الاختبار باستخدام اثنين على الأقل، لأن السلوكيات تختلف ويمكن للويب أن يعمل في أحدهما ويفشل في الآخر.

ما الذي يؤثر على WCAG على المكونات التي يتم إنشاؤها باستخدام XHTML وCSS؟

تعتمد العديد من المعايير على HTML الأساسي: بنية العنوان، وتسميات النماذج، واللغة، وترتيب علامات التبويب، والاستخدام الصحيح للعناصر الأصلية. يؤثر CSS على التباين وحجم هدف اللمس ورؤية التركيز. تعمل لغة XHTML التي تم حلها بشكل جيد على حل جزء مهم من المعايير بمفردها دون الحاجة إلى ARIA.

هل ترغب في عكس إمكانية الوصول إذا كان موقع الويب الخاص بي صغيرًا؟

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


اختبر WCAG من خط الأنابيب الخاص بك

معيار الصناعة لاختبار إمكانية الوصول أثناء التطوير