قائمة تحقق WCAG 2.2 AA لإمكانية الوصول في المتاجر الإلكترونية

قائمة تحقق WCAG 2.2 AA لمتاجر Shopify وWooCommerce حسب نوع الصفحة: النص البديل والتباين والتسميات ولوحة المفاتيح والتركيز وحجم الهدف ومعايير 2.2 الجديدة.

فريق تحرير FixReportsمدة القراءة: 10 دقيقة

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

أبرز النقاط

  • أصبح WCAG 2.2 توصية من W3C في 5 أكتوبر 2023. والإصدار الحالي مؤرخ في 12 ديسمبر 2024، وقد اعتُمد معيارًا دوليًا باسم ISO/IEC 40500:2025 (يفتح في علامة تبويب جديدة).
  • في تقرير WebAIM Million 2026 (يفتح في علامة تبويب جديدة) (بيانات فبراير 2026)، كانت 95.9% من الصفحات الرئيسية لأكبر مليون موقع تحتوي على إخفاقات WCAG 2 قابلة للاكتشاف.
  • كانت الإخفاقات الستة الأكثر شيوعًا: النص منخفض التباين (83.9% من الصفحات)، وغياب النص البديل (53.1%)، وغياب تسميات النماذج (51%)، والروابط الفارغة (46.3%)، والأزرار الفارغة (30.6%)، وغياب تحديد لغة الصفحة (13.5%).
  • سجّلت الصفحات الرئيسية لمتاجر Shopify في تلك العينة، وعددها 42,516 صفحة، متوسط 75.1 خطأً مكتشفًا، مقابل 56.1 لجميع الصفحات.
  • يضيف WCAG 2.2 أربعة معايير من المستوى AA (2.4.11 و2.5.7 و2.5.8 و3.3.8) ومعيارين من المستوى A (3.2.6 و3.3.7)، ويحذف المعيار 4.1.1 Parsing.

ما الذي تغيّر في WCAG 2.2 بالنسبة إلى المتاجر الإلكترونية؟

أضاف WCAG 2.2 تسعة معايير نجاح، ستة منها في المستوى A أو AA، وأسقط المعيار 4.1.1 Parsing لأنه أصبح متقادمًا (W3C WAI (يفتح في علامة تبويب جديدة)).

المعيار الجديدالمستوىماذا يعني في المتجر
2.4.11 Focus Not Obscured (Minimum)AAيجب ألا يُحجب الرابط أو الزر الذي عليه التركيز بالكامل خلف رأس صفحة ثابت، أو شريط «أضف إلى السلة» ثابت، أو شريط ملفات تعريف الارتباط، أو أداة الدردشة
2.5.7 Dragging MovementsAAأي عنصر يتطلب السحب، مثل شريط تمرير نطاق السعر، يحتاج إلى بديل يعمل بنقرة واحدة
2.5.8 Target Size (Minimum)AAتكون أهداف النقر واللمس 24 × 24 بكسل CSS على الأقل، أو متباعدة بحيث لا تلامس دائرةٌ بحجم 24 px حول كل منها الأهدافَ المجاورة
3.2.6 Consistent HelpAتظهر روابط المساعدة أو بيانات الاتصال أو الدردشة بالترتيب النسبي نفسه في كل صفحة
3.3.7 Redundant EntryAلا تطلب المعلومات نفسها مرتين في العملية الواحدة؛ بل املأها تلقائيًا أو اسمح للناس باختيارها
3.3.8 Accessible Authentication (Minimum)AAيجب ألا يعتمد تسجيل الدخول على الحفظ أو النسخ اليدوي، ما لم يوجد بديل أو وسيلة مساعدة مثل اللصق ومديري كلمات المرور

أما المعايير الثلاثة الأخرى (2.4.12 و2.4.13 و3.3.9) فهي من المستوى AAA. ولأن الإصدار 2.2 يحتفظ بكل معايير 2.1 باستثناء 4.1.1، فإن استيفاء 2.2 AA يغطي أيضًا 2.1 AA.

ما معايير WCAG التي تفشل فيها قوالب المتاجر أكثر من غيرها؟

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

المعيارما الذي يفشل في المتاجرطريقة الإصلاح
1.1.1 Non-text Content (A)صور منتجات بلا نص بديل أو يكون نصها البديل اسم الملف؛ وصور مرتبطة بروابط بلا نصصِف المنتج المعروض (اللون، والطراز، وزاوية التصوير). استخدم alt="" للزخرفة فقط. ويجب أن تُخرج قوالب Shopify القيمة image.alt
1.4.3 Contrast (Minimum) (AA)نص أساسي رمادي فاتح، ونص العنصر النائب (placeholder)، وشارات التخفيضات، والنص فوق صور الواجهة الرئيسية (hero)4.5:1 للنص العادي، و3:1 للنص الكبير (نحو 24 px، أو 18.5 px بخط عريض) (W3C (يفتح في علامة تبويب جديدة))
2.4.4 Link Purpose (A)، 4.1.2 Name, Role, Value (A)روابط السلة والبحث والشبكات الاجتماعية المكوّنة من أيقونات فقط؛ وأسهم شرائح العرض؛ وأزرار الإغلاق «X» بلا اسمامنح كل عنصر تحكم نصًا ظاهرًا أو aria-label، مثل «السلة، عنصران»
1.3.1 Info and Relationships (A)، 3.3.2 Labels or Instructions (A)حقول النشرة البريدية والبحث التي لا تحمل سوى نص العنصر النائب؛ وحقول الكمية بلا تسمياتاستخدم <label for> يطابق id الحقل؛ واجمع نماذج الألوان المبنية بأزرار الاختيار (radio) في fieldset مع legend
2.1.1 Keyboard (A)، 2.1.2 No Keyboard Trap (A)قوائم لا تعمل إلا عند تمرير المؤشر، ونماذج ألوان مبنية من عناصر div، ونوافذ منبثقة لا يمكن إغلاقها من لوحة المفاتيحاستخدم عناصر button وa حقيقية؛ واجعل مفتاح Escape يغلق الطبقات المنبثقة ويعيد التركيز
2.4.7 Focus Visible (AA)outline: none في ملفات CSS الخاصة بالقالبأضف نمط :focus-visible يبرز بوضوح على الخلفية

ووجد WebAIM أيضًا أن واحدة من كل أربع صور مرتبطة بروابط كانت بلا نص بديل، وأن 45% من الصور التي تفتقر إلى نص بديل كانت روابط (WebAIM (يفتح في علامة تبويب جديدة)). وفي شبكة منتجات المجموعة، يعني ذلك عادةً رابط صورة المنتج.

ما الذي يجب أن تتحقق منه في الصفحة الرئيسية؟

تحقّق من رأس الصفحة، وقسم الواجهة الرئيسية (hero)، وكل ما ينبثق على الشاشة، لأن كل زائر يقابلها أولًا.

  • رابط التخطي. رابط «انتقل إلى المحتوى» (Skip to content) بوصفه أول عنصر قابل للتركيز (2.4.1 Bypass Blocks، المستوى A).
  • أيقونات رأس الصفحة. تحمل أيقونات البحث والحساب والسلة أسماء قابلة للوصول، ويتضمن اسم السلة عدد العناصر فيها.
  • القائمة. تُفتح بمفتاح Enter أو Space، ويمكن الوصول إلى العناصر الفرعية بمفتاح Tab، وتُغلق بمفتاح Escape، ولا تعتمد على تمرير المؤشر (2.1.1). وتنص متطلبات Theme Store (يفتح في علامة تبويب جديدة) في Shopify على أن جميع أجزاء الصفحة، بما فيها القوائم المنسدلة، يجب أن تكون قابلة للوصول عبر لوحة المفاتيح.
  • شرائح الواجهة الرئيسية. إذا كانت الشرائح تتحرك تلقائيًا لأكثر من خمس ثوانٍ، فوفّر عنصر تحكم للإيقاف المؤقت (2.2.2 Pause, Stop, Hide، المستوى A).
  • شريط الإعلانات والنص فوق الصور. قِس التباين؛ فألوان العلامة التجارية كثيرًا ما تفشل في بلوغ 4.5:1.
  • النوافذ المنبثقة وشرائط ملفات تعريف الارتباط. انقل التركيز إلى النافذة المنبثقة، وأضف تسمية لحقل البريد الإلكتروني، واسمح بإغلاقها بمفتاح Escape، وتأكد من أن الشريط الثابت لا يحجب أبدًا العنصر الذي عليه التركيز بالكامل (2.4.11). ويذكر W3C الخاصية scroll-padding في CSS بوصفها إحدى طرق إبقاء العناصر التي عليها التركيز بعيدة عن الأشرطة الثابتة (W3C (يفتح في علامة تبويب جديدة)).
  • لغة الصفحة. يحمل العنصر html سمة lang صحيحة (3.1.1 Language of Page، المستوى A).

ما الذي يجب أن تتحقق منه في صفحات المجموعات؟

تفشل صفحات المجموعات عادةً في بطاقات المنتجات والفلاتر ونماذج الألوان.

  • بطاقات المنتجات. يحمل رابط الصورة نصًا بديلًا، أو تكون الصورة مخفية عن التقنيات المساعدة ويحمل رابط العنوان اسم المنتج.
  • الفلاتر. لكل مربع اختيار تسمية، ولكل مجموعة عنوان أو وسيلة إيضاح (legend). يُفتح درج الفلاتر ويعمل ويُغلق عبر لوحة المفاتيح. وأعلن أعداد النتائج المحدّثة بوصفها رسالة حالة (4.1.3 Status Messages، المستوى AA).
  • أشرطة تمرير السعر. أضف حقلين رقميين للحد الأدنى والحد الأقصى حتى يعمل الفلتر دون سحب (2.5.7) ودون فأرة (2.1.1).
  • نماذج الألوان (swatches). لكل نموذج اسم نصي، ولا تُعرض حالة «نفدت الكمية» باللون وحده (1.4.1 Use of Color، المستوى A). وتستوفي النماذج مقاس 24 × 24 بكسل CSS أو قاعدة التباعد (2.5.8).
  • الفرز والتنقل بين الصفحات. للقائمة المنسدلة الخاصة بالفرز تسمية؛ وتستوفي روابط الصفحات وأزرار «تحميل المزيد» متطلبات حجم الهدف.

ما الذي يجب أن تتحقق منه في صفحات المنتجات؟

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

  • معرض الصور. لكل صورة نص بديل، والصور المصغرة أزرار بأسماء مثل «عرض الصورة 2»، والأسهم تعمل دون سحب (2.5.7).
  • أدوات اختيار المتغيرات. توضع خيارات المقاس واللون في مجموعة لها تسمية (1.3.1)، ويُكشف الخيار المحدد لقارئات الشاشة (4.1.2)، وتُميَّز المقاسات غير المتوفرة بالنص.
  • الكمية. للحقل تسمية، ولزرَّي النقص والزيادة أسماء ويستوفيان 2.5.8. وأصبح Theme Store في Shopify يشترط ألا تقل أهداف اللمس عن 24 × 24 بكسل CSS، وتوصي أفضل ممارسات إمكانية الوصول (يفتح في علامة تبويب جديدة) لديه بمقاس 44 × 44 لعناصر التحكم الرئيسية.
  • الإضافة إلى السلة. تُعلَن رسائل النجاح والخطأ (4.1.3). وقد استشهدت شكوى لجنة التجارة الفيدرالية الأمريكية (FTC) ضد إحدى الشركات المزوّدة لأدوات التراكب (overlay) بموقع لم يُعلن فيه قارئ الشاشة عن إضافة منتج إلى السلة، وكان رسم تقييم الخمس نجوم فيه يُقرأ بصوت عالٍ بوصفه زر «السابق» (شكوى FTC (يفتح في علامة تبويب جديدة)).
  • التقييمات وعلامات التبويب والأكورديون. تحمل التقييمات نصًا مثل «4.5 من 5 نجوم». وتكشف عناصر الأكورديون ما إذا كانت موسَّعة.
  • شريط الإضافة إلى السلة الثابت. يجب ألا يحجب العنصر الذي عليه التركيز بالكامل عندما يتنقل مستخدم لوحة المفاتيح نزولًا في الصفحة بمفتاح Tab (2.4.11).
  • الفيديو. تحمل مقاطع فيديو المنتجات التي تتضمن كلامًا ترجمة نصية (1.2.2 Captions (Prerecorded)، المستوى A).

ما الذي يجب أن تتحقق منه في السلة وعند تسجيل الدخول؟

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

  • درج السلة. ينتقل التركيز إلى الدرج، ويبقى فيه ما دام مفتوحًا، ويعود إلى زر السلة عند إغلاقه بمفتاح Escape، كما تصف أفضل ممارسات Shopify.
  • عناصر السلة. يحمل كل حقل كمية تسمية تتضمن اسم المنتج، ويوضح كل زر حذف ما الذي يحذفه، مثل «إزالة قميص كتان، المقاس M».
  • حقول الخصم والملاحظات. لها تسميات، وتوصف أخطاؤها نصيًا (3.3.1 Error Identification، المستوى A).
  • زر إتمام الشراء. يمكن الوصول إليه بمفتاح Tab، ويظهر عليه التركيز بوضوح، ولا يختفي خلف العناصر الثابتة.
  • تسجيل الدخول (3.3.8). تستخدم حسابات العملاء في Shopify افتراضيًا تسجيل الدخول دون كلمة مرور برمز لمرة واحدة (يفتح في علامة تبويب جديدة). ويذكر W3C أن الرموز يجب أن تكون قابلة للصق أو للتعبئة التلقائية، وأن حظر اللصق أو مديري كلمات المرور يُعد إخفاقًا في المعيار؛ ويُسمح في المستوى AA باختبارات CAPTCHA القائمة على التعرف على الأشياء، لكن اختبارات CAPTCHA القائمة على الألغاز أو العمليات الحسابية تحتاج إلى طريقة أخرى (W3C (يفتح في علامة تبويب جديدة)).

تهم الفروق بين المنصات هنا. ففي Shopify، الملف checkout.liquid لم يعد مدعومًا (يفتح في علامة تبويب جديدة) في خطوات المعلومات والشحن والدفع، لذا فإن معظم ترميز صفحة الدفع يأتي من Shopify لا من قالبك؛ فاختبر تطبيقات الدفع والتخصيصات التي تضيفها. أما في WooCommerce، فصفحة الدفع صفحة على موقع WordPress الخاص بك. ويذكر WooCommerce أن الواجهة الأمامية الأساسية لديه متوافقة إلى حد كبير مع WCAG 2.2 AA (آخر تحديث للبيان في 1 أبريل 2025)، لكن قالبك وإضافاتك قد تُخلّ بهذا التوافق (WooCommerce (يفتح في علامة تبويب جديدة)).

كيف تختبر متجرك وفق قائمة التحقق هذه؟

اجمع بين فحص آلي، وعملية شراء كاملة بلوحة المفاتيح فقط، وفحص قصير بقارئ الشاشة، في كل نوع من الصفحات.

  1. الفحص الآلي. تلتقط أدوات مثل axe أو WAVE أو Lighthouse مشكلات التباين والنص البديل والتسميات والروابط الفارغة. ويطلب Theme Store في Shopify متوسط درجة إمكانية وصول في Lighthouse لا يقل عن 90 في الصفحة الرئيسية وصفحات المجموعات والمنتجات. وهذا حد أدنى وليس توافقًا: إذ يذكر W3C أن الأدوات لا تستطيع وحدها تحديد إمكانية الوصول (يفتح في علامة تبويب جديدة).
  2. الشراء بلوحة المفاتيح فقط. انطلق من الصفحة الرئيسية، وصِل إلى منتج عبر القائمة أو البحث، وطبّق فلترًا، واختر متغيرًا، وأضفه إلى السلة، وافتح السلة، وصِل إلى زر إتمام الشراء دون فأرة.
  3. فحص سريع بقارئ الشاشة. باستخدام VoiceOver أو NVDA، استمع إلى اسم المنتج وسعره وحالة المتغير وتأكيد الإضافة إلى السلة.
  4. أعد الاختبار بعد التغييرات. قد تُلغي تحديثات القالب والتطبيقات الجديدة الإصلاحات.

يغطي الفحص المجاني الذي نقدمه الخطوة 1 على صفحة رئيسية وصفحة مجموعة وصفحة منتج وصفحة سلة وصفحة محتوى، في متصفح Chromium حقيقي باستخدام axe-core. ويختبر تقرير إصلاح إمكانية الوصول ما يصل إلى 25 صفحة، ويضيف الخطوة 2 في صورة اختبار تسوق بلوحة المفاتيح فقط حتى زر إتمام الشراء، ويقدّم الشيفرة قبل الإصلاح وبعده، ويتضمن قائمة تحقق للخطوة 3 التي تحتاج إلى شخص يستخدم قارئ الشاشة. ولا يضمن أيٌّ منهما التوافق مع ADA أو WCAG.

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

هل يُلزم القانون المتاجر الإلكترونية الأمريكية بـ WCAG 2.2؟

لا توجد لدى وزارة العدل الأمريكية لائحة بموجب قانون ADA الأمريكي تحدد معيارًا للويب للشركات الخاصة، وتشير إرشاداتها للويب لعام 2022 (يفتح في علامة تبويب جديدة) إلى WCAG بوصفها إرشادات مفيدة. وتستشهد خطابات المطالبة عادةً بـ WCAG 2.1 أو 2.2 بالمستوى AA، لذا تحدّث إلى محامٍ بشأن التزاماتك المحددة.

هل يعني استيفاء WCAG 2.2 AA استيفاء WCAG 2.1 AA أيضًا؟

نعم، من الناحية العملية. يحتفظ WCAG 2.2 بجميع معايير النجاح في WCAG 2.1 باستثناء 4.1.1 Parsing، الذي حذفه W3C لأنه أصبح متقادمًا.

ما الحد الأدنى لحجم الهدف في WCAG 2.2؟

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

هل تعني درجة 100 في إمكانية الوصول على Lighthouse أن متجري متوافق؟

لا. لا تكتشف الأدوات الآلية إلا بعض الإخفاقات، ويشير WebAIM إلى أن عدم اكتشاف أخطاء لا يعني أن الصفحة قابلة للوصول أو متوافقة.

هل يُعد تسجيل الدخول بكلمة مرور إخفاقًا في المعيار 3.3.8؟

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

كم مرة يجب أن أعيد اختبار متجري؟

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

المصادر

كل الأدلة